parkypoo

@parkypoo·10 public vizzes

Bowl of Fruit - General Update Pattern

Five apples rendered as SVG circles in a bowl demonstrate D3’s general update pattern. The code uses `d3.scaleOrdinal` for color and radius, binding fruit data to circles via `selectAll` and `data`. A `setTimeout` removes the last apple, while another changes the third apple to a lemon, triggering enter, update, and exit selections with `circles.enter()`, `circles.attr`, and `circles.exit().remove()`. The visualization shows how D3 handles dynamic data changes smoothly.

Dec 20, 2020

Loading thumbnail…

World Population Area Chart

This world population area chart visualizes global population growth from historical data spanning multiple centuries. The visualization employs D3.js with an SVG rendering approach, using d3.area with curveBasis to create a smooth filled region, d3.scaleTime for the temporal x-axis, and d3.scaleLinear for the population y-axis. The chart includes gridlines, axis labels, and a title, with population values formatted in billions using D3's format function. The data comes from a CSV file loaded via d3.csv, showing population counts per year from 1960 to 2015.

Dec 16, 2020

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart displays temperature readings in San Francisco over time, using a smooth filled area to emphasize the range between the temperature values and the baseline. The visualization loads data from a CSV file and renders it as an SVG using D3 v5, with `d3.area` and `curveBasis` generating the curved path. Axes are created with `d3.axisLeft` and `d3.axisBottom`, while `d3.scaleTime` and `d3.scaleLinear` map the temporal and temperature domains to pixel coordinates. The chart includes labeled title, axis labels, and gridlines.

Dec 15, 2020

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart displays daily temperatures in San Francisco over time, with a smooth curve plotted using D3 v5’s `line` generator and `curveBasis`. The visualization renders as an SVG, using `scaleTime` and `scaleLinear` for axes, with gridlines via `axisLeft` and `axisBottom`. Data comes from a CSV file loaded through D3’s `csv` function, with timestamps parsed as dates and temperatures as numbers. Styling via external CSS sets the stroke color and font sizes.

Dec 15, 2020

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars in the Auto MPG dataset from the UCI Machine Learning Repository. Red semi-transparent circles represent individual vehicles, revealing a positive correlation where heavier cars tend to have higher horsepower. The visualization uses d3.csv to load the data, d3.scaleLinear for both axes, and d3.axisLeft and d3.axisBottom with custom tick formatting. Grid lines extend across the plot, with styled axis labels and a title rendered as SVG text.

Dec 12, 2020

Loading thumbnail…

Scatter Plot

This scatter plot displays the population of the ten most populous countries, with each circle positioned along the y-axis by country and the x-axis by population value. It uses d3.csv to load the data, then d3.scaleLinear and d3.scalePoint to map population and country names to positions. The visualization includes axes with tick marks, a title, and uses SVG rendering with circles styled via CSS. Data is formatted using d3.format, and axes are created with d3.axisLeft and d3.axisBottom.

Dec 10, 2020

Loading thumbnail…

Customising Axes

A horizontal bar chart displays the ten most populous countries using data from a CSV file. Population values are formatted with D3's `format` shorthand, converting gigabytes to billions (e.g., "1.41B"). The chart uses `scaleLinear` for the x-axis and `scaleBand` for the y-axis. D3's `axisBottom` and `axisLeft` generate custom axes, with grid lines and tick styling, all rendered as SVG.

Dec 9, 2020

Loading thumbnail…

Making a Bar Chart

This bar chart displays the number of cats owned by each person, with names on the y-axis and the cat count on the x-axis. Each bar’s length corresponds to the numeric value from the CSV data. Built with D3 version 5, the visualization uses `d3.select`, `d3.csv`, `d3.scaleLinear`, and `d3.scaleBand` to map data to SVG rectangles, with `d3.axisLeft` and `d3.axisBottom` for labeled axes. The bars are styled via CSS with a steelblue fill and black stroke.

Dec 9, 2020

Loading thumbnail…

Making a Bar Chart

A horizontal bar chart displays the population of the ten most populous countries, using data from a CSV file. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` for the x-axis population values and `scaleBand` for the categorical y-axis countries. Axes are generated with `axisLeft` and `axisBottom`, while bars are appended as SVG `rect` elements with a steelblue fill and black stroke.

Dec 8, 2020

Loading thumbnail…

Let's make a face with d3.js

This example builds a stylized yellow face from basic SVG shapes using D3 v5. The face features animated eyebrows, eyes, and an arc-based mouth, all centered within an SVG canvas. The eyebrows transition vertically via `transition().duration(2000)` to create a subtle bobbing motion, while the mouth is drawn using the `arc()` generator. The code uses `select()` to manage SVG elements and demonstrates ES6 module imports for structured D3 code.

Dec 6, 2020