Skip to main content
Log in
S

sherryyx

@sherryyx·17 public vizzes

Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of the ten most populous countries, with customized axes and tick formatting. It uses d3.csv to load population data, d3.scaleLinear and d3.scaleBand for scaling, and d3.axisLeft and d3.axisBottom to render axes. The code removes default domain lines, applies a custom tick formatter that abbreviates numbers (converting 'G' to 'B'), and rotates labels via SVG text elements, all rendered with React-compatible D3 v5 in an SVG container.

Apr 10, 2020
Loading thumbnail…

Choropleth map of income group with interactive filtering

This interactive choropleth map displays global income groups using a YlGn color scale, with each country colored according to its income classification. Users can click legend items to filter the map, dimming non-selected countries to 20% opacity while highlighting the chosen income group. Built with D3 v5, the visualization combines geoNaturalEarth1 projection with geoPath for country rendering, loads data from world-atlas TopoJSON and TSV files, and implements zoom functionality through d3-zoom's event transform. Hovering reveals country names and income values via title tooltips.

Mar 16, 2020
Loading thumbnail…

Religions of Largest 20 Countries

This stacked bar chart visualizes the estimated 2010 religion breakdown of the 20 most populous countries, based on data from the Pew Research Center’s Global Religious Landscape report. Hovering over bars reveals tooltips with exact population counts per religion, while hovering over the legend highlights specific religions by fading the other segments. The visualization uses D3.js version 3 with `d3.layout.stack`, `d3.scale.ordinal`, and `d3.svg.axis`, plus the d3-tip library for interactive tooltips and d3-legend for the color key. SVG rendering with animated transitions supports the interactive highlighting effect.

Feb 14, 2020
Loading thumbnail…

Bowl of Fruit - Interactions

Five apples transition in and out of an SVG bowl over timed intervals, with an apple morphing into a lemon mid-sequence. Hovering or clicking a fruit highlights it with a colored outline, and the selection animates as fruits are added or removed. Using D3 v5's data join, enter, update, and exit selections, each circle's radius and fill map through ordinal scales. Interactions trigger a card-based render cycle, while `transition().duration(1000)` animates position and radius changes.

Feb 12, 2020
Loading thumbnail…

Choropleth Map of Income Group

This choropleth map visualizes countries color-coded by income group, using a yellow-green sequential color scale. The map renders world countries as SVG paths via `d3.geoPath` with a `geoNaturalEarth1` projection, and includes an interactive color legend built with a custom `colorLegend` component. Hovering highlights countries in red, while tooltips show the country name and income group. The visualization loads and joins geographic and tabular data from the `world-atlas` package using `Promise.all` with `d3.json` and `d3.tsv`, then processes it with `topojson.feature`.

Feb 5, 2020
Loading thumbnail…

Cheap tricks for interaction

A world map rendered with SVG paths uses d3.geoNaturalEarth1 and d3.geoPath to project country boundaries from TopoJSON data. A zoom behavior enables pan and zoom interactions that transform the map group. Country names from a TSV file are joined to features via an ID lookup, displayed as native SVG title tooltips on hover, while a CSS rule changes hovered countries to red.

Feb 5, 2020
Loading thumbnail…

Let's make a world map with D3.js

This example creates a world map using D3.js and TopoJSON. It renders a natural Earth projection as an SVG, with countries filled in green and a dark blue sphere representing the ocean. The code uses `d3.geoNaturalEarth1` and `d3.geoPath` to project and draw geographic features, while the `topojson` library's `feature` function converts GeoJSON country boundaries from the world-atlas dataset into renderable paths.

Feb 5, 2020
Loading thumbnail…

Bowl of Fruit - General Update Pattern

This example demonstrates the D3 general update pattern by animating a bowl of fruit, where circles representing apples and lemons appear, disappear, and change color through data-driven transitions. It shows enter, update, and exit selections working together as fruits are eaten or replaced over time. The code uses `selection.data()` with a key function, `selection.enter()`, `selection.merge()`, and `selection.exit()` alongside `transition()` for smooth radius and position changes. D3’s `scaleOrdinal` maps fruit types to colors and radii, while `Math.random()` generates unique IDs for each fruit.

