Brett

@BLayman·8 public vizzes

Making a Bar Chart

This example shows a bar chart of 13 user categories, with each bar’s height representing the numeric value of Category1, sorted in ascending order. Using D3 v5, the code loads data from a CSV file and renders it as SVG rectangles. It employs scaleBand for the categorical x-axis, scaleLinear for the y-axis, and axisLeft and axisBottom to display the axes. The bars are drawn by binding data to rectangle elements, with their width set from the band scale’s bandwidth and height computed from the scaled value.

Jul 29, 2019

Loading thumbnail…

Render Loop

This example demonstrates a render loop that continuously redraws a small dataset of nine CSV records as SVG shapes. The code uses D3 v5’s `csv` loader to import the data and a custom `Render` class to manage the visualization. Every 10 milliseconds, the `render` function re-binds the data to grouped elements, supporting zoom interactions via `d3.zoom` and hover/click events that track the current ID. The visualization highlights how frequent, incremental updates can drive interactive SVG graphics.

Jul 19, 2019

Loading thumbnail…

Let's make a map with D3.js!

This example shows an interactive world map built with D3 v5, displaying country boundaries and names loaded from the World Atlas TopoJSON and TSV datasets. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and renders countries as SVG paths generated with `d3.geoPath`. Hovering highlights a country in red, and a zoom behavior implemented with `d3.zoom` allows pan and zoom. A light blue sphere background and green country fills demonstrate basic choropleth styling.

Jul 19, 2019

Loading thumbnail…

Blank Canvas

A blank, rounded rectangle fills the browser window, rendered as an SVG element. The visualization demonstrates a minimal D3 setup, where a single `rect` is appended to the SVG and sized to match the viewport dimensions. The code imports `select` and `arc` from D3 v5, though only `select` is used to create the static canvas. The page uses fixed positioning in CSS to prevent scrolling, making the white canvas the sole focus.

Jul 19, 2019

Loading thumbnail…

Bowl of fruits - click to select

A bowl of fruits shows red apples and yellow lemons as circles on a rounded rectangular container. Hovering over a fruit selects it, turning its outline blue. The visualization uses d3-selection with data joins to animate circle radii and positions via transitions, while d3-scaleOrdinal maps fruit types to colors and sizes. Circles enter, update, and exit smoothly over one-second transitions.

Jul 16, 2019

Loading thumbnail…

bowl of fruit - general update with text and layers

A bowl of fruit demonstrates D3's general update pattern, animating a row of apples and lemons within a blue bowl shape. Circles shrink and disappear, a lemon replaces an apple in place, and remaining fruits shift positions across three timed updates. The code uses `selection.data()`, `merge()`, and `exit()` with `transition().duration()` to coordinate enter, update, and exit layers for both circle radii and text labels. An ordinal color scale maps fruit types to red and yellow fills.

Jul 16, 2019

Loading thumbnail…

Bowl of Fruit - click to select

A bowl of fruit demonstrates D3’s data-join with animated transitions, where apples and lemons are drawn as circles and clicking a fruit highlights it with a black stroke. The example uses `d3.scaleOrdinal` for colors and radii, `selection.transition().duration(1000)` to animate enter and exit, and a custom click handler to update the selected fruit. Rendered in SVG, the scene shows fruits being removed, replaced, and filtered over time.

Jul 16, 2019

Loading thumbnail…

bowl of fruit - general update pattern

Five circles representing fruit enter and update in an animated SVG scene, changing color and radius based on fruit type while exiting when their data is removed. The example demonstrates D3's general update pattern, binding data by a unique ID and using chained `.transition().duration()` calls to animate radius, x-position, and removal effects. The code imports `scaleOrdinal` from D3 for color and radius mappings, and the data array is mutated with `pop()` and array filtering before re-rendering.

Jul 16, 2019