parsonsdjp

@parsonsdjp·9 public vizzes

Fork of Customizing Axes

This fork of a bar chart customization example displays the 2018 population estimates for the ten most populous countries, sourced from the United Nations World Population Prospects. The chart uses D3 v5 to render an SVG, with a linear scale mapping population counts to bar widths and a band scale for the categorical country axis. Axis customization is evident through styled tick marks, labels, and formatting via the `axisLeft`, `axisBottom`, and `format` APIs.

Jan 4, 2023

Loading thumbnail…

Fork of Rendering Data with React & D3

This example shows a radial burst of CSS named colors loaded from a CSV file, with each color represented as a slice of a pie chart rendered as SVG. React manages the component state and lifecycle, fetching the data with `d3.csv` and storing it via the `useState` and `useEffect` hooks. D3’s `pie` generator and `arc` function compute the slice angles and path geometry, while React maps each data point to a `<path>` element filled with the color’s hex value. The visualization uses D3 v5 and React 16.9.

Dec 28, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot visualizes the relationship between engine displacement, acceleration, and weight for various car models, with color encoding for cylinder count. The visualization is built using the Vega-Lite API, a high-level grammar for declarative graphics, which is registered with the underlying Vega and Vega-Lite rendering engines. Data originates from the UCI Machine Learning Repository's Auto MPG dataset, loaded via d3's csv function. The chart renders as an SVG, and includes interactive tooltips via the Vega-Tooltip library, with custom styling applied through a configuration object.

Dec 26, 2022

Loading thumbnail…

Loading Data with React and D3

This example demonstrates how to load data with D3 utilities and manage it through React state. The application uses React’s `useState` hook to store data that has been fetched, while D3’s `d3.min.js` library is included for data processing and visualization utilities. The rendering is done as an SVG element, with a commented-out example showing multiple circles that could be displayed. The React DOM renders the main component into the HTML root element, and the data is initially set to `null` before being populated.

Dec 26, 2022

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote URL using the fetch API and D3.js. It displays the file size in kilobytes, the number of rows, and the number of columns parsed from the CSS named colors dataset. The code uses `fetchText` to retrieve the CSV as text, then `d3.csvParse` to convert it into a structured data object with accessible columns. The resulting summary appears in a large HTML `<pre>` element.

Dec 25, 2022

Loading thumbnail…

Mouse Follower

A yellow circle follows the cursor across an SVG canvas, updating its center position in real time as the mouse moves. The visualization uses React's state management with an `onMouseMove` event handler to track client coordinates, while D3.js provides the SVG rendering environment. The circle's position is bound to the mouse coordinates via React's `useState` and `useCallback`, creating a direct one-to-one mapping between input and visual output.

Dec 25, 2022

Loading thumbnail…

Interactions with React

A yellow smiley face is rendered across the full browser window using React and SVG. The face is built from three circles: a large yellow head with a black stroke, and two smaller eyes positioned symmetrically. The code defines the dimensions and offsets as constants and constructs the SVG elements declaratively with JSX. ReactDOM renders the component into a root div, with the layout based on the window’s width and height rather than any external data.

Dec 24, 2022

Loading thumbnail…

Smiley Face Part 1

A grid of fifteen smiley faces, each with a yellow circular head, black-outlined stroke, two eyes, and an arched mouth, is rendered using React and SVG. The faces are generated programmatically with random values for stroke width, eye offset, eye radius, and mouth dimensions, creating subtle visual variety across the grid. The code imports `arc` from `d3` to construct the mouth path and uses `range` from `d3` to create the array of faces.

Dec 24, 2022

Loading thumbnail…

Cars Report

This example displays a single car make, "Honda," extracted from a hard-coded JSON array of five vehicles. It demonstrates loading D3 and local ES6 modules, then uses `document.getElementByID` to write the message into a preformatted HTML element. The data is parsed with `JSON.parse` from the `cars.js` module and rendered as plain text.

Dec 22, 2022