Jordy S

@sahitj001·4 public vizzes

Fork of D3 Starter

This example demonstrates a minimal D3.js version 7 application that replaces the body text with the message “Hello D3 version 7.” The code imports the `select` function from D3 and uses it to target the HTML body element, setting its text content. The page is styled with a large centered font size, and the visualization relies on the D3 library loaded from the unpkg CDN along with a separate `bundle.js` file. No data source or chart elements are present; it serves purely as a template for starting D3 projects.

Nov 9, 2021

Loading thumbnail…

Untitled

This example shows the total parking capacity per province, sorted from highest to lowest, using a bar chart. The visualization uses D3.v6 to load the data from a JSON URL, nest and roll up the records by province, and sum the capacity values. Axes and bars are updated dynamically via `d3.axisBottom`, `d3.axisLeft`, and `d3.descending`, with the SVG output rendered in a 960x500 canvas.

Jan 28, 2021

Loading thumbnail…

barchart

This example visualizes a dataset of parking data as an animated bar chart, revealing how values change over time as new data points are sequentially added. It uses D3 v6 within a React-free environment, rendering to SVG. The code creates a bar chart with axes, using D3's scaleBand and scaleLinear, and animates the chart by replaying the data in expanding slices via setTimeout. The chart fetches its data from a GitHub gist URL and updates the bars’ heights and positions accordingly.

Jan 25, 2021

Loading thumbnail…

HTML Starter

This example renders a bar chart of garage capacities by province inside an SVG element. It loads JSON data from a GitHub gist using D3’s `json` function, then maps capacity values to bar widths with `scaleLinear` and province names to vertical positions via `scaleBand`. The code demonstrates a minimal HTML/CSS/JavaScript setup with D3 v6, though the y-axis scale is configured but not fully applied, leaving bars unpositioned vertically.

Nov 25, 2020