bprokopowicz

Melting Data for Multiple Lines

This example visualizes population projections for global regions from 1950 to 2100 as multiple smoothed lines, each colored by region via an ordinal color scale and accompanied by a legend. The chart uses d3.scaleTime, d3.scaleLinear, d3.axisLeft, and d3.axisBottom to render axes, while d3.line with d3.curveBasis draws the paths. Data is loaded from CSV files and melted into a tidy format before rendering as SVG.

Apr 6, 2020

Circles on a Map

This visualization displays global population data for 2018 using proportional circles positioned at country centroids on a natural Earth projection. The map uses d3.geoPath and d3.geoCentroid to render countries and place scaled symbols, with d3.scaleSqrt determining circle radii. Hovering reveals country names and population values via SVG titles. Pan and zoom are enabled through d3.zoom, while a d3.scaleSqrt-based legend indicates population magnitudes. Data comes from a CSV file of UN population estimates joined with TopoJSON world geometry, rendered as SVG with color coding for missing values.

Apr 6, 2020

Line Chart with Multiple Lines

A multi-line chart displays a week of temperature readings across multiple cities, with time on the x-axis and temperature on the y-axis. The visualization uses d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal with a category10 color scheme to encode city identity. Lines are generated with d3.line and a basis curve, while a custom color legend component renders SVG circles and text. Data comes from a CSV file loaded via d3.csv, with axes and gridlines produced by d3.axisBottom and d3.axisLeft.

Apr 2, 2020

Scatter Plot with Menus

This interactive scatter plot displays relationships between vehicle attributes from the auto-mpg dataset, with dropdown menus allowing users to select which columns appear on each axis. The visualization uses D3 v5’s selection and data-join patterns, with `scaleLinear`, `axisLeft`, and `axisBottom` for axes. Points animate from the chart center over two seconds using `transition().duration(2000)` with staggered delays. The `dropdownMenu` module implements a general update pattern for the select elements, updating the plot when users change either the x or y column.

Apr 2, 2020

Choropleth Map With Interactive Filtering

A choropleth map of world countries colored by economy, with an interactive color legend that filters the map to highlight countries in a selected category. Clicking a legend entry dims non-matching countries and increases their stroke width; clicking again clears the filter. Built with D3 v5, the visualization uses `d3.geoNaturalEarth1` and `d3.geoPath` to render topojson country features from the world-atlas dataset, with `d3.scaleOrdinal` and `schemeSpectral` for colors.

Apr 1, 2020

Choropleth Map

A choropleth map colors countries by income group using a sequential color scale from `d3.scaleOrdinal` and `d3.schemeSpectral`. The visualization renders with `d3.geoPath` and a natural Earth projection, drawing geographic features from TopoJSON data loaded via `d3.json` and `d3.tsv`. Pan and zoom are enabled through `d3.zoom`, and a custom legend component built with SVG elements displays the color scale. Hovering highlights individual countries, while tooltips show country names and income group values.

Apr 1, 2020

Color and Size Legends

This example demonstrates how to create separate legends for categorical color scales and quantitative size scales in D3.js. A color legend maps fruit names to distinct colors using `d3.scaleOrdinal`, while a size legend uses `d3.scaleSqrt` to show the relationship between numeric values and circle radii. The legends are built from reusable custom components (`colorLegend` and `sizeLegend`) that generate SVG groups with circles and text labels, using the `enter`/`merge` pattern for efficient updates. Ticks for the size scale are generated via `sizeScale.ticks()` and filtered to exclude zero.

Apr 1, 2020

World Countries Hierarchy

This example visualizes the hierarchical relationships between world regions, subregions, and countries using a tree layout. The code employs `d3.hierarchy`, `d3.tree`, and `d3.linkHorizontal` to compute and draw the node links as SVG paths. Text labels are positioned according to tree depth, with font size decreasing for deeper levels, and `d3.zoom` enables panning and zooming. The data structure in `data.json` organizes countries under continents and subregions, rendered with a white text shadow for readability.

Mar 31, 2020

Blank Canvas