Feb 3, 2020
Loading thumbnail…

Bowl of Fruit with Labels

This example demonstrates a dynamic bowl of fruit, initially containing five apples, which are visually removed or transformed into lemons over time. The visualization uses the D3.js framework (v5) to render scalable vector graphics (SVG) elements, animating a change in radius, fill color, and labels for each fruit. The d3 scaleOrdinal function maps fruit types to distinct sizes and colors, while the data join and transition methods manage the addition and removal of graphical elements. The animation is driven by setTimeout calls that alter the underlying data array and trigger a re-render of the scene.

Feb 3, 2020
Loading thumbnail…

World Population Area Chart

This area chart visualizes world population trends from 1950 to 2015, showing population values rising over time with a smooth, curved line filled in teal. The chart uses D3 v5’s `scaleTime` and `scaleLinear` for axes, `area` with `curveBasis` to generate the filled path, and `axisBottom`/`axisLeft` for labeled ticks. Data is loaded from a CSV file, with years parsed as dates and populations as numbers. The SVG rendering includes custom tick styling and axis labels.

Jan 28, 2020
Loading thumbnail…

Cars Scatterplot

This scatterplot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset. It uses a D3.v5 linear scale for both axes within an SVG canvas, with circles representing individual cars. The React-based code constructs axes with tick marks and labels, parses CSV data, and renders the chart with a custom title. Styling is applied via CSS for circle fill, opacity, and text formatting.

Jan 27, 2020
Loading thumbnail…

Scatterplot

This scatterplot displays the population of the ten most populous countries along a horizontal axis, with country names on the vertical axis. It uses d3.scaleLinear for the population scale and d3.scalePoint for categorical country placement, rendering SVG circles via d3.select and data joins. The code leverages d3.axisBottom and d3.axisLeft with tick sizing to create gridlines, and d3.format abbreviates population values. Data is loaded asynchronously from a CSV file using d3.csv, with strings parsed to numbers before rendering.

Jan 27, 2020
Loading thumbnail…

Shapes with SVG

This example demonstrates basic SVG shape rendering, including circles, rectangles, lines, and paths, organized into groups with transforms. It shows how SVG attributes like fill, stroke, and stroke-width control appearance, while nested `<g>` elements apply translations and scaling. The code also uses CSS classes, such as `.lines`, to style the line and path elements, and leverages React as the framework wrapper for the SVG markup.

Jan 27, 2020
Loading thumbnail…

Let's Make a Face!

A smiling face is drawn with orange and pink circles, built incrementally in SVG using D3 v5 API calls like `select`, `append`, and `attr`. The code creates each facial feature as a separate circle, then animates a path-based mouth using `d3.arc` to generate its shape, followed by chained `transition` calls that move it down and back over four seconds. The example runs in a React framework and uses only hardcoded geometry, with no external data source.

Jan 27, 2020
Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart displays temperature variations in San Francisco over time, plotting degrees Celsius against timestamps. The visualization uses D3 v5 with SVG rendering, employing d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and a d3.line generator with curveBasis. Data is loaded via d3.csv from a VizHub-hosted CSV file, with axes augmented by labels and gridlines. The chart features a teal smooth line and a monospace title, with margins positioning the plot area within a 960x500 SVG canvas.

Jan 22, 2020
Loading thumbnail…

Making a Bar Chart

This example shows a simple bar chart comparing the number of "poots" for three categories: Cats, Dogs, and Ants. The visualization uses D3 v5 within a React framework to render the SVG. The code employs `scaleLinear` for the x-axis and `scaleBand` for the y-axis, then draws the bars with SVG `rect` elements. Data is loaded from a CSV file using `csv` and parsed with `d3.max`.

Jan 20, 2020
Loading thumbnail…

Auto-MPG Summary

This example displays a text summary of the Auto MPG dataset, showing the total number of rows, columns, and file size in kilobytes, followed by the first ten rows formatted as JSON. The visualization uses D3 v5’s `csv` and `csvFormat` functions to load and measure the data, and `select` to append `<pre>` elements to the page body. The data originates from the UCI Machine Learning Repository’s Auto MPG Data Set, with the interface styled as a green-on-black monospace terminal.

Jan 20, 2020