Skip to main content
Log in
S

steveaigbe

@steveaigbe·13 public vizzes

Loading thumbnail…

Melting Data for Multiple Lines 2

This visualization shows population trends over time, displaying multiple lines for different regions as determined by the United Nations data. The chart uses a time series layout, with a legend positioned on the right, created using D3’s `scaleOrdinal`, `scaleTime`, and `scaleLinear`. Lines are drawn with the `line` generator, using the `curveBasis` option for smoothness, and are sorted by their last value via `d3.nest`. Data is melted from a CSV file (`us-unemp.csv`) using custom parsing, with `timeParse` converting year strings.

Dec 1, 2020
Loading thumbnail…

Melting Data for Multiple Lines

This visualization shows population trends over time for regions, displaying multiple lines that trace changes from 1950 to 2100. The data is sourced from UN population estimates and medium variant projections, processed through a melting operation that converts wide-format data into long format. The chart uses D3.js v5 APIs including `scaleTime`, `scaleLinear`, `scaleOrdinal`, `line` with `curveBasis` for smooth paths, and `nest` for grouping by region. An ordinal color scale with `schemeCategory10` assigns colors, while a custom legend shows region names.

Nov 27, 2020
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data from multiple cities, sourced from Data Canvas - Sense Your City. A d3.nest() groups the data by city, with d3.scaleTime() and d3.scaleLinear() mapping time and temperature, while d3.line() with curveBasis smooths each city's temperature trend. The chart uses d3.axisLeft and d3.axisBottom with gridlines, and a custom colorLegend function renders categorical colors via d3.scaleOrdinal. SVG rendering with mix-blend-mode multiply overlays the lines, and the visualization concludes with a title reflecting the global scope.

Nov 27, 2020
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays automobile data from the auto-mpg dataset, with dropdown menus allowing users to select which numeric columns appear on the x and y axes. Built with D3 v5, the visualization uses reusable functions for the scatter plot and dropdown menus, with SVG rendering and animated circle transitions. The axis labels update dynamically as selections change, and the plot encodes data points as semi-transparent red circles with a 2-second stagger animation.

Nov 24, 2020
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays countries colored by economic classification, with an interactive legend that filters map features by clicking on a category. The visualization uses d3.geoNaturalEarth1 projection with d3.geoPath to render country boundaries, while the color legend applies d3.scaleOrdinal with schemeSpectral. Pan and zoom are handled through d3.zoom. Data comes from the world-atlas TopoJSON dataset paired with TSV metadata, and filtering dims non-selected countries while highlighting the chosen economic group.

Nov 24, 2020
Loading thumbnail…

Choropleth Map

This choropleth map visualizes global income groups by coloring countries with a spectral color scale. It uses `d3.geoNaturalEarth1` projection and `d3.geoPath` to render the world map from TopoJSON data loaded via `world-atlas`. The map supports zooming through d3’s zoom behavior, and an accompanying legend built with `colorLegend` displays the ordinal scale values. Country data is joined from a TSV file, and hovering highlights each nation while a tooltip title shows its name and income group.

Nov 23, 2020
Loading thumbnail…

Color and Size Legends

This example demonstrates two types of legends for mapping data to visual properties. The color legend uses a `scaleOrdinal` to map categorical names to colors, while the size legend uses a `scaleSqrt` to map numeric values to circle radii with tick marks. Both legends are implemented as reusable functions that append SVG `<g>` elements containing circles and text labels. The code uses D3 v5's selection and merge pattern to efficiently update the legend elements.

Nov 21, 2020
Loading thumbnail…

World Countries Tree

This visualization displays the hierarchical structure of world countries, organized by continent and subregion. It presents a horizontal tree layout where each node represents a geographic area, from the top-level “World” node down to individual countries. The size of the text decreases with the node’s depth in the hierarchy, making higher-level categories more prominent. The implementation uses D3.js version 5 with SVG rendering. It employs the `tree` layout algorithm, `hierarchy` for processing the JSON data, and `linkHorizontal` for generating connecting paths. The code also integrates zoom functionality through a custom `zoom` component that applies user interactions to the SVG group. Country data is sourced from the provided `data.json` file.

Nov 21, 2020
Loading thumbnail…

Cheap Tricks for Interactions

This visualization shows a zoomable world map using a Natural Earth projection, rendered as SVG paths. Countries appear in light green with black outlines, and hovering highlights them in red, while tooltips reveal country names. The code uses d3-geo, d3-geo-projection, and TopoJSON to load world-atlas data, with d3.zoom enabling pan-and-zoom interactions on the projected geometry.

Nov 21, 2020
Loading thumbnail…

Let's make a map with D3.js!

This example shows an interactive world map where countries appear in light green against a blue ocean sphere, using the Natural Earth projection. The visualization loads geographic data from the world-atlas dataset and renders vector paths with SVG. The code imports D3.js functions including geoNaturalEarth1 for the projection, geoPath for generating path data, and select for DOM manipulation. Country boundaries are drawn from TopoJSON features using the topojson library, while styling comes from the attached CSS file.

Nov 21, 2020
Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create a world map using D3.js version 5, rendering countries as light green polygons with black strokes on a blue spherical background. The visualization uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to project geographic coordinates onto an SVG canvas. Country boundaries are loaded as TopoJSON from the world-atlas package and converted to GeoJSON using the `feature` function from the topojson library. The map displays 110-meter resolution country outlines, with the sphere filled in blue to represent oceans.

Nov 21, 2020
Loading thumbnail…

Bowl of Fruit - Click to Select

A clickable bowl of fruit demonstrates selection state in an SVG rendered with React. Five red apples sit in a row, and clicking one highlights it with a black stroke. The `FruitBowl` component maps fruit data to circles, using `d3.scaleOrdinal` for color and radius scales. React hooks (`useState`) manage the selected fruit's ID, which sets the stroke on the active circle.

Nov 21, 2020
Loading thumbnail…

Cars Scatter Plot

A scatter plot displays the relationship between horsepower and weight for individual car models, with each red semi-transparent circle representing a vehicle from the auto-mpg dataset. The visualization uses D3.js version 6 with SVG rendering, employing `scaleLinear` for both axes to map the continuous data values. The code implements `axisBottom` and `axisLeft` for the tick marks, and `extent` to calculate the domain from the data. Axes labels and a title are positioned within the SVG using margin conventions.

Nov 18, 2020