W

wyh1029

@wyh1029·20 public vizzes

Loading thumbnail…

环境性能数据随时间变化线性图

This visualization displays how three system performance metrics—I/O, network, and CPU utilization—change over a 45-second time interval. The data, sourced from a CSV file, is plotted as smoothed line charts using D3 v5’s `line()` and `curveMonotoneX` to create smooth curves. Each metric is represented by a distinct colored line and accompanying circular scatter points, with hover tooltips revealing exact percentage values. The chart is rendered as an SVG, with axes created via `axisBottom` and `axisLeft`, and it includes a manual legend at the top.

Loading thumbnail…

task算子柱状图

This bar chart visualizes the execution duration of task operators, segmenting each task’s timeline into colored bands that represent individual metrics like input read time, shuffle write bytes, and peak execution memory. The SVG rendering uses d3.scaleLinear and d3.scaleBand to map durations and task IDs, while d3.axisLeft and d3.axisBottom display the axes. Metrics are layered as stacked rectangles within each bar, with data loaded from a JSON file via d3.json.

Loading thumbnail…

draw a world map

This example displays a world map using the Equal Earth projection within an SVG canvas. The map shows country boundaries as light green shapes with dark blue oceans, rendered using `d3.geoEqualEarth` and `d3.geoPath`. It loads geographic data from the world-atlas TopoJSON file, converts it with `topojson.feature`, and appends each country path to the SVG. The visualization relies on D3 v5 and uses simple CSS classes to differentiate the sphere background from country landmasses.

Loading thumbnail…

world countries tree

This visualization shows the hierarchical organization of world countries, arranged as a horizontal tree with continents branching into subregions and then individual nations. The layout positions child nodes to the right of their parent categories, with text labels displayed at varying font sizes based on depth level. Built with D3 v5, the code uses `d3.tree()` and `d3.hierarchy()` to compute the tree structure, `d3.linkHorizontal()` for the connecting paths, and loads country data from a JSON file. The visualization is rendered as SVG, with paths and text elements styled using CSS.

Loading thumbnail…

blank canvas

A blank, rounded rectangle fills the entire browser window, created as a single SVG `<rect>` element. The visualization calculates the canvas dimensions from the document body's client height and width, applying a 40-pixel corner radius to the shape. The code uses D3 v5's selection API (`d3.select`) to target the SVG element and chain attribute assignments for sizing and styling. The example demonstrates a minimal SVG rendering pipeline with D3, where the resulting graphic is purely a static, empty canvas with no data or interaction.

Loading thumbnail…

cheap trick

This example displays an interactive world map with countries filled in light green against a dark blue spherical backdrop. Users can zoom and pan the map, and hovering over a country turns it red while revealing its name in a tooltip. Built with D3 v5 and the topojson library, it loads country boundary data from the world-atlas package and renders it using a geoEqualEarth projection with d3.geoPath. The map background is drawn as a sphere, and zoom interactions are handled through D3’s zoom event.

Loading thumbnail…

bowl of fruit 4

Five circles representing fruit move and scale into a bowl-shaped layout, alternating between red apples and yellow lemons. Hovering highlights a fruit with a black stroke, and exiting fruit shrink away. The example uses D3 v5’s selection joins, `scaleOrdinal` for color and radius, and chained `transition().duration(1000)` to animate enter, update, and exit states. Data is generated randomly in `index.js` with timed mutations.

Loading thumbnail…

bowl of fruit 3

A set of fruit circles animates in and out of an SVG bowl, with apples and lemons distinguished by red and yellow fills and different radii. Clicking a fruit highlights it with a black stroke, triggering a re-render through the custom `fruitBowl` function. The example uses `d3.scaleOrdinal` for color and size mappings, `d3.range` to generate initial data, and `transition` with 1000ms duration to smoothly animate enter, update, and exit states as fruits are removed or change type over time.

Loading thumbnail…

bowl of fruit 2

A dynamic fruit bowl demonstrates animated state changes as apples are eaten and swapped for lemons over timed intervals. Rendered as SVG, the visualization uses d3.scaleOrdinal to map fruit types to colors (red/yellow) and radii (50/40), with circles and labels positioned via translated groups. The d3 data-join pattern handles enter, update, and exit selections seamlessly, while setTimeout triggers sequential modifications to the fruit array, animating the bowl’s composition between apple and lemon variants.

Loading thumbnail…

the population in China in 21th century

This area chart shows the total population of China from 2000 to 2019, with the y-axis scaled up by 10,000 to represent real numbers. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, and `area` generators with `curveBasis` for smooth lines, rendering as SVG. Data comes from China’s National Bureau of Statistics, and the chart includes axes with tick marks and labels for time and population values.

Loading thumbnail…

The next 24 hours AQI in Beijing (area)

