Skip to main content
Log in
I

Ian Russell

@ITRussell·9 public vizzes

Loading thumbnail…

Bowl of Fruit- General Update Pattern

This example demonstrates the general update pattern for adding, modifying, and removing SVG elements. It uses d3.select and d3.range along with a custom fruitBowl function that merges enter and exit selections for circles and text. The code drives a sequence of timed changes—removing a fruit, changing an apple to a lemon, and deleting another—while using scaleOrdinal for color and radius mapping.

Feb 16, 2021
Loading thumbnail…

World Population Area Chart

This area chart visualizes global population growth from historical data, showing population values on the y-axis and years on the x-axis. The chart fills the area under the curve with a maroon path, using a basis curve for smoothness. Built with D3 v5, it employs `scaleTime` and `scaleLinear` for axes, `area` with `curveBasis` for the shape, and `axisBottom`/`axisLeft` for ticks. The data, sourced from a CSV of world population by year, is loaded via `csv` and processed before rendering to SVG.

Feb 16, 2021
Loading thumbnail…

Temp in San Francisco Area Chart

This area chart displays a week of temperature data in San Francisco, using a smooth, curved line to trace the changing values over time. The visualization encodes time on the x-axis and temperature in Celsius on the y-axis, with axis gridlines and labeled ticks providing context. Built with D3 v5, the code uses `d3.scaleTime`, `d3.scaleLinear`, `d3.axisLeft`, `d3.axisBottom`, and a `d3.area` generator with `d3.curveBasis` to render the path. The data comes from the Data Canvas - Sense Your City dataset, loaded via CSV.

Feb 16, 2021
Loading thumbnail…

Temp in San Francisco Line Chart

This line chart displays one week of temperature data in San Francisco, sourced from Data Canvas - Sense Your City. The visualization plots temperature in degrees Celsius over time, with a smooth curve connecting the data points. Built using d3.v5, the code employs `d3.scaleLinear`, `d3.scaleTime`, `d3.axisLeft`, and `d3.axisBottom` to construct the axes, while `d3.line` with `d3.curveBasis` generates the smoothed path. The SVG rendering includes axis labels, grid lines, and a title, with data loaded from a CSV file.

Feb 16, 2021
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars, with each circle representing a vehicle from the auto-mpg dataset. The visualization uses D3 v4's `scaleLinear`, `axisLeft`, and `axisBottom` to construct the axes, while `csv` loads the remote data. SVG circles are rendered with a steelblue fill and partial opacity, and grid lines are generated through tick sizing. Axis labels and a title are added using SVG text elements, with the chart drawn inside a margin-based layout.

Feb 16, 2021
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the populations of the ten most populous countries, with each circle positioned along the y-axis by country and the x-axis by population. It uses d3.scaleLinear and d3.scalePoint to map data from a CSV file, and renders axes with d3.axisLeft and d3.axisBottom. The SVG output includes grid lines, a title, and axis labels, with population formatted in billions.

Feb 11, 2021
Loading thumbnail…

Customizing Axes

This example displays a horizontal bar chart of the world’s ten most populous countries, using population data from a CSV file rendered as SVG. It demonstrates customizing D3 v4 axes by removing domain lines and tick marks, applying a tick format that abbreviates large numbers with `d3.format`, and adding custom axis labels and a title. The chart uses `d3.scaleLinear` and `d3.scaleBand` for positioning, with styled tick text and gridlines defined in CSS.

Feb 11, 2021
Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart of country populations, ordered from largest (China) to smallest (Mexico). Using d3.csv to load data.csv, d3.scaleLinear and d3.scaleBand map population values and country names to SVG rectangles, with d3.axisLeft and d3.axisBottom rendering labeled axes. The chart demonstrates reusable margin conventions and data-join patterns for creating bar charts with SVG.

Feb 11, 2021
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example shows a simple cartoon face built from SVG shapes, including a yellow circle, eyes, animated eyebrows, and a mouth drawn with an arc path. The eyebrows move up and down repeatedly using D3 v4 transitions that alter their transform attribute. The code uses D3 selections, the `arc` function for the mouth, and SVG elements such as `circle`, `rect`, and `path`, with styling applied via a linked CSS file. Rendering is done entirely in SVG with no external data source.

Feb 11, 2021