Linn

@LXFRY·11 public vizzes

Bowl of Fruit - General Update Pattern

This example demonstrates the general update pattern in D3, showing a bowl of fruit where apples shrink and disappear, one transforms into a lemon, and a second apple is removed. Circles animate their radius over 1000 milliseconds using `transition().duration()`, with color and size scales defined via `scaleOrdinal()`. The visualization uses SVG, communicates state changes through enter, merge, and exit selections, and is driven by `setTimeout()` events in the JavaScript file.

Oct 21, 2019

Loading thumbnail…

World Population Area Chart

This area chart displays world population growth over time, with the x-axis representing time and the y-axis showing population in billions. The chart uses D3 v5's `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to generate a smooth, maroon-filled path beneath the population trend line. Axes are rendered with `axisBottom` and `axisLeft`, including gridlines and custom tick formatting that converts billions from 'G' to 'B'. The data comes from a CSV file loaded via D3's `csv` method.

Oct 21, 2019

Loading thumbnail…

A week in San Francisco

This line chart visualizes one week of temperature in San Francisco, using data from the Data Canvas - Sense your city project. It shows a smooth area chart of temperature readings over time, with axes labeled for year and population. The visualization uses d3.area, d3.scaleTime, and d3.scaleLinear, rendering as SVG. Data is loaded via d3.csv from a remote URL, and the chart includes gridlines, tick labels, and axis titles.

Oct 21, 2019

Loading thumbnail…

A week in San Francisco

This visualization shows a week of temperature readings in San Francisco, plotted as a smooth line chart with time on the x-axis and temperature in Celsius on the y-axis. The data comes from the Data Canvas - Sense your city dataset. Using D3 v5, the code employs `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes, while a line generator with `curveBasis` creates the curved path. Grid lines and axis labels are styled via SVG elements, with the chart rendered entirely in SVG.

Oct 20, 2019

Loading thumbnail…

Cars Scatter Plot

This scatter plot shows the relationship between horsepower and weight for 398 cars from the UCI Machine Learning Repository's Auto MPG data set. The visualization uses a D3.js v5 SVG renderer with a linear scale for both axes, positioning red, semi-transparent circles to represent each car. The code employs D3's `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `csv` functions to load the data from a remote CSV file, calculate the domains, and render the axes with tick marks and axis labels.

Oct 20, 2019

Loading thumbnail…

Cars Scatter Plot

This scatter plot from the UCI Machine Learning Repository Auto MPG dataset visualizes the relationship between car horsepower and weight. Each red, semi-transparent circle represents a car, with position determined by linear scales mapping horsepower to the x-axis and weight to the y-axis. The SVG rendering uses D3 v5 functions including `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct the axes with descriptive labels. The visualization includes a title and uses D3's `csv` method to load and parse the data before rendering.

Oct 20, 2019

Loading thumbnail…

Google Search for Hate Crime

This visualization shows Google search popularity for “hate crime” across the months of 2019, with each circle representing a weekly data point plotted by month and popularity value. The scatterplot uses D3 v5’s scaleLinear, axisBottom, and axisLeft to construct axes, while CSV data from the FBI’s Hate Crime Statistics Program is loaded via d3.csv. Circles are rendered as SVG elements with forest green fill and partial opacity, and the chart includes labeled axes and a title.

Oct 17, 2019

Loading thumbnail…

Car Scatter Plots

This scatter plot displays the relationship between horsepower and weight for cars from the auto-mpg dataset. Each circle represents a vehicle, with horsepower plotted on the x-axis and weight on the y-axis, using D3.js version 5. The visualization uses d3.csv to load data, d3.scaleLinear for both axes, and d3.axisBottom and d3.axisLeft to render axes with grid lines. Circles are appended as SVG elements with a forest-green fill and 50% opacity. The chart includes labeled axes and a title, with margins creating space for the text elements.

Oct 17, 2019

Loading thumbnail…

Customizing Axes

This example displays a horizontal bar chart of the female population as a percentage of the total, using 2018 World Bank data for ten countries. The chart customizes both axes by removing their domain lines, formatting the x-axis ticks as percentages, and adding axis labels. It uses D3 v5’s `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and `axisBottom` and `axisLeft` to render the ticks and grid lines.

Oct 15, 2019

Loading thumbnail…

Bar Charts

This horizontal bar chart visualizes the female percentage of total population for selected countries in 2018. The chart uses a linear scale for population values and a band scale for country labels, with axis functions `axisLeft` and `axisBottom` generating the grid. Data is loaded from a CSV using `d3.csv`, and each bar is rendered as an SVG rectangle. The source is World Bank staff estimates based on United Nations Population Division data, styled with forest green fills.

Oct 15, 2019

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in the center of an SVG canvas, with a black-outlined circle, two eyes, a nose, arched mouth, and pair of rectangular eyebrows. The eyebrows animate upward and then back down in a looping sequence. Built with D3.js v5, the example demonstrates fundamental DOM manipulation using selection and append methods, along with the `arc` generator to create the mouth and nose, and `transition` with `duration` to move the eyebrow group. No external data is used; all shapes are coded directly.

Oct 13, 2019