Michał Szumnarski

Treemap from bl.ocks.org

This treemap shows the hierarchical structure of the Flare data set, with nested rectangles sized by either data value or leaf count. Rectangles are colored by parent category and labeled with truncated names. The visualization transitions between the two sizing modes over 750 milliseconds after a two-second delay, using the `d3.treemap` layout with a resquarify tiling function. The implementation uses D3.js v4 to render SVG elements, with text clipping via `clipPath` and an ordinal color scale based on `d3.schemeCategory20`.

Aug 17, 2019

World Countries Tree

This visualization displays the hierarchical structure of world countries organized by continent and subregion, using a horizontal tree layout rendered as SVG. The code employs D3 v5's `tree()` and `hierarchy()` functions to compute node positions and draws curved links with `linkHorizontal()`. Static labels are placed at each node, and the data comes from a local `data.json` file containing the nested geographic classification.

Aug 17, 2019

Choropleth Map

A choropleth map colors countries by economic classification using an ordinal color scale derived from d3.schemeSpectral. The visualization applies the d3.geoNaturalEarth1 projection and renders GeoJSON paths via d3.geoPath, with topology loaded from a world-atlas TopoJSON file and country names merged from a TSV lookup. Hovering highlights individual countries in coral, and d3.zoom enables interactive panning and scaling. A custom color legend displays the seven economy categories with labeled circles.

Aug 15, 2019

Let's make a map with D3.js!

This example displays a world map rendered as SVG paths, with countries filled in light green against a dark blue sphere background. It loads geographic data from the world-atlas TopoJSON dataset and converts it to GeoJSON using the `feature` function from topojson. The map projects coordinates with `geoNaturalEarth1` and draws each country boundary via `d3.geoPath`, while a separate path renders the globe’s outline. The visualization demonstrates basic choropleth-style mapping using D3 v5’s geo modules.

Aug 13, 2019

Choropleth Map

Aug 13, 2019

Let's make a map with D3.js!

Aug 12, 2019

Religions of Largest 20 Countries

A stacked bar chart displays the estimated 2010 religion breakdown of the 20 most populous countries, using data from Pew Research. The chart uses D3.js version 3.5.5 with `d3.layout.stack`, `d3.scale.ordinal`, and `d3.svg.axis`. Hovering over bars reveals tooltips via the `d3-tip` library, while hovering over the legend (built with `d3-legend`) highlights corresponding religions by rendering a foreground layer of bars. The visualization is rendered as an SVG with animated transitions.

Aug 12, 2019

Cars Scatter Plot

This scatter plot displays the relationship between horsepower and weight for a dataset of cars, with each point representing an individual vehicle. The visualization uses D3 v5 to load CSV data and render an SVG with linear scales, axes, and semi-transparent red circles. It applies `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.extent` to map values, while axis labels and a title are added via SVG text elements. The chart employs a clean grid layout with margins and tick styling from the accompanying stylesheet.

Choropleth Map with Interactive Filtering

A world choropleth map colors countries by their economy category, with an interactive color legend that filters which countries remain highlighted. Built with D3 v5, it uses `geoNaturalEarth1` projection with `geoPath` for geographic rendering, `zoom` for panning and scaling, and a `scaleOrdinal` with a spectral scheme for categorical colors. Data comes from TopoJSON world-atlas files merged with TSV metadata, and clicking a legend tick dims all non-matching countries.

Choropleth Map with Interactive Filtering

This choropleth map displays world countries colored by economic classification, with an interactive legend that filters the map to highlight selected categories while dimming others. Users can click legend items to toggle filtering, and the map supports zooming and panning via d3.zoom with geographic projection using d3.geoNaturalEarth1 and d3.geoPath. Data combines TopoJSON world geometry with TSV metadata, rendered as SVG paths with d3.v5.

Choropleth Map with Interactive Filtering

This choropleth map visualizes the world's economies, coloring each country according to its economic classification. Users can zoom and pan the map via `d3.zoom`, while the color legend offers an interactive click handler, though its filtering effect is not implemented. The visualization loads geographic data from the world-atlas TopoJSON and TSV files, using `d3.geoPath` with a `geoNaturalEarth1` projection to render countries as SVG paths. A spectral color scale maps economy categories to hues, and hovering highlights a country in coral.

Choropleth Map

Color and Size Legends

This example demonstrates two reusable legend components rendered as SVG: a color legend for ordinal scales and a size legend for quantitative scales. The color legend displays fruit categories (apple, lemon, lime, orange) as colored circles, while the size legend uses a square-root scale to map numeric values to circle radii. Both legends are built with D3 v5, using `scaleOrdinal` and `scaleSqrt`, with custom functions that handle enter/merge/exit selections. The code imports `select` from D3 and renders the legends via the `call` method.

Cheap Tricks with Interactions!

