davidpiber

@davidpiber·12 public vizzes

Cars scatter plot

This scatter plot displays the relationship between horsepower and weight for a dataset of cars, sourced from an auto-mpg CSV file. Each car is represented as a semi-transparent red circle, with its position determined by these two quantitative variables. The visualization uses D3 v5, specifically the `scaleLinear`, `axisBottom`, and `axisLeft` APIs to construct the axes and grid lines, while the SVG rendering is handled through the D3 `select` and `append` methods. Axis labels and a title are styled via CSS, and the data values are coerced to numeric types before being plotted.

Feb 9, 2020

Loading thumbnail…

Bown of fruit general update pattern - D3.js

This example demonstrates the D3 general update pattern by showing a row of five red circles that represent apples. When one apple is removed from the data array after a one-second delay, the visualization updates to remove the corresponding circle from the SVG. The code uses `selectAll('circle').data(fruits)` to bind the fruit array, then applies the enter and exit selections to add and remove circle elements. Rendering uses the `d3.select` API with SVG circles positioned along the x-axis.

Nov 25, 2019

Loading thumbnail…

Les make a face with D3.js

This example builds a cartoon face using D3.js v5, rendering SVG shapes for the head, eyes, eyebrows, nose, and mouth. The face is centered and composed with circles, rectangles, lines, and an arc-generated path, all styled with static fills and strokes. The animation is driven by chained `transition().duration()` calls on the eyebrows group, which moves it up and down repeatedly. The code imports `select` and `arc` from the D3 module, and uses the SVG element’s width and height attributes to position the face.

Nov 25, 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 representing population in billions. The chart uses a filled area path to emphasize the magnitude of population change. Built with D3 v5, it loads data from a CSV file and uses `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and the `area` generator with a basis curve to render the SVG. Axis grid lines and labels are styled via CSS, with tick labels formatted to abbreviate large numbers.

Nov 22, 2019

Loading thumbnail…

Temperature in San Francisco Area chart

An area chart displays temperature in San Francisco over time, with a filled maroon region under a smooth curve. The visualization loads CSV data asynchronously via `d3.csv()`, parsing timestamps and numeric temperatures. It uses `d3.scaleTime()` and `d3.scaleLinear()` for axes, `d3.area()` with `curveBasis` for the smoothed shape, and `d3.axisBottom()` and `d3.axisLeft()` for labeled ticks.

Nov 22, 2019

Loading thumbnail…

Temperature in San Francisco Line chart

This visualization displays temperature measurements in San Francisco over time, using a line chart where the x-axis represents time and the y-axis represents temperature. The chart is rendered as an SVG using D3 v5, with the data loaded from a CSV file containing timestamp and temperature values. The visualization leverages D3’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `line`, and `curveBasis` APIs to create the axes and smooth the line path. Grid lines extend across the plot via negative tick sizes, and the title and axis labels are added as text elements, all styled with large fonts for readability.

Nov 22, 2019

Loading thumbnail…

Temperature in San Francisco Scatter plot

This scatter plot displays temperature readings in San Francisco over time, with each circle representing a data point and steelblue fill. The x-axis is labeled "Time," and the y-axis is labeled "Temperature." The visualization is built with D3 v5, using `scaleTime` for the time-based x-axis, `scaleLinear` for the y-axis, and `axisBottom`/`axisLeft` for grid lines and tick marks. Data is loaded from a CSV file hosted on vizhub.com, parsed into date and numeric temperature values, and rendered as SVG circles.

Nov 22, 2019

Loading thumbnail…

Customizing Axes

This example shows the distribution of the top ten most populous countries using a Cleveland dot plot. D3’s `scaleLinear` and `scalePoint` calculate the x and y positions for the circles, while `axisBottom` and `axisLeft` render the chart’s axes. The code customizes axis ticks by removing their domain lines, applying a custom formatter that converts billions to 'B', and extending tick lines across the plot. Data is loaded from a CSV file using `d3.csv`, and the SVG output is styled via CSS.

Nov 19, 2019

Loading thumbnail…

Scatter plot

This scatter plot displays the population of ten countries as horizontal bars, with each country’s name on the y-axis and its population value on the x-axis. The visualization uses d3.csv to load the data, d3.scaleLinear for the x-axis, and d3.scaleBand for the y-axis. It renders SVG rectangles, with axes generated via d3.axisLeft and d3.axisBottom, and applies a 1000 multiplier to the raw population numbers during data formatting.

Nov 19, 2019

Loading thumbnail…

Making a bar chart with D3.js

This example displays a horizontal bar chart of population counts for ten countries, using data loaded from a CSV file. The chart maps population values to bar widths with `d3.scaleLinear` and country names to vertical positions with `d3.scaleBand`, rendering axes via `d3.axisLeft` and `d3.axisBottom`. Bars are drawn as SVG rectangles with a steelblue fill, and the population values are multiplied by 1000 during data parsing. The visualization is built entirely with D3.js v5, using its `select`, `csv`, and scale APIs.

Nov 19, 2019

Loading thumbnail…

Making a bar chart with D3.js

Nov 18, 2019

Loading thumbnail…

Hello VizHub

This example displays a static greeting, “Hello David,” centered on a dark blue background using a large Ubuntu font. It demonstrates how to combine ES6 modules with D3.js v5, importing a custom message from a separate file and using D3’s `select` method to update the DOM. The page loads D3 from a CDN and applies styling through an external CSS stylesheet.

Nov 16, 2019