evapavlinek

Choropleth Map with Interactive Filtering

A choropleth map colors countries by economic category using a spectral color scale, with an interactive legend that filters the map by clicking a category to highlight it. The map loads world geometry from TopoJSON and country metadata from TSV. Built with D3 v5, it uses `d3.geoPath` with a Natural Earth projection, `d3.zoom` for panning, and SVG for rendering. Clicking a legend item toggles selection, dimming non-matching countries and emphasizing the chosen group.

Apr 10, 2020

Choropleth Map

This choropleth map visualizes global economic classifications by coloring each country according to its income group. Built with D3 v5 and TopoJSON, it uses an ordinal color scale with the spectral scheme and renders geographic shapes via `d3.geoPath` with a natural Earth projection. The map supports pan and zoom through D3’s zoom behavior, and hovering highlights countries in red. A custom legend, generated with appended SVG circles and text, displays the color categories, while data is loaded from the World Atlas TopoJSON and TSV files.

Apr 9, 2020

Colour and size legends

This example demonstrates two custom SVG legends built with D3 v5 and React, rendered on a single 960x500 pixel canvas. The color legend uses `scaleOrdinal` to map fruit categories to distinct hues, while the size legend employs `scaleSqrt` to encode numeric tick values as proportional circle radii. Both legends are generated through reusable functions that manipulate SVG groups, circles, and text elements, with spacing controlled via `transform` translations and dynamic text offsets. The visualization illustrates how to compose and position independent legend components side by side within a single SVG container.

Apr 9, 2020

World countries tree

This visualization displays the hierarchical structure of world countries, organized by continent and subregion, as an interactive tree diagram. Using D3.js v5 with a React framework, it renders SVG elements with the `tree` layout and `linkHorizontal` generator to create branching paths. The code loads hierarchical JSON data and supports pan-and-zoom interactions via `d3.zoom`, with text labels sized proportionally to depth within the hierarchy.

Black canvas

A full-screen black rectangle with rounded corners fills the browser viewport, rendered as an SVG element. The visualization demonstrates how to set up a minimal D3.js v5 environment within a React framework, using `d3.select` to target the SVG and dynamically sizing it to the document body’s client height and width. The code appends a single `rect` with a 40-pixel corner radius, showcasing basic SVG attribute manipulation without data or interaction. The stylesheet locks the body’s position to prevent scrolling, ensuring the canvas remains fixed.

Interactive world map

This interactive world map displays country boundaries with hover highlighting and zoom/pan capabilities. Built with React and D3 v5, the visualization uses `d3.geoNaturalEarth1` for projection and `d3.geoPath` to render SVG paths from TopoJSON data in the world-atlas package. A zoom behavior enables interactive transformations, while country names from a TSV file appear as tooltips via SVG `title` elements. The map fills countries in green and the ocean sphere in blue, with hover states turning countries red.

World map

A world map rendered with SVG paths displays countries in green on a blue background, using the Mercator projection. The code loads TopoJSON world-atlas data via `d3.json` and converts it to GeoJSON with `topojson.feature`. D3’s `geoMercator` and `geoPath` generate the country outlines, which are appended as `<path>` elements with a semi-transparent black stroke.

Hover to select

This example demonstrates a data visualization of fruits as colored circles, highlighting how to use hover interactions to select a fruit. The visualization is built with React, using D3’s `scaleOrdinal` for color and radius mapping, and SVG animation. When the user hovers over a circle, the `setSelectedFruit` function updates the selected fruit, adding a black stroke; mouseout clears the selection. The code also shows adding, removing, and updating fruit data with transitioned animations.

Click to select

Five circles render in an SVG, each representing a fruit. Clicking a circle selects it, applying a black stroke. The visualization uses D3 v5 within a React framework to animate circle radii and colors based on fruit type ("apple" or "lemon") via ordinal scales. The fruitBowl function manages enter, update, and exit transitions, animating radius changes with `transition().duration(1000)`.

General update pattern

This example demonstrates the general update pattern for animated transitions in D3.js visualizations. A fruit bowl graphic shows a row of apples and lemons as colored circles, with changes occurring over time as fruits are removed, replaced, and filtered from the dataset. The implementation uses D3 v5’s selection merging and exit/enter methods within a React framework, rendered as SVG elements. The `fruitBowl` function applies ordinal color and radius scales to map fruit types to visual properties, while the main script manipulates the fruit array with setTimeout calls to trigger the update pattern.

