123fischer

Color and size legends

A color legend maps fruit types to both color and size, displaying apples in red and lemons in yellow. Two sets of text labels appear, one above the circles and one below, using d3.scaleOrdinal for color encoding and a custom radius scale for sizing. The example builds SVG circles and text elements with D3 v5, using data joins and merge operations to update the legend.

Dec 2, 2020

Blank Canvas

A blank, rounded rectangle fills the entire 960 by 500 pixel SVG canvas, demonstrating a minimal starting point for visualization projects. The example uses D3 v5’s `select` method to target the SVG element and set its dimensions, then appends a single `rect` with a 40-pixel corner radius. The accompanying CSS fixes the body to the viewport edges and hides overflow, ensuring the canvas occupies the full screen without scrollbars. This serves as a template for building more complex D3-based graphics.

Dec 2, 2020

Cheap tricks for interaction

This example shows a zoomable and pannable world map with hover highlighting on individual countries. It renders geographic boundaries using `d3.geoPath` with a `geoNaturalEarth1` projection, drawing country shapes from TopoJSON data and matching country names from a TSV file. The map supports interactive zooming through D3's `zoom` behavior, which applies transformations to the SVG group element. Country polygons fill with steel blue, and hovering changes their fill to light blue via CSS.

Map with D3.js

This visualization displays a world map using a natural Earth projection, with country boundaries rendered as filled SVG shapes. The sphere outline is drawn first using a `geoPath` generator with an empty GeoJSON sphere object. Country features are loaded from the World Atlas TopoJSON dataset via `d3.json` and converted using `topojson.feature`. The map uses `d3.geoNaturalEarth1` for projection and `d3.geoPath` for path generation, with countries colored steelblue against a white background.

Bowl of Fruit - hover to select

Five fruit circles sit in a row and animate in with a smooth transition. Hovering over any fruit strokes it black, while removing the mouse clears the selection. The code uses D3 v5’s data join with a key function to update exiting circles, scaling radius and fill via ordinal scales per fruit type. Over time, a timer script removes and replaces apples with lemons, demonstrating animated enter, update, and exit transitions.

Bowl of Fruit - click to select

A bowl of five apples animates with smooth transitions, letting viewers click any fruit to highlight it with a black stroke. The visualization demonstrates data joins and update patterns via d3 transitions, removing apples and morphing one into a lemon over time. Using d3.scaleOrdinal for color and radius mapping, it binds fruit objects keyed by unique IDs, with enter, update, and exit selections animating circle attributes through the d3 v5 API. The SVG rendering approach shows how d3 handles dynamic array manipulation and user interaction.

Bowl of Fruit - General update pattern single element

Five apples sit in a bowl rendered as an SVG rectangle, with each fruit as a group containing a colored circle and label. D3's general update pattern removes, modifies, and re-adds elements over timed intervals: an apple disappears, a middle apple changes to a lemon, and another is filtered out. The code uses d3-selection’s `enter`, `merge`, and `exit` methods with ordinal scales for color and radius.

Bowl of Fruit - General update pattern transition nested

Five circles representing apples transition to lemons and are removed one by one in a bowl of fruit. The example uses the D3 general update pattern with enter, update, and exit selections to animate the changes. The `fruitBowl` function applies a `transition().duration(1000)` to interpolate the circle radii and colors based on a scaleOrdinal color scale. The JavaScript code manages the data, using `setTimeout` to trigger data modifications and re-renders.

Bowl of Fruit - General update pattern - transitions

Five circles representing fruit in a bowl transition between states using D3.js's general update pattern. The SVG visualization begins with five apples, which are removed, replaced with a lemon, and filtered over time. The animation uses keyed data with `transition().duration(1000)` to animate radius changes while color is set via an ordinal color scale mapping apple and lemon types to distinct colors.

Nov 18, 2020

Temperature in San Francisco Area Area

