ModalMBS

Let's make a face

This example shows a minimal scatter of five black circles arranged in a vertical column, rendered as an SVG through D3’s data join pattern. The code sets an SVG canvas with a height of 500 pixels and width of 50, then uses `d3.select('body').append('svg')` and `svg.selectAll('circle').data(dataset).enter().append('circle')` to bind an array of numeric values to circles, all initially placed at fixed coordinates. Although the commented-out block suggests an intended horizontal layout using `attr('cx', function(d, i) { … })` and radius mapping, the active code leaves positions static, producing a simple column of uniform black dots. The example relies on D3 v6, React, and basic SVG attributes like `fill`, `cx`, `cy`, and `r`.

Oct 2, 2020

shrinking bowl of fruit

A shrinking bowl of fruit shows eight apples in a bowl that gradually transforms: individual fruits change type to lime or lemon, shrink in radius, and disappear, while the bowl width adjusts to fit the remaining fruit. The SVG animation runs in D3 v5, using `scaleOrdinal` for color and radius mappings, `sum` for bowl width, and `transition().duration(1000)` to animate circle positions, radii, and rect width, with clicks logged to the console.

Sep 30, 2020

Bowl of Fruit General Update Pattern

Circles representing fruit in a bowl animate shape and color as their type changes, and disappear when removed. It demonstrates the D3 general update pattern using `selection.data`, `enter`, `merge`, and `exit` transitions over one second. The React-based example uses `scaleOrdinal` for color and radius, with `transition.attr` to tween circle positions and radii. Data mutations occur on a timer, and clicking a circle logs its ID via an `onClick` handler.

Sep 30, 2020

Bowl of Fruit General Update Pattern

This example demonstrates the general update pattern for data joins in D3, using a bowl of fruit where apples and lemons appear, disappear, and change type over time. The visualization shows how enter, update, and exit selections handle dynamic data, with circles animating their radius via transitions. Built with React and D3 v5, it uses scaleOrdinal for color and size mappings, and the merge method to combine selections. Clicking a fruit selects it with a black stroke, while setTimeouts trigger data changes every few seconds.

Sep 29, 2020

Bowl of Fruit General Update Pattern

This example demonstrates the general update pattern in D3 by animating a changing dataset of fruit circles. Apples and lemons are rendered as colored circles that enter, update, and exit with transitions, using `d3.scaleOrdinal` for color and radius mapping. The code uses D3 v6 selections with `.enter()`, `.merge()`, and `.exit()` to handle dynamic array changes, including removals and type updates over time. The implementation is plain JavaScript with D3 transitions, updating an SVG within a React-compatible structure.

Bowl of Fruit General Update Pattern

A bowl of fruit updates dynamically as apples, lemons, and limes appear, change type, and disappear over timed intervals. The visualization uses d3.scaleOrdinal to map fruit types to colors and radius sizes, while the general update pattern joins data to SVG circles via selection.data, merging enter and update selections, and animating exit transitions with d3.transition. Built with React and d3.v6, the state changes are triggered by setTimeout calls that modify the fruits array.

Monthly Price of Gold since 1950

The visualization shows the monthly price of gold from 1950 onward, using stacked rectangular bars to represent price levels over time. Each bar’s height is scaled by the d3.scaleLinear y-axis, while the x-axis uses d3.scaleTime to map dates. The code loads data from a CSV file via d3.csv, parses dates with d3.timeParse, and renders SVG rectangles with d3.select and data joins. A secondary d3.scaleLinear for working hours is defined but not fully utilized.

Monthly Price of Gold since 1950

The visualization displays the monthly price of gold from 1950 onward as a series of vertical bars, with height representing the dollar price and horizontal position encoding time. It uses D3 v6 to load the CSV data, parse dates with `timeParse('%Y-%m')`, and map values through `scaleTime` and `scaleLinear` before appending SVG rectangles. The data comes from the gold-prices dataset hosted on Datahub.

Generic Report Setup

This example demonstrates a generic report generation pipeline that transforms spreadsheet-like JSON data into a plain-text output. The data, defined in `data.js` as an array of objects with headers `header1` through `header4`, represents rows of a conceptual spreadsheet. The code uses a JavaScript `filter` method to conditionally select rows where `header3` is less than 4, then maps each row through a `formatData` function, and joins the results into a string displayed in an HTML `<pre>` element. It is a minimal, hard-coded illustration of chaining data-processing steps without external libraries.

Sep 27, 2020

Bowl of Fruit General Update Pattern

