shanmango

@shanmango·11 public vizzes

Circles on a map

This example displays a natural Earth projection world map with semi-transparent teal circles overlaid on each country, sized by 2018 population data from the UN. Country boundaries are drawn using `d3.geoPath` and TopoJSON, while missing population values appear as pink regions. A `d3.scaleSqrt` maps population to circle radius, and a custom legend shows the scale. The map supports pan and zoom via `d3.zoom`, with circle positioning computed from `d3.geoCentroid` and projected coordinates.

Mar 5, 2020

Loading thumbnail…

Bowl of Fruit - General Update Pattern

A bowl of fruit demonstrates the D3 general update pattern, showing how data changes animate in and out of an SVG visualization. Circles and text labels represent apples and lemons, which appear, disappear, and change type over time. The implementation uses `d3.selectAll`, `.enter()`, `.merge()`, and `.exit()` to handle data joins, while `d3.scaleOrdinal` maps fruit types to colors and radii. The example runs a timed sequence of data mutations to illustrate how updates, additions, and removals are managed.

Feb 12, 2020

Loading thumbnail…

Untitled

A static SVG displays an empty 960-by-500 viewport. The page loads D3 v5 and executes a bundle script, but the provided JavaScript only selects the SVG element and reads its height and width attributes, storing them as numeric variables. No data is processed, and no marks are drawn, resulting in a blank canvas as the final rendered output. The example demonstrates an initial D3 setup stage before any visualization logic is implemented.

Feb 11, 2020

Loading thumbnail…

Map D3

This example displays a world map with light green countries on a dark blue background, rendered as SVG paths. The map uses the natural Earth projection and draws country boundaries with a thin black stroke. The code relies on the D3.js library, specifically `d3.geoPath` and `d3.geoNaturalEarth1`, along with the TopoJSON `feature` function to process GeoJSON data from the world-atlas package. Each country is drawn as a separate SVG path element generated from the projected coordinates.

Feb 11, 2020

Loading thumbnail…

fruit bowl - general update pattern

Five apples in a row transition through enter, update, and exit phases as fruits are removed or change to lemons. D3’s general update pattern binds circle elements to a data array using unique IDs, while `scaleOrdinal` maps fruit types to colors and radii. Mouseover and mouseout events set a selected state that highlights circles with a black stroke. Transitions lasting one second animate circle radius and horizontal position, with exiting elements shrinking to zero before removal.

Feb 7, 2020

Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

A bowl of fruit uses the general update pattern to animate apples and lemons into fixed bowl positions on click. The visualization renders SVG shapes with d3.scaleOrdinal color and radius scales, while a separate text update demonstrates data joins with enter, merge, and exit selections. Built with d3.v5, it pairs a fruitBowl module for shape rendering with an index.js that doubles numeric labels on click.

Jan 31, 2020

Loading thumbnail…

Temperature In SF Line Chart

This line chart visualizes world population from 1950 to 2015, using a filled area path to show the population percentage over time. The SVG rendered with D3 v5 uses `d3.scaleTime`, `d3.scaleLinear`, `d3.axisLeft`, `d3.axisBottom`, and `d3.area` with curveBasis. Data comes from a CSV of world population by year, parsed with `d3.csv`. The chart includes labeled axes, gridlines, and a maroon filled area beneath the curve.

Jan 24, 2020

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and acceleration for cars, with each circle representing a vehicle from the auto-mpg dataset. It demonstrates axis customization using d3.axisLeft and d3.axisBottom, including tick sizing, padding, and label styling. The code uses d3.scaleLinear with extent-based domains and nice() to set scales, while d3.csv loads data from a remote URL. SVG rendering shows semi-transparent steelblue circles, and the plot includes a title and axis labels with custom fonts and colors.

Jan 24, 2020

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the population of the top 10 most populous countries, with circles positioned along a linear population scale and a point scale for country names. The code uses d3.scaleLinear, d3.scalePoint, d3.axisLeft, and d3.axisBottom to render the axes and plot, while custom tick formatting converts large numbers to abbreviated units. Data comes from the 2018 United Nations World Population Prospects estimate, loaded via d3.csv from a local CSV file, and rendered as SVG circles with a fixed radius.

Jan 24, 2020

Loading thumbnail…

Make Bar Chart

A horizontal bar chart displays population counts for ten countries, with bars rendered as blue rectangles scaled by population and labeled with country names on the left. The visualization uses D3 v5, loading data from a CSV file and converting population values to numbers. It employs `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisLeft` and `axisBottom` to generate tick marks, with the SVG appended in a group that respects set margins.

Jan 24, 2020

Loading thumbnail…

Face D3

Face D3 renders a cheerful cartoon face built entirely from SVG shapes arranged around a central point. A yellow circle forms the head, with two black eyes and a mouth drawn using a d3.arc path. The eyebrows are rectangles that animate downward and back upward repeatedly through chained d3 transitions on the transform attribute. The example demonstrates how to combine basic SVG elements with d3’s selection, arc, and transition APIs to create a simple looping motion.

Jan 10, 2020