arieltonglet

Circles on a map

A world map rendered in SVG displays projected population estimates for 2050 as semi-transparent black circles sized by value and positioned at each country’s centroid. The visualization uses `d3.geoNaturalEarth1` and `d3.geoPath` to draw the map, `d3.scaleSqrt` for proportional circle radii, and `d3.zoom` for panning and zooming. Animated circle transitions appear sequentially, while a static legend from `colorLegend.js` lists population values. Data comes from a CSV joined to TopoJSON country geometries.

Oct 17, 2019

Melting data for multiple lines

This visualization shows changes in world population over time across multiple regions and countries, with each entity represented as a colored line. The chart uses a time-scale x-axis and a reversed linear y-axis to display population values, with a categorical color scale distinguishing the lines. Data is melted from wide-format CSV files into tidy long format before being nested by country name. The implementation relies on d3.csv, d3.nest, d3.scaleTime, d3.scaleLinear, d3.line, and d3.axisBottom/axisLeft, with a custom color legend component rendering as SVG.

Oct 14, 2019

Color and size legends

Two adjacent legends illustrate how to construct reusable D3 legend components. A color legend uses `d3.scaleOrdinal` with fruit types mapped to red, yellow, orange, and green, rendering circles with corresponding fills and text labels. A size legend uses `d3.scaleSqrt` to map values 0–10 to circle radii, with ticks generated via `sizeScale.ticks` and positioned by cumulative spacing. Both legends are appended as SVG groups, with enter/merge/exit selections managing dynamic updates.

Oct 14, 2019

Scatter plot with menus

A scatter plot displays the relationship between two numeric attributes from a dataset of 1970s cars, encoded as circles positioned by linear scales. Two dropdown menus let viewers switch which columns appear on the x- and y-axes, triggering a smooth animated transition of all points via `d3.transition`. The visualization uses D3 v5 APIs including `scaleLinear`, `axisBottom`, `axisLeft`, and `extent`, rendering as SVG with interactive menus built through a reusable `dropdownMenu` module.

Oct 14, 2019

General update pattern - bowl of fruits

A data join demonstrates the D3 general update pattern as a bowl of fruit changes over time. Apples enter, exit, and transition into lemons, with fruitBowl using `selection.data`, `enter`, and `exit` to bind SVG groups. D3 transitions animate opacity and position, while ordinal scales map fruit types to circle colors and radii. The animated SVG renders in an HTML page using d3 v5.

Oct 11, 2019

World Countries Tree

This example shows a hierarchical tree of world countries organized by continent and subregion, with each node labeled and connected by curved links. The visualization uses d3.tree to compute the layout and d3.linkHorizontal for path generation, while d3.zoom enables panning and zooming. Data is loaded from a JSON file, and the SVG rendering applies font sizing based on node depth.

Oct 11, 2019

Bowl of fruits - click to select

A bowl of fruits demonstrates interactive data selection and dynamic updates in D3. Apples and lemons are rendered as colored circles with labels, and clicking a fruit selects it, highlighting it with a black stroke. The visualization uses D3's data joins with enter, update, and exit selections to animate fruits appearing, disappearing, and changing type over time via transitions. It employs ordinal scales for color and radius, SVG groups for fruit elements, and click event handlers to update the selected state.

Oct 10, 2019

Line chart week temperatures

A line chart displays one week of temperature readings from Rio de Janeiro, with time on the x-axis and temperature on the y-axis, along with labeled axes and a bold title. The chart uses D3.js to load CSV data, parse timestamps and numeric values, and render an SVG with a smooth curve via `d3.line` and `curveBasis`. Individual data points appear as small circles, and grid lines from the axes help read values. The visualization is built with plain JavaScript and D3, drawing the chart inside a static SVG container.

Oct 4, 2019

Size by population

This map uses a power scale to scale each country’s area by its projected 2050 population, with SVG paths transformed around their geographic centroids. D3’s `geoNaturalEarth1` projection and `geoPath` draw the world, while `scalePow` and `scaleSqrt` determine the sizing. A hover tooltip reveals the country name and population, and a legend shows the color scale for data values. Population data comes from a UN CSV file, and countries missing 2050 data are rendered white with a “Missing data” tooltip.

Oct 4, 2019

Choroplet map

This choropleth map colors countries by economy category, using a spectral color scale to visually distinguish different economic classifications. The visualization renders geographic boundaries with `d3.geoPath` and a `geoNaturalEarth1` projection, while loading country data from a CSV file and TopoJSON world atlas. Users can zoom interactively via `d3.zoom`. A custom color legend, built with SVG circles and labels, shows the mapping between categories and colors, with hover states highlighting individual countries.

Oct 3, 2019

Cars Scatter plot

A scatter plot displays the relationship between vehicle weight and horsepower for a dataset of cars, with each point representing a model. The chart uses D3.js to create linear scales and axes, with circles colored purple and semi-transparent to show point density. Data is loaded from a CSV file using `d3.csv` and rendered as SVG, featuring labeled axes and a title.

Oct 2, 2019

Countries Scatter plot