This visualization shows the growth of world population from 1960 to 2015 using a filled area chart, with time on the x-axis and population count on the y-axis. The SVG rendering relies on d3.area with a basis curve to create the smooth maroon shape, while scaleTime and scaleLinear map the data to coordinates. Axes are generated with axisBottom and axisLeft, using custom tick formatting that converts large numbers into billions. The data comes from a CSV file fetched via d3.csv, with year parsed as a Date and population as a number.

Temperature in San Francisco Scatter

This visualization shows daily temperature readings in San Francisco as a scatter plot, with each circle representing a single day’s temperature plotted against its date. The x-axis displays time using a time scale, while the y-axis uses a linear scale for temperature in Celsius. The chart includes axis labels, grid lines, and a title. Using d3.csv to load data, the code employs d3.scaleTime, d3.scaleLinear, d3.extent, d3.axisBottom, and d3.axisLeft to render the SVG elements.

Temperature in San Francisco Line

This line chart shows the daily temperature in San Francisco over time, with the date on the x-axis and temperature in Celsius on the y-axis. The visualization uses D3 v5 with SVG rendering, employing `d3.scaleTime` and `d3.scaleLinear` for scales, `d3.axisBottom` and `d3.axisLeft` for axes, and `d3.line` with `d3.curveBasis` to generate the smoothed path. Data is loaded from a CSV file via `d3.csv`.

Temperature in San Francisco Area Area

This visualization shows the temperature in San Francisco over time, with a filled area chart displaying daily temperature values in Celsius on a date-based x-axis. The code loads data from a CSV file hosted on vizhub.com and renders it using d3.v5, employing `scaleTime` and `scaleLinear` for the axes, `area()` with `curveBasis` for the smoothed path, and `axisBottom` and `axisLeft` for the grid lines and labels. The SVG output includes a title, axis labels, and a maroon filled area with a matching stroke.

Country stats

This scatterplot shows the relationship between GDP per capita and birth rate for countries around the world, with each circle representing a country. The visualization uses D3 v5's `scaleLinear`, `axisBottom`, `axisLeft`, and `csv` loading functions to map the data from the provided CSV file onto an SVG canvas. The chart includes labeled axes and a title, with circles positioned according to each country's metrics.

Scatter Plot cars

This scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset. Each semi-transparent steelblue circle represents a car, with positions determined by linear scales mapping the data attributes to SVG coordinates. The chart includes labeled axes with gridlines and a title, using d3.csv for data loading, d3.scaleLinear, d3.axisLeft, and d3.axisBottom for scales and axes, all rendered as SVG elements.

Scatter Plot

This scatter plot displays the population of the ten most populous countries, with each circle positioned along a horizontal linear scale for population and a vertical point scale for country names. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to construct the axes. Population values are parsed from a CSV file and formatted with tick labels using `format('.3s')`, while gridlines are drawn via tick sizes.

Customizing Axes

A horizontal bar chart displays the population of the ten most populous countries, using CSV data loaded with `d3.csv`. The chart customizes its axes with `d3.axisBottom` and `d3.axisLeft`, applying a `d3.format` tick formatter that converts values from G to B. `d3.scaleLinear` and `d3.scaleBand` position the bars, while gridlines are created by extending x-axis ticks with a negative tick size. The y-axis’s domain and tick lines are removed for a cleaner look.

Nov 16, 2020

Make a bar chart

A horizontal bar chart displays population figures for ten countries, ranked from largest to smallest. The chart uses D3 v5 with `csv` to load data and `scaleBand` for the categorical y-axis, while `scaleLinear` maps population values to bar widths. Axes are added with `axisLeft` and `axisBottom`, and bars are rendered as SVG `rect` elements. The data is read from `data.csv`, with population values multiplied by one thousand during preprocessing.

Nov 16, 2020

Make a bar chart

Nov 15, 2020

Shapes with SVG and CSS

A yellow SVG circle face with black outlines demonstrates animated facial expressions using D3 v5 and CSS. The code renders two eyes that blink via chained `transition().duration()` calls, while eyebrows shift vertically through animated `transform` attributes. A mouth is drawn using the D3 `arc()` path generator. All shapes are positioned within a centered `<g>` group, with SVG attributes like `cx`, `r`, and `width` controlling geometry.

Nov 15, 2020