This example displays an interactive map of world countries on a natural Earth projection, rendered with SVG paths. Users can pan and zoom the map via the d3.zoom API, while hovering over a country highlights it in coral using CSS. The visualization loads GeoJSON from a TopoJSON world dataset and merges it with country names from a TSV file. It uses d3.geoPath to generate the map shapes and a D3 zoom behavior to apply transforms to the map group.

Aug 5, 2019

Bowl of Fruit - General Update Pattern

This example demonstrates D3’s general update pattern for binding data to SVG circles, showing how entering, updating, and exiting elements transition smoothly as fruit data changes over time. A bowl of apples shrinks as fruits are removed, one apple changes into a lemon, and another apple is filtered out, with each state change animated via `transition().duration()`. The code uses `scaleOrdinal` for color and radius mappings, `selection.data()` with a key function on fruit IDs, and explicit `.enter()`, `.merge()`, and `.exit()` chains to manage the circle lifecycle. Rendering targets SVG, driven by `d3.select` and `range` in a vanilla JavaScript setup.

Aug 5, 2019

World Countries Tree Diagram

This tree diagram displays the hierarchical structure of world countries, organized by continent (Asia, Africa, etc.) and region (Southern Asia, Western Asia, etc.), down to individual country names. The visualization uses a horizontal tree layout generated by the d3.tree algorithm, with nodes positioned and links drawn via d3.hierarchy and linkHorizontal. The SVG-based rendering places text labels directly on nodes, whose font size decreases with depth. The diagram includes zoom functionality via the d3.zoom API and loads its data from a JSON file.

Art Tree

A hierarchical tree layout of world regions and countries, arranged as a horizontal dendrogram with brown links branching from a root node labeled "World." The visualization uses D3 v5's `tree` and `hierarchy` functions to compute node positions, and a `linkHorizontal` path generator to draw the connecting curved edges. Data comes from a local `data.json` file containing nested geographic groupings, rendered as SVG paths that span the full browser viewport.

Blank Canvas

A full-screen SVG rectangle stretches to the browser window’s dimensions, its corners rounded by an rx attribute. The canvas remains otherwise blank, an empty visual field defined solely by the viewport’s width and height. Built with the v5 version of D3, the code uses `select` to target the SVG element and `attr` to set its size and the rectangle’s rounded geometry. No data is loaded, and no interaction or animation occurs, leaving the example as a minimalist exploration of spatial boundaries.

Let's make a face with D33.js!

A cheerful yellow face is drawn in the center of the screen with black outlines, featuring two eyes, animated eyebrows that move up and down in a two-second cycle, and a smile created using an arc path. The visualization is built with D3 v5, using SVG elements such as circles, rectangles, and a path generated by the `arc()` function. All shapes are appended to a central group, with a smooth eyebrow animation driven by chained `transition().duration()` calls. No external data is loaded; the face is constructed entirely from hardcoded geometric parameters.

Bowl of Fruit - Hover to Select

Five apples appear in a row on a neutral background. Hovering over a fruit highlights it with a black outline and turns it green, while moving the mouse away removes the selection. The visualization uses D3 v5 data joins and ordinal scales to map fruit types to radii and colors, and transitions animate the entry, exit, and attribute changes. Apples are removed, one is transformed into a lemon, and the selection state is managed by a callback that triggers re-renders.

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows demonstrates fundamental DOM manipulation with D3.js. The face is constructed by appending SVG shapes including circles for the eyes, rectangles for the eyebrows, and an arc path for the mouth, all centered using a group transform. D3 transitions move the eyebrow group up and down over two-second intervals, while the `d3.arc` helper generates the mouth's curved path. The example uses d3.select and d3.arc from the D3 v5 library, with static SVG rendering and CSS to hide page overflow.

Bowl of Fruit - Click to Select

Five fruit circles appear in a row, and clicking one selects it with a thick black stroke. Over time, apples are removed, and one apple transforms into a lemon with a yellow color and smaller radius. The example uses D3 v5’s data join with a `key` function and `transition` methods to animate enter, update, and exit states. It also uses `scaleOrdinal` for color and radius mappings and SVG circles for rendering.

Bowl of Fruit - General Update Pattern

This example demonstrates the D3 general update pattern using animated transitions to manage changes in a dataset of fruit items. It shows how enter, update, and exit selections behave as apples are removed and one apple transforms into a lemon. The code uses d3.scaleOrdinal for color and radius mapping based on fruit type, and applies transition().duration() to animate circle radius and position changes. The update flow is driven by JavaScript setTimeout calls that modify the fruits array and trigger re-rendering of the SVG circles.

Let'

A yellow SVG face with black-outlined features animates its eyebrows, moving them up and then back down over four seconds. The face is constructed from a circle, two eye circles, two eyebrow rectangles, and a mouth arc, all centered within a 960 by 500 canvas. The animation uses chained d3.transition calls with a two-second duration to shift the eyebrow group's transform. The code leverages d3.select, d3.arc, and SVG attributes to build the static and moving components.