A scatter plot displays the relationship between fertility rate and urban population for 50 countries, with each circle representing a nation. The chart uses D3.js to create a linear x-scale for fertility rate and a reversed linear y-scale for urban population percentage. Grid lines extend from both axes, and axis labels clarify the variables. Data comes from a CSV file parsed with `d3.csv`, while the visualization is rendered as an SVG with circles styled in semi-transparent purple.

Oct 2, 2019

Interactive filtering map

This interactive map uses a choropleth encoding to display countries colored by economic classification, with a legend that filters the map by category. Clicking a legend label dims all countries not in that category, while a base layer of water and country borders provides geographic context. The visualization is rendered as SVG using d3.geoPath and d3.geoNaturalEarth1 projection, with d3.scaleOrdinal for color and event handling for interactivity. It loads data from a World Bank CSV alongside TopoJSON country boundaries.

Week temperatures

This visualization displays a week of temperature readings in Rio de Janeiro as a time-series line chart. The data is loaded from a CSV file via `d3.csv`, with timestamps parsed as dates and temperatures converted to numbers. The chart uses D3 v5 scales (`d3.scaleTime`, `d3.scaleLinear`) and axes (`d3.axisBottom`, `d3.axisLeft`) to render the plot, with orange circles marking each hourly observation. The visualization is rendered as an SVG, with a styled grid and labeled axes.

Cheap tricks for interaction

This example shows a zoomable world map highlighting national borders and country names based on a CSV dataset. The map uses a natural Earth projection and renders geographic features with `d3.geoPath` and TopoJSON from the world-atlas package. Pan and zoom interactions are implemented with the `d3.zoom` API, while hover effects change country fills via CSS. The code fetches country names from a CSV file and builds a lookup table with `csv().then()` to attach tooltips.

Bowl of fruits - hover to select

A bowl of fruits demonstrates animated enter, update, and exit transitions for SVG elements. Apples and lemons are rendered as colored circles with labels, and hovering over a fruit triggers a callback to select it, drawing a black stroke. The example uses D3.js v5 selections, data joins, and `transition()` methods to smoothly move, resize, and fade fruits as the dataset changes over time via `setTimeout`. Color and radius are mapped by fruit type using `d3.scaleOrdinal`.

Blank Canvas

The visualization displays a full-viewport, rounded rectangle filled with a solid yellowgreen color. It uses D3.js version 5.12.0 to select the SVG element and set its width and height to the browser window’s dimensions. The `select` function appends the rectangle, and the `attr` method configures its size, corner radius (rx), and fill color. This minimal example demonstrates basic SVG manipulation and layout without any data mapping or interaction.

Sep 30, 2019

Let's make a Map

This map renders world countries from the world-atlas TopoJSON dataset, using D3’s `geoNaturalEarth1` projection and `geoPath` to draw landmasses and country boundaries. The SVG output fills countries in light gray with blue strokes over a blue ocean sphere. It demonstrates a basic choropleth setup by asynchronously loading the 110m-resolution data and applying styling from an external stylesheet. The example shows how to project geographic features with D3’s geo API and topojson’s `feature` conversion.

Sep 30, 2019

World population area chart

This area chart traces world population over time, showing a smooth upward curve with a subtle leveling in recent years. The visualization pairs an orange filled area with a darker line, and includes circular markers on each data point. Built with D3.js, it uses `d3.area()` and `d3.line()` with `curveBasis` to generate the paths, along with `d3.scaleTime` and `d3.scaleLinear` for the axes. The chart reads population data from a CSV file and renders as SVG.

Formating axes

This bar chart displays the populations of the nine most populous countries, using a horizontal layout with country names on the y-axis and population values on the x-axis. It uses D3.js's `d3.axisBottom` and `d3.axisLeft` to construct the chart, with a custom tick format that converts values from billions (G) to billions (B) and uses a comma as the decimal separator. The chart, rendered as SVG, omits the y-axis lines and x-axis domain for a cleaner look, with data sourced from Worldometer.

Area chart week temperatures

This example visualizes a week of temperature readings in Rio de Janeiro as an area chart. The orange line and semi-transparent area fill show temperature fluctuations over time, with individual data points marked by circles. The chart uses D3.js APIs including `d3.area`, `d3.line`, `d3.scaleTime`, and `d3.scaleLinear` to construct the visualization. Data is loaded from a CSV file containing sensor readings, and the chart is rendered as an SVG with styled axes and gridlines.

Scatter plot

This dot plot shows the populations of the ten most populous countries, with each country positioned along a vertical scale and a circle’s horizontal placement indicating its population size. The visualization uses D3.js v5 with a linear x-scale and a point y-scale, rendering SVG circles with a rebeccapurple fill and 50% opacity. Axis tick lines extend across the plot, and population values are formatted with abbreviations (e.g., “B” for billions). Data comes from Worldometer’s population-by-country dataset, loaded via `d3.csv`.

Bar chart

This bar chart displays population counts for ten countries, from China down to Mexico, using horizontal bars ordered by descending population. The visualization loads data from a CSV file sourced from Worldometer, encoding the country names along the y-axis and population values on the x-axis. It is built with D3.js, using `scaleLinear` and `scaleBand` for the scales, and `d3.axisLeft` and `d3.axisBottom` to render the axes. The chart is rendered as an SVG with yellow-green bars and a light gray background.