Ashford

@AshMorrocco·5 public vizzes

Fork of Pathetic Bar Chart

A fork of the Pathetic Bar Chart displays the top 10 most populous countries as horizontal bars with no axes or labels, using population data from the United Nations World Population Prospects 2019. The chart renders SVG rectangles via React, with scales created using `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis, and loads the CSV data using `d3.csv`. Loading text appears while the data is fetched asynchronously.

Dec 14, 2021

Loading thumbnail…

Loading Data With React and D3

This example demonstrates how React manages asynchronous data loading and state while D3 performs the visualization. It displays a color wheel pie chart built from CSS named colors fetched from a remote CSV file hosted on GitHub. The `useState` and `useEffect` hooks track the loading state, showing "Loading..." until the data arrives, then passing it to D3's `csv` parser. The visualization uses `d3.arc`, `d3.pie`, and SVG `<path>` elements to render each color as an equal-sized slice of the pie.

Dec 14, 2021

Loading thumbnail…

Iterating with Vega-Lite API

This visualization displays automotive data as a bar chart, encoding horsepower along the x-axis and origin along the y-axis, with tooltips showing vehicle names. Built using Vega-Lite’s API, it leverages the `vl.markBar` and `vl.encode` methods to define the chart structure. The code loads the auto-mpg dataset via D3’s `csv` function, then renders the visualization with Vega-Lite and Vega, applying custom styling for axes and labels. The chart fills the browser window with bar size and opacity specified for readability.

Dec 13, 2021

Loading thumbnail…

Loading and Parsing CSV data

This example demonstrates the basics of loading remote CSV data in D3.js. It displays a summary message showing the file size in kilobytes, the row count, and the number of columns. The code uses the `fetch` API via `d3.csv` to retrieve a CSV file containing CSS named colors from a GitHub gist, then parses it and formats the summary with `d3.csvFormat` and `d3.csvFormat`'s length property. The result is rendered as text inside a `<pre>` element.

Dec 13, 2021

Loading thumbnail…

make face... but in HTML!

This gallery example displays a grid of 18 procedurally generated cartoon faces, each rendered as a yellow circle with black outlines, distinct eyes, and a mouth. Each face is an SVG constructed from React components, including `BackgroundCircle`, `Eyes`, `Mouth`, and `Teeth`, which are composed within a parent `Face` component. The visual variation stems from random values applied to parameters like eye offset, size, and mouth radius. The code leverages D3’s `arc` to draw the mouth arc and D3’s `symbol` with `symbolTriangle` to render the teeth, all positioned through SVG transforms.

Dec 11, 2021