This visualization presents a blank, rounded rectangle filling the entire viewport, sized to match the browser window’s dimensions. The example serves as a minimal D3.js canvas setup, demonstrating how to establish an SVG coordinate space that adapts to the screen. Built with D3 v5, the code uses the `select` function to target the SVG element and `append` to add the rectangle shape. The fixed CSS positioning and hidden overflow ensure the canvas remains flush with the viewport edges, creating a pure foundation for subsequent drawing operations.

Mar 31, 2020

Make a Map: Adding Cheap Tricks

This example displays a world map using the Natural Earth projection, with countries rendered as green SVG paths with black borders that turn red on hover. It loads geographic data from the world-atlas package—a TopoJSON file for country boundaries and a TSV file for country names, which are merged into a lookup object. The visualization uses D3’s `geoPath` and `geoNaturalEarth1` to generate the map’s geometry, complemented by a dark blue background sphere. Pan and zoom interactions are enabled through D3’s `zoom` event, which transforms the map group accordingly.

Mar 31, 2020

Make a Map with D3

This example shows global country boundaries using D3’s geoNaturalEarth1 projection, with a dark blue sphere background and green landmasses. It loads world-atlas TopoJSON data, converts it to GeoJSON via topojson.feature, and renders the paths with d3.geoPath and d3.select. The visualization includes commented alternatives for geoMercator, geoOrthographic, geoStereographic, and geoEquirectangular projections, demonstrating how the same code adapts to different map projections.

Bowl of Fruit: Hover to Select

Five apples appear in a row on an SVG canvas, each rendered as a filled circle. Hovering over a fruit highlights it with a black stroke, and moving the mouse away removes the highlight. The example uses d3-selection’s data join and transitions to animate the circles’ entry, exit, and size changes as apples are eaten or replaced by a lemon. A color scale maps fruit types to red or yellow, while a radius scale distinguishes apple and lemon sizes.

Bowl of Fruit: Click to Select

A bowl of fruit demonstrates click-to-select interactions with animated enter, update, and exit transitions. Five apples render as scaled SVG circles via a custom `fruitBowl` module, which uses `scaleOrdinal` for color and radius mappings. Clicking a fruit triggers an `onClick` handler that updates a `selectedFruit` identifier, applying a black stroke highlight. Timed updates replace an apple with a lemon, remove fruits, and re-render using `transition().duration(1000)` with `merge` and `remove` on circle selections.

Bowl of Fruit: Object Constancy

Five apples appear in a row, then fade and slide in response to timed data updates that remove fruits or change an apple into a lemon, preserving each circle’s identity via a stable `id` key. The example demonstrates D3’s object constancy pattern by using `selection.data` with a key function, `enter`, `merge`, and `exit` selections, plus chained `transition` calls to animate radius and x-position over one second. Rendering uses SVG circles with d3-color scales for fill and size.

Bowl of Fruit: Nested Elements with Transitions

Five apples enter a bowl as circles with a smooth transition, then shrink and disappear as the fruit is eaten, while one apple turns into a lemon and changes color and size. The d3.v5 code uses a data join with enter, update, and exit selections, nesting circles and text inside groups. Transitions animate radius changes, and exit transitions shrink circles before removal, with scaleOrdinal mapping fruit types to colors and radii.

Bowl of Fruit: Transitions

A bowl of apples transitions through eat-and-replace actions: apples shrink and vanish, one apple morphs into a lemon, and the layout shifts. D3 v5 selections with `enter`, `merge`, and `exit` handle the data joins, while `transition().duration(1000)` animates radius and fill changes. An ordinal color scale and radius scale map fruit types to red/yellow and 50/30 pixels, rendered as SVG circles.

Bowl of Fruit: General Update Pattern

This example demonstrates the general update pattern for D3 selections, showing how a static bowl of five apples transitions as fruits are removed and one apple changes into a lemon. It uses D3 v5’s selection methods, including `enter()`, `merge()`, and `exit()`, to append, update, and delete SVG circle elements based on the changing `fruits` array. The fruit’s color and radius are mapped through `scaleOrdinal` with domains for apple and lemon, while the data is generated and mutated over timed `setTimeout` intervals in the main script.

Bowl of Fruit: Nested Elements

