F

framptonb

@framptonb·16 public vizzes

Loading thumbnail…

Color and Size Legends

This example demonstrates how to build both a color legend and a size legend using D3.js v5. The color legend maps ordinal categories (Apple, Lemon, Lime, Orange) to distinct colors via `scaleOrdinal`, while the size legend uses `scaleSqrt` to represent numerical values from 0 to 10 as circle radii. Both legends implement a general update pattern with `selection.merge()` for enter and exit transitions, rendering circles and text labels in SVG. The ticks for the size legend are generated using `sizeScale.ticks()`, with all elements styled via CSS classes.

Loading thumbnail…

World Countries Tree with D3.js!

This example visualizes the hierarchical relationships among world countries and regions as a collapsible-style tree. It displays continents branching into subregions and individual countries, using a horizontal layout with adjustable text size based on depth. The visualization implements pan and zoom functionality through D3’s `zoom` behavior, applying the transform to an SVG group. The tree structure is generated with `d3.hierarchy` and `d3.tree`, while curved links are drawn using `d3.linkHorizontal` from a local `data.json` file.

Loading thumbnail…

Create a new Blank Canvas with D3.js!

This example creates a blank canvas by sizing an SVG to fill the browser viewport, then drawing a single rounded rectangle across the entire drawing area. The code uses D3.js v5’s `select` method to grab the `<svg>` element, sets its width and height from `document.body.clientWidth` and `document.documentElement.clientHeight`, and appends a `rect` with a 40-pixel corner radius via chained attribute setters. The SVG rendering approach is direct, with no external data source.

Loading thumbnail…

Let's make an Interactive Map with D3.js!

This interactive map displays world countries with hover highlighting using D3.js v5. It renders a natural Earth projection via `d3.geoPath` and `d3.geoNaturalEarth1` on an SVG, with zoom and pan control through `d3.zoom`. Country boundaries come from TopoJSON data in the world-atlas package, enriched with country names from a TSV file. The map shows tooltips with country names on hover and enables smooth exploration of geographic data.

Loading thumbnail…

Let's make a Map with D3.js!

A D3.js map of the world renders countries in light green against a blue sphere, with country borders drawn in black. The visualization uses D3’s `geoPath` and `geoNaturalEarth1` projection to convert geographic coordinates into SVG paths, while TopoJSON’s `feature` function extracts country boundaries from the world-atlas dataset. The sphere background is created by passing a `{type: 'Sphere'}` object through the same path generator.

Loading thumbnail…

General Update Pattern and DOM Element Hover Event Handling

This interactive D3 v5 visualization demonstrates the general update pattern with SVG rendering, showing a bowl of fruit that changes over time. The code uses `selection.merge()` and key-based data binding to manage enter, update, and exit states, while `d3.scaleOrdinal` maps fruit types to colors and radius values. Mouse events on circles trigger hover highlighting, with the `setSelectedFruit` function updating a selected fruit’s stroke to black. Timed updates pop apples, replace one with a lemon, and filter items, all re-rendering through the reusable `fruitBowl` module.

Loading thumbnail…

General Update Pattern and DOM Element Select Event Handling

An interactive SVG scene displays a row of apples and lemons inside a bowl. D3 v5 code uses the general update pattern to add, remove, and modify circle elements over timed intervals, and the `selection.attr` API applies dynamic stroke widths to highlight the currently selected fruit via an `on('click')` handler. The `scaleOrdinal` function maps fruit types to specific colors and radii.

Loading thumbnail…

Bowl of Fruit - General Update Pattern w/ Basic Animated Transitions

This example demonstrates the D3 general update pattern by animating a bowl of fruit represented as colored circles. Apples and lemons appear, change type, and disappear from an SVG canvas, with smooth transitions adjusting position and radius over one second. The code uses `selection.data()`, `.enter()`, `.merge()`, and `.exit()` alongside `transition().duration()` to manage object constancy based on unique IDs. The `scaleOrdinal` maps fruit types to colors and sizes.

