liyaxuanliyaxuan

@liyaxuanliyaxuan·10 public vizzes

Color and Size Legends

This example demonstrates two reusable legend components for scatter plots: a color legend for ordinal scales and a size legend for square-root scales. The color legend displays categorical fruit labels with colored circles, while the size legend uses nested circles of varying radii to represent numeric values. Both legends are implemented as reusable functions using `d3.scaleOrdinal`, `d3.scaleSqrt`, and D3’s data join pattern with enter/merge/exit. The SVGs are rendered with `d3.select` and `.call()`, with text labels positioned using transactional offsets.

Nov 27, 2020

Loading thumbnail…

Blank Canvas

This visualization presents a hierarchical tree of geographic regions and countries, rendered as an SVG using D3’s `tree` layout and `linkHorizontal` path generator. The code loads JSON data and positions nodes by their depth, with labels anchored left or center depending on whether they have children. The viewport fills the browser window, and the tree spans the full available width and height, though zoom functionality is present but commented out.

Nov 27, 2020

Loading thumbnail…

Let's make a map with D3.js!

This example displays an interactive world map using D3.js, with countries rendered as SVG paths filled in green and a blue sphere background. Hovering over a country turns it red, and users can zoom and pan the map via mouse interactions enabled by d3.zoom. The map uses d3.geoNaturalEarth1 projection and d3.geoPath to draw country boundaries from TopoJSON data, while country names are loaded from a TSV file and added as SVG `<title>` tooltips.

Nov 27, 2020

Loading thumbnail…

Bowl of Fruit - click to select

D3 update patterns animate a changing bowl of fruit, where clicking a piece selects it with a black stroke. Apples and lemons are drawn as SVG circles and labeled with text using a `scaleOrdinal` color and radius scale. The code uses D3 v5 selection joins with keyed data, `transition().duration(1000)`, and exit/enter animations to smoothly resize, add, and remove fruit.

Nov 25, 2020

Loading thumbnail…

World Population Area Chart

This chart visualizes world population trends over time as an area chart. A filled, smooth curve shows population growth from historical data, with the area beneath the line rendered in steel blue and outlined in red. The visualization uses a time-scale for the x-axis and a linear scale for the y-axis, with population values formatted in billions. It is built with D3 v6, employing the `area` and `curveBasis` APIs to generate the smooth path, while `axisBottom` and `axisLeft` with grid lines detail the axes. The data is loaded from a CSV file containing yearly population figures.

Nov 24, 2020

Loading thumbnail…

Customizing Axis

This example displays a bar chart of the top 10 most populous countries using 2018 population estimates from the World Population Prospects 2017 dataset. It emphasizes customized axes, with a bottom axis labeled "Population" and a left axis using abbreviated tick labels (e.g., "1.4B") via `d3.format`. The chart uses `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, with grid lines generated by `d3.axisLeft` and `d3.axisBottom`. Data is loaded from a CSV file and rendered as SVG rectangles.

Nov 24, 2020

Loading thumbnail…

Customizing Axis

This bar chart shows the population of the top 10 most populous countries from the 2018 estimate in World Population Prospects 2017. It demonstrates how to customize both axes by removing their domain lines, adding grid lines with large tick marks, and formatting population labels with a custom function that uses `d3.format` to abbreviate values (e.g., "1.42B"). The visualization uses D3 v6 with an SVG rendering, computed linear and point scales for axes, and styled tick text and lines via CSS.

Nov 24, 2020

Loading thumbnail…

Hello D3 Version 6

A horizontal bar chart displays population values for five countries from a CSV file, using D3 v6's `select`, `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`. Steelblue rectangles encode each country's population, with x-axis tick labels formatted via `format('s')`. The chart includes a manually positioned "population" label and removes default axis lines and ticks. Data is loaded asynchronously and converted to numbers before rendering into SVG.

Nov 24, 2020

Loading thumbnail…

Hello D3 Version 6

This example displays a horizontal bar chart comparing the populations of five countries, with countries on the y-axis and population values on the x-axis. It uses D3 version 6’s `csv` to load data from a local file, `scaleLinear` for the value axis, and `scaleBand` for the categorical country axis. The chart renders as SVG, with bars drawn via `rect` elements and axes added using `axisLeft` and `axisBottom`.

Nov 23, 2020

Loading thumbnail…

Hello D3 Version 6

This example uses D3 version 6 to render a simple horizontal bar chart of population counts for five countries, reading from a CSV file. The code imports `select`, `csv`, `scaleLinear`, `max`, and `scaleBand` from D3 to create an SVG visualization. It maps country names to the y-axis using a band scale and population values to the x-axis with a linear scale, then appends rectangles to the SVG. The chart displays the data with equal spacing and no axis labels, emphasizing the relative population magnitudes.

Nov 23, 2020