This area chart shows the predicted Air Quality Index (AQI) in Beijing over the next 24 hours, with time on the x-axis and AQI values on the y-axis. The smooth curve, generated using D3’s `area` generator with `curveBasis`, highlights rising pollution levels from evening to midday. The visualization loads hourly forecast data from a local CSV file and renders it as an SVG. Axes and gridlines are drawn with `axisBottom` and `axisLeft`, while `scaleTime` and `scaleLinear` map the data coordinates.

Loading thumbnail…

The next 24 hours AQI in Beijing (line)

This visualization displays the Air Quality Index (AQI) forecast for Beijing over a 24-hour period, showing a clear upward trend. The line chart, rendered as an SVG using D3 v5, maps timestamps on the x-axis and AQI values on the y-axis. The code uses `d3.scaleTime` and `d3.scaleLinear` for axis scaling, `d3.line` with `curveBasis` for a smooth line, and `axisBottom` and `axisLeft` for tick marks. Data is loaded from a local CSV file.

Loading thumbnail…

The next 24 hours AQI in Beijing (dot)

This dot chart displays Beijing’s Air Quality Index (AQI) forecasts for the next 24 hours, with each circle representing an hourly reading from March 25–26, 2020. The data comes from weather.com.cn and shows AQI values rising from 95 to a peak of 232 before declining. The visualization uses D3 v5 with `scaleTime` and `scaleLinear` for axes, `axisBottom` and `axisLeft` for gridlines, and SVG circles to plot points. Timestamps are parsed as JavaScript `Date` objects, and the chart includes labeled axes and a title.

Loading thumbnail…

Chinese population 2019 pro

This horizontal bar chart displays the population of Chinese provinces and municipalities for 2019, using steel-blue bars sorted by administrative region. The data comes from the National Bureau of Statistics of China, loaded via a CSV file. Built with D3 v5, the visualization uses `scaleLinear` for the population axis, `scaleBand` for categorical province labels, and `axisBottom`/`axisLeft` to render gridlines and ticks. The chart title and axis labels are added as SVG text elements, with tick formatting converting numbers to millions.

Loading thumbnail…

Chinese population 2018 and GDP with dot

This dot plot visualizes the relationship between population, GDP, and per-capita spending for Chinese provinces in 2018, using bubble size for population and axes for GDP and spending. The chart is rendered as an SVG via D3 v5, with circles positioned by linear scales and labeled with province names. Data comes from the National Bureau of Statistics of China, parsed from a CSV file. Axis ticks and grid lines are styled using D3’s `axisBottom` and `axisLeft` APIs.

Loading thumbnail…

Chinese population 2019 pro with dot

A dot plot displays the 2019 population of Chinese provinces, using circles positioned along a linear population scale and a point scale for province names. The visualization uses D3 v5 with an SVG rendering, importing `csv`, `scaleLinear`, `scalePoint`, and axis components to build the chart. Data comes from the National Bureau of Statistics, with population values loaded from a CSV file and formatted in millions. The chart includes labeled axes, grid lines, and a title, with circles styled in steel blue.

Loading thumbnail…

Chinese population 2019

This bar chart displays the population of Chinese provinces and municipalities in 2019, ordered by name along the vertical axis with population counts on the horizontal axis. Using D3 v5, the visualization employs `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, rendering rectangles in an SVG container. Data comes from a CSV file with values parsed as numbers, and axes are generated with `axisLeft` and `axisBottom`. The source data is cited from China’s National Bureau of Statistics.

Loading thumbnail…

D3.js introduce

This example builds a playful face from basic SVG shapes using D3.js v5. A yellow circle forms the head, with two white ellipses as the background for the eyes, while two dark circles animate upward and change to white over two seconds via `transition().duration()`. A brown arc, created with the `d3.arc()` generator, renders a smiling mouth. The code uses D3 selections to append and style each element, and relies on the `select`, `arc`, and attribute chaining methods to construct the static composition and the animated eye movement.

Loading thumbnail…

Hello world!

This example displays the text "U2" by reading the first record from an embedded JSON dataset of four geospatial points. The application, built with React and rendered through a standard HTML page, parses the coordinates and identification strings using `JSON.parse`. The message is then injected into a `<pre>` element with the ID `message-element`, styled via CSS at a large font size. The visualization demonstrates a minimal pipeline from data ingestion to on-screen output, leveraging JavaScript’s DOM manipulation to update the content.

Loading thumbnail…

Hello world!

This example displays the text "U2" by reading the first record from an embedded JSON dataset of four geospatial points. The application, built with React and rendered through a standard HTML page, parses the coordinates and identification strings using `JSON.parse`. The message is then injected into a `<pre>` element with the ID `message-element`, styled via CSS at a large font size. The visualization demonstrates a minimal pipeline from data ingestion to on-screen output, leveraging JavaScript’s DOM manipulation to update the content.