A nested selection pattern animates a bowl of fruit as apples are eaten and replaced by lemons. D3’s `scaleOrdinal` maps fruit types to circle radii and fill colors, while data joins with `merge` update group transforms and child circle and text elements. The example uses `d3.select`, `range`, and SVG rendering to show enter, update, and exit behavior.

World Population Area Chart

This area chart visualizes world population growth over time, with the x-axis mapping years and the y-axis mapping population counts. The chart uses a maroon filled area to represent the data, overlaid with grid lines and labeled axes for clarity. Built with D3 v5, the code loads data from a CSV file, parses the year as a date and population as a number, then renders the chart using scalable vector graphics. It employs D3's area generator with a basis curve for smoothing, along with time and linear scales, and axis components to create the final visualization.

A Week in San Francisco Area Chart

This area chart displays San Francisco temperatures over a week, using a smooth curved path to fill the space between the time axis and temperature values. The visualization includes labeled x and y axes with grid lines, and a title, rendered as SVG elements. Built with D3 v5, it uses `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and an `area` generator with `curveBasis` to create the shape. Data is loaded from a CSV file containing timestamps and temperature readings, with margins and tick styling configured via CSS.

A Week in San Francisco Line Chart

This line chart visualizes San Francisco temperatures over a week, plotting temperature against time with a smooth curved line. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `line`, and `curveBasis` to generate the SVG path, while `axisBottom` and `axisLeft` add labeled axes with gridlines. Data is loaded from a CSV file via `d3.csv`, with timestamps parsed as `Date` objects and temperatures as numbers. The chart includes a title, axis labels, and styled ticks and lines defined in external CSS.

A Week in San Francisco Scatter Plot

A week of hourly San Francisco temperature readings appears as red dots on a scatter plot, with time on the x-axis and temperature on the y-axis. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to render an SVG chart with grid lines and axis labels. Data is loaded from a CSV via `d3.csv`, with timestamps parsed as `Date` objects and temperatures converted to numbers. Circle elements are positioned using the scales to show temperature fluctuations across the week.

Scatter Plot Take 2

This scatter plot displays the relationship between horsepower and weight for cars from the auto-mpg dataset. The visualization uses D3 v5's `select`, `csv`, `scaleLinear`, and `extent` functions to load and scale the data, while `axisBottom` and `axisLeft` render gridlines and labels. Circles are positioned using the scaled x and y values, with styling applied via SVG and CSS. The plot demonstrates a quantitative comparison, showing how these two attributes correlate across the dataset's vehicles.

Scatter Plot Take 1

This scatter plot visualizes the top 10 most populous countries, derived from a CSV file in thousands. It displays each country along the y-axis against its population on the x-axis, using D3 v5 APIs including `select`, `csv`, `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft`. The SVG chart is rendered with circles, a titled graph, and labeled axes, using a formatting function to display population values in abbreviated units.

Customizing Axes

This example demonstrates how to customize axes in a bar chart using D3 v5, displaying the top ten most populous countries with population values along the x-axis and country names along the y-axis. The chart uses linear and band scales, with axis tick labels formatted to show millions as “B” and gridlines extending across the plot area. Data is loaded from a CSV file, and the SVG rendering removes default axis domains while adding custom labels and styling.

Animal Popularity Chart

This example displays a horizontal bar chart showing the popularity of five animals, as recorded in a local CSV file. The visualization uses D3 v5's `csv` method to load the data, `scaleLinear` for the x-axis representing popularity counts, and `scaleBand` for the categorical y-axis listing animal names. Rendered as SVG rectangles with a steelblue fill, the chart includes axes generated via `axisLeft` and `axisBottom`, with margins applied to position the plotting area within a 960×500 viewport.

Mar 25, 2020

SVG Population Chart

This bar chart displays the population of ten countries, with horizontal bars ordered by country name along the y-axis and population values on the x-axis. It is built using the D3.js library (v5) and renders directly to an SVG element. The code employs `scaleLinear` for the quantitative population axis and `scaleBand` for the ordinal country categories, with axes generated via `axisLeft` and `axisBottom`. Data is loaded from an external `data.csv` file using D3's `csv` function, and the population values are converted to numbers before the chart is drawn.

Mar 25, 2020