Riccardo Pressiani

Scatterplot with menus

This interactive scatterplot lets users explore the relationships between different numeric attributes of cars from the auto-mpg dataset. Two dropdown menus, built with a reusable `dropdownMenu` function, allow selection of the variables plotted on the x and y axes. The chart itself is rendered by a custom `scatterplot` module using `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` for the axes. Data updates trigger a smooth `transition` animation as circles move to their new positions over 500 milliseconds.

Oct 11, 2019

Temperature in SF linechart

This line chart displays a week of temperature readings in San Francisco, with the y-axis inverted so lower temperatures appear higher on the chart, and time progressing along the x-axis. The visualization uses D3 v5 with SVG rendering, employing `scaleTime` and `scaleLinear` for axes, `line` with `curveBasis` for the smooth path, and axes with tick lines via `axisLeft` and `axisBottom`. Data loads from a CSV file using `d3.csv`, and the chart includes labeled axes and a title.

Choropleth map

A choropleth map colors world countries by economy type, with a color legend and hover highlight. It renders GeoJSON country paths using `d3.geoPath` with a `geoNaturalEarth1` projection, and supports pan and zoom via `d3.zoom`. Data comes from TopoJSON world-atlas files and CSV metadata joined by ISO code; `scaleOrdinal` assigns categorical colors from `schemeSpectral`, and the legend is built with D3 selections.

Cheap tricks for interaction

A world map rendered with D3's geoNaturalEarth1 projection presents countries in light green against a blue sphere. The visualization loads country boundaries from the world-atlas TopoJSON and TSV files, using d3.geoPath to generate SVG paths. Interaction is handled via D3's zoom function, which applies a scale and translate transform to the map group on zoom events, while a CSS :hover rule turns countries red when moused over.

Let's make a map with D3.js!

An interactive SVG map of the world renders country boundaries in green with black outlines using D3.js and TopoJSON. The visualization loads geographic data from the World Atlas TopoJSON file and projects it with a Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`. It uses `d3.json` to fetch the data and `topojson.feature` to convert it into GeoJSON, then appends `path` elements to the SVG.

Bowl of Fruit - General Update pattern

Five apples on a line animate into a bowl with the General Update pattern, showing a time-series of fruit changes as a horizontal row of colored circles. Built with D3 v5, the example uses `.transition()` to animate radius and position changes, with `selection.enter()` and `selection.exit()` managing additions and removals. All graphics render as SVG elements, generating transitions over a one-second duration.

Bowl of Fruit - General Update pattern

Five circles represent fruit in a bowl, with apples drawn in red and lemons in yellow. The visualization demonstrates the general update pattern for animated transitions: apples leave the bowl, an apple transforms into a lemon, and fruit is removed entirely. Using d3's selection.enter, merge, and exit methods with transition.duration, circles shrink to zero radius, change color, and slide to new positions over one-second intervals.

Let's make a face with D3.js!

A smiley face built with D3.js shows its eyebrows bobbing up and down in a continuous two-second animation loop. The code constructs the face from SVG shapes—a yellow circle, two eye circles, rectangular eyebrows, and an arc-based mouth—using d3-selection to append elements and d3-transition to animate the eyebrow group’s transform attribute. Eyebrows move via chained transitions with an `on("end")` callback that restarts the animation indefinitely. D3 v5 is loaded from a CDN, and all geometry is positioned relative to the SVG’s center.

World population area chart

This visualization shows global population trends over time as a filled area chart, with the x-axis mapping years and the y-axis representing population counts. The chart uses an area generator from D3 v5 to create a smooth, curved region beneath the line, rendered as SVG paths. Data is loaded from a CSV file using `d3.csv`, with population values scaled by 1000 and years parsed as dates. Axes are configured with `d3.axisBottom` and `d3.axisLeft`, while `d3.scaleTime` and `d3.scaleLinear` handle the scales for time and population.

Temperature in SF areachart

This area chart visualizes a week of temperature readings in San Francisco, with time on the x-axis and temperature on the y-axis. The chart uses a smooth, curved path filled in maroon to represent the temperature trend. Built with D3 v5, the visualization loads CSV data from a remote URL, parses timestamps and numeric values, and renders an SVG using `d3.area` with `curveBasis`. Axes are created via `d3.axisBottom` and `d3.axisLeft`, with grid lines and labeled titles, all styled through external CSS.

Temperature in SF scatterplot

This scatterplot visualizes temperature readings over a week in San Francisco, with time on the x-axis and temperature on the y-axis. The D3.js code uses `scaleTime` and `scaleLinear` to map the data, `axisBottom` and `axisLeft` for the axes, and SVG circles to render each measurement. The data comes from a CSV file loaded with `csv`, parsed into `Date` and numeric values, and plotted with gridlines and labeled axes.

Cars Scatterplot

This scatterplot displays the relationship between horsepower and weight for a dataset of cars, with each red semi-transparent circle representing a vehicle. The y-axis is reversed so that lighter cars appear higher on the chart, and both axes include labeled gridlines. The visualization uses D3 v5 with `d3.csv`, `scaleLinear`, `axisBottom`, and `axisLeft`, rendering SVG circles and a titled chart with margin-based layout. The data is loaded from a remote CSV file and parsed into numeric values before plotting.

Customizing Axes

This example visualizes the population of the top 10 most populous countries as circles on a bar-chart-like layout. It customizes both axes with gridlines and labels, removing domain lines and formatting the x-axis tick labels using d3.format to convert values to billions. The chart uses d3.scaleLinear and d3.scalePoint for positioning, with d3.axisBottom and d3.axisLeft to render ticks. Data is loaded from a CSV file and rendered as SVG circles.

Customizing Axes

Customizing Axes

This example shows a horizontal bar chart of the top 10 most populous countries, with population values displayed in billions on a custom axis. The code uses d3.csv to load data, d3.scaleLinear and d3.scaleBand for scales, and d3.axisBottom with a custom tick format that abbreviates numbers (e.g., converting "G" to "B"). The left axis hides its domain and tick lines, while a title and axis label are added as SVG text elements.

Making a barchart

This example shows a horizontal bar chart ranking the ten most populous countries, with population values read from a CSV file and displayed on a linear scale while country names appear on a band scale. It demonstrates fundamental D3.js DOM manipulation by selecting the SVG, appending a group for margins, and binding data to rectangle elements. The code uses `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render the chart with steel-blue bars and labeled axes.

Responding to Resize

This example demonstrates a D3.js chart that responds to browser window resizing by drawing a green X that fills the viewport. The SVG container’s dimensions are extracted from the CSS-computed `clientWidth` and `clientHeight` of the chart div, then applied to the SVG element to redraw the lines. The code uses D3’s selection and merge API to update line coordinates dynamically, with a listener on the browser’s resize event to trigger redraws.