Aug 1, 2019

World Population by Year 2015

This visualization displays global population growth from 1960 to 2015, using an area chart with a smoothed basis curve to show population values in billions over time. The D3 v5 code loads CSV data, scales the x-axis with `scaleTime` and the y-axis with `scaleLinear`, and renders an SVG path via the `area` generator. Axis labels and gridlines are added using `axisBottom` and `axisLeft`, with population values formatted using D3’s `format` function.

Aug 1, 2019

Temperature in San Francisco Area Chart

This example visualizes a week of temperature data for San Francisco as a smooth area chart, combining a maroon filled region with a matching stroke line to show the trend over time. The chart includes labeled axes for time and temperature, with gridlines and a clear title. It is built with D3 v5, using `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and the `area` generator with a basis curve for smoothing. Data is loaded from a CSV file via `csv` and rendered as an SVG, with the timestamp parsed into a JavaScript `Date` object.

Jul 15, 2019

Temperature in San Francisco Line Chart

This example visualizes a week of temperature readings in San Francisco as a smooth, curving line chart, with the title “A Week in San Francisco.” The visualization uses d3.csv to load the data and d3.scaleTime and d3.scaleLinear to map timestamps and temperatures to positions. Axes are rendered with d3.axisBottom and d3.axisLeft, including grid lines and rotated labels, while the line itself is drawn as an SVG path using d3.line with a curveBasis interpolation. The chart is styled with custom CSS, including a maroon stroke for the line and large tick labels.

Jul 15, 2019

Temperature in San Francisco

This example shows a week of temperature readings in San Francisco, plotting each observation as a red semi-transparent circle on a scatterplot with time on the x-axis and temperature on the y-axis. The visualization uses d3.csv to load the data, d3.scaleTime and d3.scaleLinear for scaling, and d3.axisBottom with d3.axisLeft to render gridlines and tick marks. SVG circles are appended to the chart, with a title and rotated axis labels, all styled via external CSS.

Jul 15, 2019

Scatter Plot

A scatter plot displays the population of the top ten most populous countries, with countries on the y-axis and population values on the x-axis, rendered as steelblue SVG circles with axis labels and gridlines. The code loads data from a CSV file using d3.csv, scales the x-axis with d3.scaleLinear and the y-axis with d3.scalePoint, and generates axes via d3.axisBottom and d3.axisLeft with custom tick formatting. Population values are multiplied by 1,000 during data preprocessing before being plotted.

Customizing Axes

This bar chart displays the populations of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. It shows how D3 axes can be customized, including formatted tick labels that convert large numbers to abbreviated units and the removal of default axis lines. The chart uses d3.scaleLinear for the x-axis, d3.scaleBand for the y-axis, and d3.axisBottom and d3.axisLeft for rendering. Data is loaded from a CSV file and rendered as SVG rectangles with steelblue fill.

Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the World Population Prospects 2017. The visualization uses an SVG rendering with D3 v5, employing `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis, along with `d3.axisLeft` and `d3.axisBottom` to render the axes. Data is loaded from a CSV file using `d3.csv` and displayed as steel-blue rectangles.

Making a Bar Chart

Uploading data

A smiling face composed of SVG shapes is displayed, and its eyebrows animate up and down in a repeating cycle. The animation is created with D3.js version 5, using chained `transition()` calls to alternate the eyebrows’ vertical position over 2000-millisecond intervals. The face itself is constructed from basic SVG elements: circles for the eyes, rectangles for the eyebrows, and a path for the mouth, generated with the `d3.arc` helper. The code also demonstrates asynchronous data loading by attempting to fetch a CSV file via `d3.csv`, though the loaded data is only logged to the console and not visualized.

Let's make a face with D3.js

This example uses D3.js v5 to construct a smiling face from basic SVG shapes. A yellow circle forms the head, while two smaller circles become the eyes. The code animates the eyebrows using chained `transition().duration()` calls, moving them up and then back down over two seconds. A mouth is drawn using the `arc()` generator from D3’s shape utilities, creating a curved path. All elements are positioned relative to the SVG center using a `g` transform, and the entire composition is rendered as static SVG with animated attributes.

Shapes with SVG

This example demonstrates basic SVG shape rendering within a webpage, displaying circles, rectangles, lines, and a path. The shapes are organized in groups with transforms for scaling and translation, and styled via inline attributes and a CSS class. The visualization uses the SVG API directly within an HTML document, alongside D3.js’s `select` function for setting text content. Data is sourced from the static HTML and JavaScript files, with styling applied through an external stylesheet.

Cars report

This example displays the make of the first car in a small dataset, rendered as large text on a dark, centered page. The code parses an embedded JSON array of car objects using `JSON.parse` and retrieves the first entry’s `make` property. It then updates the text content of an HTML element via `document.getElementById`, applying styling from an external Ubuntu font and a blue background through CSS. The visualization is minimal, highlighting a single data point without charts or interactive elements.