Skip to main content
Log in
E

EdoardoRegini

@EdoardoRegini·20 public vizzes

Loading thumbnail…

Choropleth Map

A choropleth map of countries colored by economic classification from world-atlas data, with a categorical color legend that filters the map on click. The visualization uses D3 v5 APIs including `geoNaturalEarth1`, `geoPath`, and `scaleOrdinal` with a spectral color scheme, rendering as SVG with interactive zoom and hover highlighting.

Apr 14, 2020
Loading thumbnail…

Color and Size Legend

Two reusable D3 legends demonstrate how to encode data through color and size. The color legend uses `d3.scaleOrdinal` to map fruit names to categorical colors, while the size legend uses `d3.scaleSqrt` to map numeric values to circle radii. Both legends are implemented as custom D3 functions that append SVG circles and text elements, using `.merge()` for efficient updates and `.exit().remove()` for cleanup. The rendering is entirely SVG-based within a single `<svg>` element, styled with CSS classes.

Apr 13, 2020
Loading thumbnail…

World Countries Tree

This visualization displays a hierarchical tree of world countries, organized by continent and subregion, with each node labeled. It uses a d3.tree layout to compute the tree structure and d3.linkHorizontal for the curved connecting paths, with text labels sized by depth level. The interactive view supports zooming and panning through d3.zoom. The data, sourced from data.json, inherits a hierarchical country classification, and the SVG rendering applies a teal stroke for links and a serif font with text shadows for readability.

Apr 12, 2020
Loading thumbnail…

Black Canvas

A black rectangle fills the entire browser viewport. The example is a minimal demonstration of a full-screen SVG canvas. The code sets the SVG's `width` and `height` attributes to the dimensions of the document's client area, then appends a single `rect` element with a rounded corner radius of 40 pixels. It relies on D3 v5's `select` function to fetch the SVG element and chain attribute modifications, resulting in a clean, static visual that highlights the root SVG element on a fixed, overflow-hidden body.

Apr 12, 2020
Loading thumbnail…

Cheap Tricks for Interaction

This example visualizes a world map using a natural Earth projection, where each country is rendered as a light green SVG path with a black stroke. Hovering over a country changes its fill color to red, and a tooltip displays the country name loaded from a TSV data file. The visualization uses `d3.geoPath` and `d3.geoNaturalEarth1` for map projection, `topojson.feature` for geographic data conversion, and `d3.zoom` with an event transform to enable interactive pan and zoom. The map data comes from the world-atlas package, with the sphere filled in dark blue.

Apr 9, 2020
Loading thumbnail…

Let's make a map with D3.js!

A D3.js visualization renders a world map using a natural Earth projection, coloring countries light green against a dark blue ocean sphere. The example demonstrates geographic data mapping by fetching TopoJSON country boundaries from the world-atlas dataset and converting them to GeoJSON with topojson.feature. SVG paths are generated with d3.geoPath and the geoNaturalEarth1 projection, with each country receiving stroke styling to show borders. The code imports select, json, and geoPath from d3.v5, showcasing a minimal, single-file approach to interactive map creation.

Apr 9, 2020
Loading thumbnail…

Bowl of Fruit - Hover to select

Five fruit circles, initially apples, animate into a bowl formation. Hovering over a circle selects it, drawing a black outline, while the selection state and data updates are logged. The visualization uses d3.js v5 with ordinal scales for color and radius, and employs transition-based enter, update, and exit animations for data changes. It demonstrates dynamic data manipulation by removing fruits and changing an apple to a lemon.

Apr 8, 2020
Loading thumbnail…

Bowl of Fruit - Click to select

Five fruit circles, apples and lemons, render in a row as an SVG visualization. Clicking a fruit selects it and gives it a black outline. The example demonstrates data joins with `selection.data`, enter/exit transitions using `transition.attr`, and an ordinal color scale from `d3.scaleOrdinal`. Fruits are dynamically removed or changed in type over time, with animated resizing and repositioning for visual feedback.

Apr 8, 2020
Loading thumbnail…

Bowl of Fruit - General update pattern

A bowl of fruit demonstrates the D3 general update pattern, showing how SVG groups representing apples and lemons enter, update, and exit as the data changes over time. An apple is removed, another is replaced with a lemon, and a third is filtered out through timed intervals. The code uses d3.scaleOrdinal for color and radius mappings, d3.select and data joins with .enter(), .merge(), and .exit() to manage elements. SVG circles and text labels render within groups, positioned with transform attributes based on array index and a fixed bowl rectangle.

Apr 8, 2020
Loading thumbnail…

Bowl of Fruit - General update pattern

Five apples enter an SVG bowl. D3's general update pattern joins circles to `fruits` data, using `selectAll`, `enter`, `merge`, and `exit`. Initial circles have zero radius, then a 1000ms `transition` animates them to their target positions and sizes. A timed script pops apples, swaps one for a lemon (changing its color via `scaleOrdinal` and radius), and filters out another, demonstrating enter, update, and exit transitions.

