AD-W99

@AD-W99·7 public vizzes

Fork of Making a Bar Chart

This chart displays the top 10 most populous countries using vertical bars, with population values from the 2018 estimate in United Nations: World Population Prospects 2017. It uses D3 v5's `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render an SVG bar chart, with custom tick formatting that converts billions to abbreviated labels. The chart demonstrates axis customization by removing gridlines and domain paths, and labels the x-axis "Population." Data is loaded from a CSV file and processed by multiplying population values by 1000.

Oct 10, 2022

Loading thumbnail…

Rendering Data with React

This example demonstrates how React and D3 work together to render a dataset as a pie chart. The visualization shows all named CSS colors as equal-sized slices arranged in a ring, with each slice filled using its corresponding hex value from a CSV file. The code uses React’s `useState` and `useEffect` hooks to load the data with D3’s `csv` utility, then maps over the parsed rows to generate SVG `<path>` elements. The pie layout and arc generator (`d3.pie` and `d3.arc`) compute the angles and paths for each slice.

Sep 20, 2022

Loading thumbnail…

Loading Data with React & D3

This example demonstrates how to load and display external data in a React component using D3 utilities. It fetches a CSV file containing CSS named colors from a GitHub gist, then shows a brief summary message about the loaded data—including its size in kilobytes, row count, and column count. The React `useState` and `useEffect` hooks manage the data-loading lifecycle, while `d3.csv` and `d3.csvFormat` handle parsing and formatting the data, with the final result rendered as SVG.

Sep 20, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting engine displacement against horsepower with points colored by origin and sized by weight. The visualization is built using the Vega-Lite API, which registers Vega and Vega-Lite libraries and renders an SVG chart via the vega-tooltip handler for interactive tooltips. Data is loaded asynchronously with d3.csv from a Gist, while the chart encodes quantitative fields for axes and sizes. The code also applies a custom configuration for axis styling and font readability.

Sep 20, 2022

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates the process of loading a CSV file and parsing it into a structured dataset using D3 v7. The page fetches a remote CSV file containing CSS named colors via the Fetch API, then parses the text with `d3.csvParse`. It displays the raw file size in kilobytes, the number of rows, and the number of columns as plain text on the page. The code highlights the asynchronous flow of retrieving and processing tabular data without any chart or visual rendering.

Sep 17, 2022

Loading thumbnail…

Mouse Follower

A yellow circle follows the mouse cursor across a blank SVG canvas. The example demonstrates mouse tracking in React by updating the circle’s center coordinates on every pointer move. It uses React’s `useState` and `useCallback` hooks, with the `onMouseMove` event handler reading `clientX` and `clientY` from the event object to re-render the circle. The SVG is rendered via ReactDOM, and the initial circle position is centered within a 960×500 viewport.

Sep 17, 2022

Loading thumbnail…

Let's Make a Smiley Face

A modular React component renders an SVG smiley face from parameterized properties like radius, eye offset, and mouth width. The face uses a yellow background circle, two black eyes, and a mouth drawn with D3's `arc` path generator. Layout is handled by the `FaceContainer`, which translates a group centered on the SVG. The example demonstrates composition and reusability, with each facial feature isolated in its own file, and requires no external data source.

Sep 15, 2022