cledevoute

Blank Canvas

A blank rectangular canvas fills the entire browser window, rendered as an SVG rectangle with rounded corners. The visualization demonstrates a minimal starting point where no data or marks are present, leaving the empty space as the primary visual element. The code uses D3 v5 to select the SVG element, measure the document’s client width and height, and append a single rectangle with a 40-pixel corner radius. Styling is handled via fixed positioning in CSS to prevent scrolling overlow.

Blank Canvas

An empty, rounded rectangle fills the entire browser viewport as a static visual canvas. The page uses D3 v5 to select the SVG element, set its dimensions to the full width and height of the client area, and append a single rectangle with a 40-pixel corner radius. The example demonstrates a minimal rendering approach with no dynamic data or interaction, relying solely on `d3.select`, SVG attribute setters, and CSS to fix the body’s position and remove margins. The result is a clean, blank slate with no additional marks or animations.

Cheap Tricks for Interaction

This example shows a zoomable world map with hover highlighting, using a natural Earth projection to render country boundaries from TopoJSON data. The map supports interactive pan and zoom through d3.zoom, with a tooltip title displaying each country’s name from a TSV lookup. Countries fill light green and turn red on hover via SVG styling. The visualization relies on d3.geoPath, d3.geoNaturalEarth1, and topojson.feature to draw geographic shapes.

Let's make a MAP with D3.js!

This example visualizes world countries as a natural Earth projection map, with light green landmasses on a sky blue sphere. It loads geographic data from the world-atlas TopoJSON dataset and converts it into GeoJSON features using the `feature` function. The map is rendered with D3’s `geoNaturalEarth1` projection, `geoPath` for path generation, and SVG paths for each country, including a sphere outline. Styling applies via CSS classes for the sphere and country fills, with semi-transparent black country borders.

Let's make a MAP with D3.js!

This example displays a world map rendered as an SVG, with countries filled in light green and the ocean depicted as a sky-blue sphere. It uses D3 v5 and TopoJSON to load world-atlas data at 110m resolution, then applies the `d3.geoNaturalEarth1` projection and `d3.geoPath` to generate country boundaries. The map also draws a background sphere path, and country strokes are semi-transparent black. The code relies on `topojson.feature` to convert TopoJSON topology into GeoJSON features for rendering.

Bowl of Fruit, Hover to Select

Five fruit circles sit in a row, transitioning between apples and lemons with hover selection. D3 v5’s data join and ordinal scales for color and radius drive the SVG circles, while `selection.on("mouseover")` and `selection.on("mouseout")` update a selected fruit’s stroke. Enter, merge, and exit transitions animate radii over one second, with fruits added, removed, or replaced via timed data mutations.

Bowl of Fruit, Click to Select

Five apples sit in a row on an SVG canvas, each rendered as a circle with a sequential transition. Clicking an apple selects it, applying a black stroke, and a timeout script removes or mutates fruits to demonstrate the enter, update, and exit pattern. The code uses d3 v5 with a scaleOrdinal for color and radius, and each circle’s click handler triggers a re-render via `fruitBowl`. A 1-second transition animates circle radius and position changes.

Bowl of Fruit, Click to Select

Bowl of Fruit, General Update Pattern

This example demonstrates the D3 general update pattern with a bowl of fruit that changes over time through a series of timed events. Apples and lemons are rendered as SVG circles with ordinal scales mapping fruit type to color and radius. The code uses `selection.data()`, `enter()`, `merge()`, and `exit()` to handle updates, while `setTimeout` triggers actions like eating an apple or replacing one with a lemon. The visualization shows how D3's data joins manage dynamic datasets.

Bowl of Fruit, General Update Pattern

Five red apples and one yellow lemon move and resize within an SVG bowl using D3’s general update pattern. The `fruitBowl` function binds fruit data to circles, animating enter, update, and exit states via `transition().duration(1000)` and ordinal scales for color and radius. Data changes—eating apples and replacing one with a lemon—are triggered by `setTimeout`, demonstrating smooth transitions between states.

World Population Area Chart

This area chart displays global population trends over time, with a maroon-filled curved path encoding yearly population values from a CSV dataset. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, and `area` generator with `curveBasis` to create the smooth area, while `axisBottom` and `axisLeft` render labeled axes with custom tick formatting. Data is loaded via `csv()` and rendered as SVG, with the y-axis labels shortened from billions to "B".