This example demonstrates the General Update Pattern for data joins in D3, using an SVG bowl of fruit as the visual metaphor. It shows how to bind an array of fruit objects to circle elements, then update the scene as data changes. The code uses D3 v6’s `select` and `range` APIs within a React framework, though the visible rendering relies on plain SVG elements. The implementation highlights the core enter, update, and exit phases of the data join without external interactions or animations.

Sep 26, 2020

Shapes Practice

Animated SVG composition of 300 rectangles and 300 circles, rendered with D3 v6 in a React framework. Rectangles initially draw as thin gray strokes, then transition to transparent fills with pink outlines before expanding to fill the entire canvas. Circles begin as large transparent rings with thin white strokes that thicken, then shrink to small points while drifting downward. Transitions sequence over 15-20 second durations, creating a slow rhythmic interplay of shape transformations across the 960x500 viewport.

Sep 26, 2020

Shapes Practice

Shapes Practice generates 300 rectangles and circles in an SVG canvas, each animated through long transitions that morph their size, stroke, and fill over time. The rectangles expand from thin strips to full canvas dimensions, while circles shrink from radius 100 to nearly invisible points. Built with D3 v6 and React, the code uses `selectAll`, `data`, and chained `transition` calls with duration attributes to drive the sequential transformations.

HTML Basic

This example shows the minimal structure of an HTML page, displaying plain text and three heading levels from h1 to h3. The code uses standard HTML elements within a basic document skeleton, including a title tag and body section. It serves as a starting point for rendering content in a browser, with no external libraries or custom styling applied.

Let's make some random bricks and practice basic looping

A single gray rectangle is drawn on an SVG canvas, using D3 v6 to append the shape and set its height and width attributes. The example demonstrates the basics of D3 selection and SVG creation within a React framework, serving as a starting point for practicing loops and generating random elements. The code relies on `d3.select` and the SVG `rect` element, with no data binding or animation present.

Let's make some random bricks and practice basic looping

A random field of 1,000 overlapping rectangles forms a dense, colorful brick-like pattern. The example demonstrates basic looping and random attribute assignment using D3 v6 within a React framework. Each iteration appends an SVG `rect` element, varying its width, height, and fill color through `Math.random()` and a conditional color chooser that selects red, green, or blue. The `select` API targets the SVG container, while `attr` with a dynamic `transform` rule staggers rectangles horizontally, creating a layered, chaotic composition.

Let's make a face and practice transitions

A smiling face built from SVG circles, rectangles, and an arc path animates through a series of sequential position, scale, color, and transform transitions. The code chains multiple `transition().duration()` calls on the face's components, including the head, eyes, eyebrows, and mouth, using D3 v6 within a React framework. These transitions move the facial features, scale them, and alter their fill colors, creating a playful, choreographed sequence that visually demonstrates how to orchestrate complex SVG animations with D3's transition API.

transition exploration -- first trials with transitions

A sequence of chained SVG transitions animates rectangles, lines, ellipses, and polygons through shifting colors, stroke widths, positions, and shapes, including skewing, translation, and corner rounding. Built with D3 v6 in a React-accessible setup, the code uses `selection.transition().duration()` to chain staggered state changes on each element. The visual explores how interpolated attributes like `fill`, `stroke`, `transform`, and `points` evolve over time, producing a choreographed, abstract composition on a blank canvas.

Bowl of Fruit General Update Pattern

This example demonstrates the General Update Pattern in D3, showing how SVG elements are entered, updated, and exited as a dataset of fruit changes over time. The visualization initially renders five apples, then removes one, changes an apple to a lemon, and filters out another item through scripted setTimeout calls. The code uses `d3.select`, `d3.range`, `d3.scaleOrdinal`, and custom `fruitBowl` logic to manage groups, circles, and text labels, with color and radius scales mapping fruit types to visual properties.

Sep 22, 2020

World Population Area Chart

This area chart visualizes world population growth over time using a smooth, filled curve. The SVG rendering employs D3 scales and axes, with an area generator using a basis curve to create the path. Data is loaded from a CSV file, parsed, and mapped to time and linear scales. The chart includes labeled axes and a title, with D3's `format` function converting large population figures to abbreviated units.

Temperatures of SF

A week of San Francisco temperatures is shown as a filled area chart, with time on the x-axis and temperature on the y-axis. The visualization uses d3.csv to load the data, then d3.scaleTime and d3.scaleLinear to map values, and d3.area with curveBasis to generate a smooth maroon path. d3.axisBottom and d3.axisLeft render titled axes, while SVG text displays the chart title.

