rdeichert

D3 Line Chart with Multiple Lines

This visualization shows temperature trends across multiple cities over a one-week period, using a multi-line chart with a categorical color scheme and a custom color legend. D3’s `scaleTime` and `scaleLinear` map timestamps and temperature values to SVG coordinates, while `line()` with `curveBasis` creates smooth paths for each city. The code uses `nest()` to group data by city, `scaleOrdinal` with `schemeCategory10` for colors, and `axisBottom`/`axisLeft` for axes with gridlines. Data loads from a CSV file via `d3.csv`, and a custom `colorLegend` component renders the legend.

Dec 25, 2019

D3 Axes

This example displays a horizontal bar chart of the top 10 most populous countries using D3 v5, with populations loaded from a CSV file and scaled linearly. It demonstrates custom axes: the left band scale lists country names without tick lines, while the bottom axis uses a tick formatter that converts values like “1.41G” to “1.41B”. The SVG rendering includes grid lines via negative tick sizes, axis labels, and a title, all styled with external CSS.

Dec 19, 2019

D3 Cars Scatterplot

This scatterplot visualizes the relationship between horsepower and weight for a dataset of cars, with each point representing an individual vehicle. The chart uses D3 v5 to load data from a CSV file via the `csv` method and render SVG circles. Axes are created with `axisBottom` and `axisLeft`, while `scaleLinear` maps the data domain to pixel coordinates, with grid lines added through customized tick sizes. The visualization includes labeled axes and a title, with circles styled in semi-transparent steelblue.

Dec 19, 2019

D3 Selecting a Year on a Line Chart

An interactive line chart displays UN population estimates and projections from 1950 to 2100 for global regions, with a vertical line marking the currently selected year. Moving the mouse across the chart updates the selected year, repositioning the line and highlighting the population values at that moment. The visualization uses d3.line, d3.scaleTime, and d3.scaleLinear for rendering, with a mouse interceptor rectangle capturing pointer events and d3.mouse to convert pixel positions back into dates. A color legend encodes region identities, and the chart is built with SVG elements and D3's data-join pattern.

Dec 19, 2019

D3 Melting Data for Multiple Lines

This visualization displays population trends over time for various world regions, with multiple colored lines representing different areas. The chart uses D3's `scaleTime` and `scaleLinear` to map the data for the x and y axes, and `scaleOrdinal` with `schemeCategory10` for line colors. The code uses D3's `nest` function to group the data by region name, and employs `line` with `curveBasis` for smooth curve rendering. The data is melted from UN population estimates and medium variant projections, covering years from 1950 to 2100. A custom `colorLegend` component renders the color guide for the regions.

Dec 18, 2019

D3 Circles on a Map

This example visualizes global population estimates for 2018 using semi-transparent circles positioned over a natural Earth projection map. Countries with missing data appear in a different shade, while hover effects highlight individual nations. The visualization loads UN population data from a CSV file and country boundaries from a TopoJSON world atlas, then renders the map using `d3.geoPath` and `d3.geoNaturalEarth1`. Circle sizes are scaled with `d3.scaleSqrt`, positioned via `d3.geoCentroid` and `projection`, and the map supports zooming through `d3.zoom`. A custom legend is drawn using SVG circles and text.

Dec 17, 2019

D3 Cars Scatterplot with Menus

This interactive D3.js scatterplot displays automobile performance data from the auto-mpg dataset, plotting 392 vehicles across user-selected numeric attributes. Two dropdown menus let viewers independently choose which columns to map to the x- and y-axes, with options including mpg, horsepower, weight, and acceleration. Built with D3 v5, the visualization uses SVG for rendering and d3.axisBottom and d3.axisLeft for labeled axes. On menu changes, the scatterPlot function transitions each circle to its new position using a staggered d3 transition with duration and delay, creating an animated effect.

Dec 17, 2019

D3 Choropleth Map with Interactive Filtering

This D3 choropleth map visualizes countries colored by their economy category, using a spectral color scale. Users can click legend items to filter the map, highlighting matching countries while dimming others. The map supports zooming and panning through the `d3.zoom` event. It uses `d3.geoPath` and the `geoNaturalEarth1` projection to render geographic features, and the `d3.scaleOrdinal` color scale with `d3.schemeSpectral` for encoding. Data is loaded from the World Atlas topojson and TSV files, processed with TopoJSON.

D3 Choropleth Map

This D3 Choropleth Map colors world countries by their economic classification, using a spectral color scale and a geospatial natural Earth projection. The visualization includes an interactive legend with circles and labels, while zoom and pan are enabled via d3.zoom. Data is loaded from TopoJSON and TSV files using d3.json and d3.tsv, with country paths generated by d3.geoPath. The map is rendered as SVG, and hovering over a country turns it red, with tooltips showing name and economy value.

D3 Color and Size Legends

This example demonstrates two reusable D3 legend components rendered as SVG: a color legend for ordinal scales and a size legend for quantitative scales. The color legend displays fruit categories as colored circles with labels, while the size legend visualizes numeric values through scaled circle radii. Both components use D3’s selection join pattern with `selection.enter` and `selection.merge` to update elements. The size legend relies on `scaleSqrt.ticks` to generate tick values, while the color legend maps ordinal domain values to a range of colors via `scaleOrdinal`.

D3 World Countries Tree

This visualization displays the hierarchical structure of world countries organized by continent and subregion, using a collapsible tree layout rendered as SVG. The code employs D3 v5’s `tree` layout and `linkHorizontal` generator to draw curved links, with `hierarchy` parsing the nested `data.json` file. Text labels scale in font size based on depth, and a zoom behavior allows panning and scaling via `d3.zoom`. The tree reads from a static JSON dataset and applies Playfair Display typography for readability.