Temperature in SF Area Chart

A week of temperature readings in San Francisco appears as a smooth, maroon area chart against a light grid, with labeled time and temperature axes and a title. The visualization is built using D3 v5, with the SVG canvas containing the plot. It uses `select`, `csv`, `scaleTime`, `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, `area`, and `curveBasis` to handle data loading, scaling, axes, and the smoothed area generation. Data comes from a CSV file on a remote repository.

Temperature in SF Line Chart

This line chart visualizes San Francisco temperatures over a week, plotting timestamp against temperature using the `d3.curveBasis` line generator for smooth curves. The visualization includes labeled axes with gridlines, a title, and an SVG rendering. Data is loaded from a remote CSV, parsed into dates and numbers, then scaled using `scaleTime` and `scaleLinear` with `axisLeft` and `axisBottom` for ticks.

Temperature in SF Scatter Plot

This scatter plot displays a week of temperature readings in San Francisco, with time on the x-axis and temperature on the y-axis, using blue circles to mark each data point. The code loads CSV data via `d3.csv`, parses timestamps with `new Date`, and renders the chart using `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` with a modified SVG margin layout. Axis labels and a title are added as SVG text elements, while gridlines are drawn by tick marks sized to the plot's inner dimensions.

Cars Scatter Plot

This scatter plot visualizes the relationship between acceleration and horsepower for cars from the auto-mpg dataset. D3’s scaleLinear, axisBottom, and axisLeft functions map the quantitative values, while circles are appended to an SVG container. The code loads CSV data via d3.csv, converts numeric fields, and uses margin-based layout with tick marks and axis labels. Red translucent circles reveal density, with axes formatted using d3.format and a title added manually.

Scatter Plot

A scatter plot displays the population of the top 10 most populous countries from the 2018 World Population Prospects estimate, using circles positioned along a linear scale for population and a point scale for country names. The chart is rendered with SVG via d3.scaleLinear, d3.scalePoint, axisLeft, and axisBottom, with population values formatted using d3.format. Gridlines extend across the plotting area, and axes labels use custom tick formatting to abbreviate large numbers, while the data is loaded from a CSV file.

Customizing Axes

This bar chart displays the top 10 most populous countries, based on 2018 estimates from World Population Prospects 2017. The visualization customizes axes by removing default domain lines and tick marks on the y-axis, while formatting the x-axis labels to abbreviate numbers (e.g., “1.42B”). Built with D3 v5, it uses `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`, with data loaded via `csv`. Population values are multiplied by 1000, and the x-axis tick format converts “G” to “B” for billions.

Making a Bar Chart

This bar chart visualizes the populations of the top ten most populous countries, based on 2018 estimates from World Population Prospects 2017, with each bar’s length reflecting the population value. Using D3 v5, the code loads CSV data via `csv`, scales values with `scaleLinear` and `scaleBand`, and renders axes with `axisLeft` and `axisBottom`. The chart is drawn as an SVG, with bars styled in steelblue, and country labels positioned along the vertical axis.

Let's make a face with D3.js!

This example displays a simple yellow face composed of SVG shapes, including eyes, eyebrows, and a mouth, all built programmatically with D3.js. The face is centered within a fixed viewport using a group transformation. The code uses D3’s `select` to target the SVG element and `append` to construct each shape, while the `arc` function generates the mouth’s path. An animated eyebrow movement is achieved by chaining multiple `transition().duration()` calls, which sequentially shift the eyebrow group’s vertical position.

Jun 16, 2020

Shapes with SVG and CSS

This example demonstrates how SVG shapes—circles, rectangles, lines, and paths—can be styled and transformed using CSS and inline attributes. It shows basic geometric forms composed in a single SVG canvas, with properties like fill, stroke, stroke-width, and transform applied to individual elements or grouped via the `<g>` tag. The code uses plain React to render static JSX, relying on SVG’s native presentation attributes and a linked stylesheet for class-based styling, such as colored strokes on line groups. No data or interactivity is involved; the focus is purely on visual construction and CSS inheritance.

Jun 16, 2020