jordancampbell23

@jordancampbell23·7 public vizzes

Axes with React & D3

This example shows a horizontal bar chart of the ten most populous countries in 2020, rendered as SVG elements. React manages the component state and renders each bar as a `<rect>`, while D3 utilities handle data loading with `d3.csv` and scaling with `scaleBand` and `scaleLinear`. The data comes from a UN population dataset hosted as a CSV file. The chart updates reactively when the asynchronous data fetch completes, displaying a loading message until then.

Dec 11, 2021

Loading thumbnail…

The Margin Convention

A bar chart displays the ten most populous countries for 2020, using horizontal bars to compare their population values. The visualization loads CSV data from a GitHub repository and renders it as SVG rectangles. React manages the application state and renders the chart, while D3 utilities handle data loading, scaling, and layout computation. The code explicitly defines margins for the chart area and uses D3’s linear scale for the population axis and band scale for country labels.

Dec 11, 2021

Loading thumbnail…

Fork of Rendering Data with React & D3 II

This radial burst visualization displays all CSS named colors as a circular pie chart, with each slice filled using its corresponding hexadecimal RGB value from the loaded dataset. The example demonstrates integrating React with D3 by using D3 utilities to fetch and parse the CSV data from a GitHub Gist, while React handles the component state and rendering of SVG output. The code specifically employs `d3.csv`, `d3.arc`, and `d3.pie` to compute the arc paths, then maps each data row to a `<path>` element within an SVG group centered on the canvas.

Dec 10, 2021

Loading thumbnail…

loading_data

This example demonstrates how to fetch a CSV file from a remote GitHub repository using the Fetch API. The page loads a population dataset for COVID-19 analysis, retrieves the raw text response, and logs the contents to the browser console. No external visualization libraries are used; the focus is solely on the asynchronous data-loading step, showing the raw comma-separated values before any parsing or chart rendering occurs.

Dec 10, 2021

Loading thumbnail…

Fork of Fork of Smiley Face Part #4

This example displays a smiley face rendered as an SVG graphic, composed of an orange background circle, black eyes, and a mouth formed by a D3 arc path. The React components structure the scene, while D3’s `arc` API generates the mouth’s curved shape using specified inner and outer radii and angles. The face is centered within a 960 by 500 viewport, with all elements positioned via translated SVG groups and fixed coordinate offsets defined in the primary `App` component.

Dec 10, 2021

Loading thumbnail…

Fork of Smiley Face Part #2

This example shows a stylized smiley face built with SVG, featuring an orange circular head, two black eyes, a red nose, and a mouth drawn as a thick arc. The face is centered using a D3 arc generator to create the mouth path, while React manages the component structure. The visualization uses D3 v7 and React 17, with all elements positioned relative to the center of a 960x500 SVG canvas.

Dec 10, 2021

Loading thumbnail…

Smiley Face Part #1

A single orange circle with a black outline forms the face, and two smaller black circles act as eyes, creating the upper half of a smiley face. The example uses raw SVG elements inside an HTML document, with `circle` tags and explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes to position and style each shape. The static composition is defined directly in the markup, with no JavaScript or external libraries, and the canvas is set to 960 by 500 pixels.

Dec 10, 2021