Apr 7, 2020
Loading thumbnail…

World Population Area Chart

This visualization displays the growth of world population over time, using an area chart to emphasize the magnitude of the increase. The chart is rendered as a single filled path with a smooth basis curve, created using D3 version 5's `area` and `curveBasis` functions. The code loads CSV data from a remote source, parses the year as a date object, and scales the population values linearly. Axis ticks and labels are generated with `axisLeft` and `axisBottom`, with gridlines drawn across the plot area.

Apr 5, 2020
Loading thumbnail…

Temperature in San Francisco Area Chart

This area chart visualizes temperature readings in San Francisco over a week, using a smooth curved path to fill the space between the time axis and the temperature values. The chart renders in SVG, with axes, gridlines, and labels styled via CSS. The code relies on D3 v5 functions including `scaleTime`, `scaleLinear`, `area`, `curveBasis`, `axisBottom`, and `axisLeft` to process CSV data containing timestamps and temperatures, mapping them to the visual encoding.

Apr 3, 2020
Loading thumbnail…

Temperature in San Francisco Line Chart

This visualization shows a week of temperature readings in San Francisco, plotting temperature over time with a smooth blue line rendered as an SVG path. The chart uses D3 v5’s `scaleTime` and `scaleLinear` to map timestamps and temperature values, while `line` with `curveBasis` creates the curved interpolation. Axes are drawn with `axisBottom` and `axisLeft`, including gridlines and rotated axis labels. Data comes from a remote CSV file containing temperature and timestamp columns.

Apr 3, 2020
Loading thumbnail…

Temperature in San Francisco Scatter Plot

This scatter plot visualizes a week of temperature readings in San Francisco over time, with each circle representing a temperature measurement. The visualization uses D3 v5 to load CSV data, scales time and temperature values linearly, and renders the scatter plot as SVG circles with semi-transparent steelblue fill. Axes are generated using `axisBottom` and `axisLeft` with grid lines, while axis labels and a title are added as SVG text elements. The x-axis represents time, the y-axis represents temperature, and the data is sourced from a remote CSV file hosted on vizhub.com.

Apr 3, 2020
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for a dataset of cars from 1970, sourced from auto-mpg.csv. Each circle represents a car, with its position determined by the car’s horsepower on the x-axis and weight on the y-axis, using D3’s `scaleLinear` for both axes. The visualization is rendered as SVG within a 1000x500 canvas, with axes and labels created via `axisBottom` and `axisLeft`. Data is loaded asynchronously using D3’s `csv` function, and values are converted to numbers before plotting. Styling is applied via CSS, giving circles a semi-transparent steelblue fill.

Apr 3, 2020
Loading thumbnail…

Scatter Plot

A scatter plot visualizes the populations of the ten most populous countries. It displays each country as a circle on a linear scale for population, with the country names on the y-axis. Built with d3.v5, the chart uses `svg`, `select`, `csv`, `scaleLinear`, and `scalePoint`. It reads data from a local CSV file, renders as SVG, and includes axes with formatted tick labels.

Apr 3, 2020
Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, with countries on the y-axis and population on the x-axis. It uses D3.js v5’s `scaleLinear` and `scaleBand` to map the data, and customizes the axes with `axisLeft` and `axisBottom`, including formatted tick labels that convert billions to a readable format. The visualization is rendered as SVG, with the data loaded from a CSV file.

Apr 1, 2020
Loading thumbnail…

Making a Bar Chart

This example displays a horizontal bar chart of population data for ten countries, ordered by descending population size. The visualization uses D3 v5 with an SVG rendering approach, employing `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisLeft` and `axisBottom` for the axes. Data is loaded asynchronously from a CSV file using `csv`, then parsed and mapped to rectangular bars whose widths are proportional to each country’s population.

Mar 27, 2020
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how SVG shapes can be styled and transformed using raw SVG attributes and CSS rules. It shows circles, rectangles, lines, and a path, with some shapes inheriting fill and stroke properties from parent groups, while others are explicitly overridden. The code uses inline SVG elements such as `circle`, `rect`, `line`, and `path`, along with CSS classes like `.lines` to define stroke styles. SVG transform attributes (`scale`, `translate`) group and position the shapes, and no external JavaScript libraries are used.

Mar 25, 2020
Loading thumbnail…

HTML Car Report

This example shows a simple HTML car report, listing three used vehicles with their prices. The page uses plain HTML with a linked stylesheet, `styles.css`, to present the data in a monospace font at 2em, with the first car, a 2012 Nissan Leaf, highlighted in red using the `.highlighted` class. No JavaScript libraries or data-visualization APIs are involved; the visualization is entirely static, relying on semantic list elements and basic CSS styling to convey the information.

Mar 23, 2020