General update pattern

The example demonstrates the D3 general update pattern, animating a row of fruit circles as apples are added, removed, and replaced with lemons over time. It uses d3.select and d3.range to manage data, and the fruitBowl module applies enter, merge, and exit selections with transition.attr to animate circle radius and fill color. Rendering occurs in SVG via a React-free vanilla JavaScript setup, with d3.scaleOrdinal mapping fruit types to colors and sizes. The data consists of a mutable array of fruit objects, each with a random id for keying.

World population area chart

This area chart visualizes global population growth from 1960 to 2015, using a smooth curve to fill the space between the baseline and the population values over time. The chart is rendered as an SVG with D3 v5, employing `scaleTime` and `scaleLinear` for the axes, `axisBottom` and `axisLeft` for tick marks, and an `area` generator with `curveBasis` for the smoothed path. Data comes from a CSV file loaded via `csv`, with the y-axis formatted to abbreviate billions.

Temperature in SF

This visualization displays temperature measurements in San Francisco over time, using a filled area chart to emphasize the range and variation of values across the timeline. The data, loaded via `d3.csv` from a remote dataset, is mapped with `d3.scaleTime` for the x-axis and `d3.scaleLinear` for the y-axis. The area path is generated with `d3.area` and a basis curve, while `d3.axisBottom` and `d3.axisLeft` provide labeled axes with grid lines. The SVG rendering and styling are handled through D3 v5 selections and custom CSS.

Temperature in SF

This visualization displays temperature readings over time in San Francisco, with time on the x-axis and temperature on the y-axis. The line chart uses a smooth curve to show trends across the dataset. The code imports specific D3 v5 modules through ES6 imports, including `scaleTime`, `scaleLinear`, `line`, and `curveBasis` for the path smoothing. It loads CSV data from a remote URL, parses the temperature as numbers and timestamps as dates, then renders SVG axes with grid lines and a styled title.

Cars scatter plot

This scatter plot shows the relationship between fuel efficiency (mpg) and horsepower for a dataset of automobiles, with each car represented as a semi-transparent green circle. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes and gridlines, while the data is loaded from a remote CSV using `d3.csv`. The chart includes labeled axes, a title, and margins calculated from the SVG’s dimensions, rendering all elements as SVG shapes.

Scatter plot

This scatter plot displays the population of ten countries, with each circle positioned along a logarithmic scale for population and an ordinal scale for country name. The visualization uses D3 v5 to implement the chart, employing `scaleLinear` and `scalePoint` for the axes, while `axisBottom` and `axisLeft` render the gridlines. The code loads data from `data.csv` via D3’s `csv` function and renders using SVG, with the title and axis labels added as text elements.

Customising axes

A horizontal bar chart displays population data for ten countries, with custom tick formatting abbreviating numbers by converting "G" to "B" for billions. The example uses d3.csv to load data, d3.scaleBand and d3.scaleLinear for scales, and d3.axisBottom with d3.axisLeft for axes. Custom styling removes default domain lines and adds a centered axis label and title, while tick lines extend across the chart using d3.axisBottom’s tickSize.

Bar chart

This bar chart displays population estimates for the ten most populous countries, with horizontal bars sorted by descending population. The visualization uses D3 v5’s `scaleLinear` for the x-axis and `scaleBand` for the categorical y-axis, rendering SVG rectangles. Data is loaded from a CSV file via `d3.csv` and scaled by a factor of 1,000. Axes are generated with `axisLeft` and `axisBottom`, while margins and an SVG group transform position the chart within the 960×500 viewport.

Let's make a face!

This example animates a simple cartoon face built from SVG shapes, with eyes, eyebrows, and a mouth arranged symmetrically. The face is constructed using D3 selections to append a circle for the head, circles for eyes, rectangles for eyebrows, and a path generated by the `arc` function for the mouth. The eyebrows independently animate upward and back down over two seconds using chained `transition` calls with `duration(2000)`. All elements are positioned relative to the viewport’s center via a transform on a group element.

Apr 6, 2020