Loading thumbnail…

Fork of Bowl of Fruit - General Update Pattern w/ Nested Animation Transitions

This example demonstrates D3’s general update pattern with nested transitions by animating a bowl of fruit as apples are removed, replaced by lemons, and filtered out. It shows how the `enter`, `update`, and `exit` selections handle DOM creation, modification, and removal, using `selection.merge()` to apply shared attributes to groups, circles, and text. The code leverages d3.scaleOrdinal for color and radius mappings, and updates the SVG via timed `setTimeout` calls. The bowl is drawn as a static rectangle, with fruit rendered as SVG circles and labels.

Loading thumbnail…

Fork of Let's make a face with D3.js!

This example shows a yellow smiley face rendered in SVG, with its eyebrows animating upward and downward in a repeating loop. The code builds the face using D3.js v5, appending circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth. Eyebrow motion is driven by chained `transition().duration()` calls that toggle the group’s translate transform. The visualization demonstrates fundamental DOM manipulation and animation with `d3.select`, `d3.arc`, and SVG element creation.

Loading thumbnail…

Temperature in San Francisco Area Chart from CSV file

The visualization displays one week of San Francisco temperatures as a smooth area chart, with time on the x-axis and temperature on the y-axis. The chart includes labeled axes, grid lines, and a title, all rendered as SVG elements. Using D3 v5, the code loads data from a remote CSV file via `d3.csv`, parses timestamps and numeric values, then applies `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `area` with a basis curve to generate the filled path. The axes are customized with tick marks and removed domains, while the margin layout positions the chart within a fixed 960x500 viewport.

Loading thumbnail…

Scatter Plot of Car Information from JSON file

This scatter plot displays the relationship between horsepower and weight for cars from the auto-mpg dataset. Each circle represents a car, with position determined by d3.scaleLinear scales mapping the data values to SVG coordinates. The code loads CSV data via d3.csv, converts numeric fields, and renders the chart with d3.axisBottom and d3.axisLeft axes, including grid lines and rotated axis labels. Circle styling uses the steelblue fill and opacity settings defined in the stylesheet.

Loading thumbnail…

Scatter Plot of Country Populations from CSV file

This example displays a scatter plot of country populations from a CSV file, with each circle positioned along a point scale for countries and a linear scale for population values. The visualization includes labeled axes, grid lines, and a formatted x-axis that abbreviates large numbers. Using D3 v5, the code loads data with `d3.csv`, scales it with `d3.scaleLinear` and `d3.scalePoint`, and renders the chart as SVG elements including axes and circles.

Loading thumbnail…

Customizing Bar Chart Axis

This example demonstrates how to customize bar chart axes using D3.js (v5), presenting population data for ten countries from a CSV file. The chart uses a linear scale for the x-axis, showing population values, and a band scale for the y-axis listing countries. The code extends the `d3.axisBottom` and `d3.axisLeft` functions, applying a custom tick formatter that converts numbers to abbreviated labels (e.g., "B" for billion) and removing domain lines and tick marks for a cleaner look. SVG rendering displays the bars, with styled tick text and lines via CSS.

Loading thumbnail…

CSV-based Bar Chart with D3.js!

This example shows a horizontal bar chart of population data for ten countries, loaded from a CSV file and rendered as SVG. The visualization uses D3.js v5 methods including `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to map country names to y-axis bands and population values to bar widths. Bars are appended as `rect` elements, styled with steelblue fill, and the chart includes margins and axes to frame the data.

Loading thumbnail…

Temperature in San Francisco Line Chart from CSV file

This example visualizes one week of temperature readings in San Francisco as a smooth line chart, with a time-scaled x-axis for date and time and a linear y-axis for temperature. It uses D3 v5 APIs including `csv`, `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `line`, and `curveBasis` to load the external CSV data, build the SVG axes with grid lines, and render a maroon curve inside a 960x500 SVG. The chart also includes axis labels and a title, with the data parsed to convert timestamps and numeric temperature values.