Temperatures of SF

This visualization displays a week of temperature measurements in San Francisco as a smooth line chart, with time on the x-axis and temperature on the y-axis. The code uses d3.csv to load data, d3.scaleTime and d3.scaleLinear for scales, and d3.line with curveBasis to generate the curved path. Axes are rendered with d3.axisBottom and d3.axisLeft, while d3.extent computes the domains. The SVG is created with React and D3 v6, featuring labeled axes and a title.

Temperatures of SF

This visualization plots one week of temperature readings in San Francisco as a scatterplot, with time on the x-axis and temperature on the y-axis. The data, loaded from a CSV file, is rendered as semi-transparent orange circles. The code uses D3 v6 functions including `scaleTime`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct the chart, with axis labels and a title added via SVG text elements.

Car's Scatter Plot

This scatter plot shows the relationship between vehicle weight and fuel efficiency (MPG) for a dataset of cars, with each red circle representing an individual car model. The visualization uses D3.js v6’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data values to SVG coordinates and render labeled axes with gridlines. Data is loaded asynchronously via `csv` from a remote file, then parsed into numeric values before being drawn to the SVG canvas. The chart includes a title and axis labels, with circles having partial opacity to reveal overlapping points.

Scatter Plot

This scatter plot displays the populations of the top 10 most populous countries, with circles positioned along a linear x-axis for population values and a point scale y-axis for country names. The chart uses React with D3 v6, rendering SVG via `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom`. Data loads from a local CSV file, with populations multiplied by 1,000, and includes axis tick formatting using `format('.3s')` to abbreviate large numbers.

Customizing Axis

This example displays a horizontal bar chart of the ten most populous countries, with population values on the x-axis and country names on the y-axis. It uses D3 v6’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render the SVG. The code customizes tick labels by converting large numbers (e.g., G to B) via `format`, removes gridlines on the y-axis, and adds axis and title text. Data comes from a CSV file loaded with `csv`, and population values are multiplied by 1000 for display.

Making a Bar Chart

This example shows a horizontal bar chart displaying population counts for several countries. The chart uses D3 v6 APIs including `csv` for data loading, `scaleLinear` and `scaleBand` for positioning, and `axisLeft` and `axisBottom` for axes. Rendered as SVG in a React project, the bars are appended as `rect` elements with dimensions determined by the scales. The data assigns numeric population values from a CSV file, multiplying them by 1000 before visualization.

Making a Bar Chart

This example shows a horizontal bar chart of population by country, with countries sorted alphabetically along the y-axis and population values on the x-axis. The visualization uses D3 v6’s `scaleLinear` for the population scale, `scaleBand` for the categorical country axis, and adds `axisLeft` and `axisBottom` for labeled ticks. Data loads from a CSV file, with populations multiplied by 1,000, and renders as SVG rectangles styled with a steel-blue fill.

Let's make a face

An empty SVG canvas awaits a face, defined entirely by the user’s interactive input rather than a static dataset. The example uses D3 v6’s selection and SVG rendering, with the `d3.select` API targeting the page’s `<svg>` element. No additional geometry or animation libraries are employed, leaving the drawing logic open for customization. The code provides a minimal React-free scaffold, where the face’s features—eyes, nose, mouth—would be appended as SVG shapes through D3’s data-binding methods, though no such drawing commands are present in the snippet.

Sep 20, 2020

Let's make a face

A stylized face built from SVG shapes appears centered on a yellow circular head, with eyes, animated eyebrows, and a mouth formed by a D3 arc path. The eyebrows repeatedly rise and fall using chained `transition()` calls with a two-second duration each. The implementation uses D3 v6 selections to append and position circles, rectangles, and an arc, with dimensions driven by the SVG height and width attributes. The face is constructed entirely through D3’s `select`, `arc`, and transition methods, rendering in a React environment without external data.

Sep 19, 2020

Shapes with SVG and CSS

This example demonstrates how SVG shapes can be styled using both inline attributes and external CSS. Rectangles, circles, lines, and paths are rendered inside a single SVG canvas, with some shapes colored via attributes like `fill` and `stroke`, while others inherit styling from CSS class selectors. The code uses React for structure, plain HTML for the markup, and a linked stylesheet to apply stroke properties to grouped line elements. Notably, the `transform` attribute scales and translates groups to reposition shapes without altering their original coordinates.

Sep 19, 2020