blenderenderer

Temperature in San Francisco Area Chart

This area chart shows a week of temperature readings in San Francisco, with time on the x-axis and degrees Celsius on the y-axis. The data comes from the Data Canvas - Sense Your City project. Built with D3 v6, it uses `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and an `area` generator with `curveBasis` to render the smooth maroon filled path. CSV loading via `d3.csv` and a styled SVG render the chart.

Bowl of Fruit - General Update Pattern (Labeled & Animated)

A bowl of fruit demonstrates D3's general update pattern for handling data joins, showing apples and lemons entering, exiting, and updating their position and radius with animated transitions. The visualization uses `d3.scaleOrdinal` for color and size mapping, along with `selection.merge()` and `transition.duration()` to smoothly shift elements. JavaScript timers trigger state changes—removing an apple, swapping an apple for a lemon, and filtering the dataset—while SVG groups, circles, and text labels update accordingly.

Bowl of Fruit - General Update Pattern (Labeled)

This example demonstrates the general update pattern for animated data visualizations, showing a bowl of fruit that changes over time through a scripted sequence of events. Apples and lemons appear as colored circles, with each fruit type distinguished by its color and size. The visualization first renders five apples, then removes one, changes another into a lemon, and finally deletes a remaining apple. The implementation uses the d3 selection API with `selectAll`, `enter`, `merge`, and `exit` methods to handle dynamic data updates, while `scaleOrdinal` maps fruit types to visual properties. All rendering occurs as SVG elements within an HTML page.

Bowl of Fruit - General Update Pattern (Animated)

This example demonstrates the D3 general update pattern through an animated bowl of fruit. As the data changes over time, exiting circles shrink and are removed, entering circles grow from radius zero, and existing circles smoothly transition to new positions. The visualization uses d3-selection’s `.data()`, `.merge()`, and `.exit()` methods with `transition().duration(1000)` to animate changes. A custom `fruitBowl` module applies `scaleOrdinal` color and radius scales, mapping apples to red and lemons to yellow, while the script modifies the fruit array at timed intervals.

Let's make a face with D3.js!

A yellow smiley face is built entirely from SVG shapes, with D3.js selecting the root `<svg>` element and appending circles, rectangles, and a path for the mouth. The eyebrows are two rectangles that animate vertically using chained `transition().duration()` calls, moving up and then back down repeatedly. The face is centered via a translated `<g>` group, and the mouth is generated with the `arc()` helper from D3's `d3-shape` module. The code relies on D3 v6 and plain DOM manipulation without any external data source.

World Population Area Chart

This area chart visualizes world population from 1950 to 2015 using a smooth, filled curve. The chart highlights population growth over time, with a maroon area beneath the line and labeled axes for year and population count. Built with D3 v6, it uses `d3.csv`, `scaleTime`, `scaleLinear`, `area` with `curveBasis`, and `axisBottom`/`axisLeft` to render an SVG. Data comes from the UN World Population Prospects 2017 dataset.

Temperature in San Francisco Line Chart

This visualization displays a week of temperature data for San Francisco as a smooth, maroon line chart. Temperatures fluctuate between roughly 17 and 27 degrees Celsius, showing clear daily cycles. The chart is rendered as an SVG using D3 v6, employing `scaleTime` and `scaleLinear` for axes, and `line` with `curveBasis` for the smoothed path. Data is loaded from a local CSV file via the `csv` function, with axis labels and a title included.

Temperature in San Francisco Scatter Plot

This scatter plot visualizes one week of hourly temperature readings in San Francisco, showing temperature trends over time. It uses a time-scaled x-axis and a linear y-axis to map temperature in degrees Celsius. The D3 v6 code leverages `scaleTime`, `scaleLinear`, `axisLeft`, and `axisBottom` to construct the chart. Each data point is rendered as a steelblue circle, with data sourced from the Data Canvas - Sense Your City initiative and parsed from a CSV file.

Cars Scatter Plot

This scatter plot displays the relationship between horsepower and weight for cars using data from the UCI Machine Learning Repository. Red semi-transparent circles represent each vehicle, with axes labeled and tick marks showing grid lines. The visualization uses D3 v6 with SVG rendering, employing `scaleLinear` for both axes, `axisBottom` and `axisLeft` for ticks, and `csv` to load the auto-mpg dataset. A title, "Cars: Horsepower vs Weight," appears above the plot.

Auto MPG Summary

This example displays a text-based summary of the Auto MPG dataset, showing the row count, column count, and file size, followed by the first 10 rows formatted as JSON. The code uses d3.csv to load the data from a CSV file and d3.csvFormat to calculate its size in kilobytes. The visualization is rendered as plain text in a terminal-style interface with a black background and green monospace font via D3’s select and append methods. Data originates from the UCI Machine Learning Repository.

Scatter Plot

This scatter plot displays the population of the top 10 most populous countries using 2020 estimates from the United Nations World Population Prospects. Each country is represented by a circle positioned along a linear x-axis for population and a point scale y-axis for country names. The code uses d3.csv, d3.scaleLinear, d3.scalePoint, d3.axisBottom, and d3.axisLeft to render SVG elements. Axes feature customized tick formatting with d3.format, converting numbers to billions, and grid lines extend across the chart.

Customizing Axes

This bar chart displays the top 10 most populous countries based on 2020 estimates from the United Nations World Population Prospects. It demonstrates D3 axis customization by removing default domain lines and tick lines from the y-axis, adding a custom x-axis with tick marks that extend across the chart, and formatting tick labels to abbreviate large numbers using a custom function that replaces 'G' with 'B'. The SVG rendering uses `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom` from D3 v6.

Making a Bar Chart

This bar chart displays the 2020 population estimates for the top 10 most populous countries, sourced from the United Nations World Population Prospects 2019. It shows the population values along the x-axis and country names on the y-axis. Built with D3 v6, the visualization uses `d3.scaleLinear` for the population scale, `d3.scaleBand` for country positioning, and `d3.axisLeft` and `d3.axisBottom` for customized axes. Data is loaded via `d3.csv` and rendered as SVG rectangles.

Shapes with SVG and CSS

This example shows how SVG shapes and CSS can be used to create a static composition of circles, rectangles, lines, and a path, with varied fill colors, stroke widths, and group transforms. The graphic renders directly in the browser via inline SVG markup within an HTML document, using the `<circle>`, `<rect>`, `<line>`, and `<path>` elements. CSS styles the `.lines` class to apply black strokes and a purple stroke to the path, while inline attributes control shape positions and fills. No JavaScript or external libraries are required, relying solely on native SVG and CSS styling.

Jan 26, 2021

HTML Cars Report

A minimal HTML document renders a plain-text car report as a bulleted list of three vehicles, each with a model year, make, model, and price. The first entry, a 2012 Nissan Leaf, is visually emphasized in red via a CSS class. Styling relies on a linked `styles.css` file that sets a large monospace font and applies the red highlight, while the page structure uses standard HTML `<h1>` and `<ul>` elements. No JavaScript libraries or data-loading APIs are involved.

Jan 26, 2021