D3 Blank Canvas

This example displays a blank, full-window SVG canvas with a single rounded rectangle filling the viewport. The code uses D3 v5's `select` function to target the SVG element and sets its width and height attributes based on the browser window dimensions. A `rect` element with a corner radius of 40 pixels is appended and sized to match the available space. The minimal setup demonstrates how to initialize a D3 visualization with dynamic sizing and CSS styling that locks the body to the viewport.

D3 Map with Interaction

This map displays world countries using a Natural Earth projection, with zoom and pan interaction enabled. Hovering over a country highlights it in red and reveals its name as a tooltip. The visualization uses d3.geoPath and d3.geoNaturalEarth1 to render TopoJSON and TSV data from the world-atlas dataset, with d3.zoom handling the interactive transformations.

D3 Map

This D3 map visualizes global countries using a natural Earth projection. It renders a blue sphere backdrop with light green country polygons outlined in black. The visualization uses the `d3.geoNaturalEarth1` projection with `d3.geoPath` to generate SVG paths, and the `topojson.feature` API to extract country boundaries from a world-atlas TopoJSON dataset. The map displays a graticule-free, simplified world view with countries filled and stroked according to CSS classes.

D3 Bowl of Fruit - Hover to Select

A dynamic scatterplot of fruit items animates apples and lemons as circles, with hover selecting a fruit and highlighting it with a black outline. The D3 version 5 example uses the `select` and `range` functions to manage an SVG, while `scaleOrdinal` maps fruit types to colors and radii. The `fruitBowl` module handles enter, update, and exit transitions via `transition().duration(1000)`, animating circle radius and position over time. Data changes occur through timed calls that pop, mutate, push, and filter the fruit array.

D3 Bowl of Fruit - Click to Select

A dynamic scatterplot uses SVG circles to represent a bowl of fruit that changes over time. Apples and lemons are distinguished by color and size, and clicking a fruit selects it with a black outline. The visualization animates data additions, removals, and type changes using D3’s transition API with a one-second duration. The code imports `scaleOrdinal` and `select` from D3 v5, and initial fruit data is generated with `range` and `Math.random`.

D3 Bowl of Fruit - General Update Pattern

Five circles representing fruit appear in a row, with apples in red and lemons in yellow, using D3 v5's ordinal color and radius scales. The example demonstrates the general update pattern through scripted state changes: removing an apple, changing a type to lemon, adding a lemon, and filtering another apple. Transitions animate the circles' radii from zero on entry and back to zero on exit, with positions based on index, all rendered as SVG elements within a 960 by 500 viewport.

D3 Bowl of Fruit - With Nested Elements

This example demonstrates dynamic data updates with nested SVG elements, rendering apples and lemons in a rounded bowl shape. The visualization uses d3-selection's enter/merge/exit pattern within a custom `fruitBowl` function, updating fruit positions and styles as the data array changes over timed intervals. The code leverages `d3.scaleOrdinal` for color and radius mappings, and binds fruit data to `<g>` groups containing nested `<circle>` and `<text>` elements. The animation cycles through removing, modifying, adding, and filtering fruits to show how joins handle each change.

D3 Face

A smiling face is drawn as a yellow circle with eyes, eyebrows, and a mouth, and the eyebrows perform a repeated up-and-down animation. The SVG is generated using D3 v5, with circles for the face and eyes, rectangles for the eyebrows, and an `arc` path for the mouth. A D3 transition with a 2000-millisecond duration drives the eyebrow movement, translating the group along the y-axis.

D3 World Population Area Chart

This example visualizes world population by year as a smooth filled area chart, with the area rising from zero to peak population and labeled axes for year and population. The SVG rendering uses d3.area with curveBasis for the smoothed path, d3.scaleTime and d3.scaleLinear for the scales, and d3.axisLeft and d3.axisBottom for the tick marks. Population data is loaded via d3.csv from a VizHub-hosted dataset, and the y-axis ticks are formatted to abbreviate billions as "B".

D3 Temp in San Francisco Line Chart

This line chart visualizes daily temperature readings in San Francisco over time. The chart uses a smooth, curved line to connect data points, with labeled axes for time and temperature in Celsius. The visualization is built with D3 v5, using `scaleTime` and `scaleLinear` for the axes, and `curveBasis` for the line’s smoothing. The data is loaded from a CSV file hosted online, with the SVG rendered entirely through D3’s low-level API.

D3 Temp in San Francisco Scatterplot

This scatterplot visualizes temperature readings in San Francisco over time, with each circle positioned along a time-based x-axis and a temperature-based y-axis. The chart includes labeled axes, a title, and a clean gridline structure using D3 v5. The code loads CSV data via `d3.csv`, parses timestamps and numeric temperatures, and renders the SVG using `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft`. Circles are appended with fixed radius, and margins are applied to position the visualization within the 960×500 SVG canvas.

D3 Scatterplot

This scatterplot displays the top 10 most populous countries, with population on the x-axis and country names on the y-axis. It uses D3 v5 with SVG rendering, scaling population values with `d3.scaleLinear` and countries with `d3.scalePoint`. The code applies `d3.axisLeft` and `d3.axisBottom` for gridlines and labels, formats tick numbers with `d3.format`, and loads data from a CSV file. Circles are added via data joins, with styling defined in an external stylesheet.

D3 Bar Chart

This bar chart displays the populations of the top 10 most populous countries, using a horizontal layout with country names on the y-axis and population values on the x-axis. The visualization is built with D3 v5, specifically using `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisLeft`/`axisBottom` for the axes. Data is loaded from a CSV file and multiplied by 1000 to reflect actual population figures. The SVG rendering uses steelblue rectangles, with margins and padding handled through D3’s scale and transform methods.