Joeleen Kado

@JoeleenKado·12 public vizzes

Axes with React and D3

A horizontal bar chart displays the population of the ten most populous countries, with country names on the y-axis and population values on the x-axis. The chart is built with React state managing the data loaded via `d3.csv`, and D3’s `scaleBand` and `scaleLinear` control the positions and lengths of the rectangles. A `d3.axis` style grid of tick lines and labels is manually rendered by mapping over `xScale.ticks()`, while `useEffect` fetches the CSV and slices the first ten rows. The visualization renders as an SVG with margins defined in React.

Mar 4, 2021

Loading thumbnail…

The Margin Convention

This example demonstrates a simple horizontal bar chart of the top ten countries by 2020 population, using data loaded from a CSV file. The chart applies the margin convention, reserving space around the plot area with a 20-pixel margin on all sides. The visualization uses React state to manage the data and renders SVG rectangles, with scales defined by `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis. Population values are parsed from the CSV using D3’s `csv` utility.

Mar 4, 2021

Loading thumbnail…

World Populations

A horizontal bar chart displays the populations of the top ten countries as of 2020, loaded from a CSV file. The chart uses React state to manage the data and renders SVG rectangles whose widths are scaled by population via `scaleLinear` and `scaleBand`. D3’s `csv` utility parses the data, while `max` determines the domain. The bars show a clear ranking, with the longest bar representing the most populous country, and the chart updates once the data loads.

Mar 4, 2021

Loading thumbnail…

render data as a radial burst

A radial burst visualization renders a dataset of CSS Named Colors as a circular pie chart, with each color represented as a wedge emanating from the center. The React application fetches the color data from a CSV file, then uses D3's `pie` layout and `arc` generator to compute the wedge paths, which are drawn as SVG elements with their fills set to the corresponding RGB hex values. The visualization leverages D3 v6 utilities within a React state management system to dynamically load and display the data.

Mar 3, 2021

Loading thumbnail…

Rendering Data with React

This example renders a stacked list of CSS named colors from a CSV file loaded via `d3.csv`. It uses React state and the `useEffect` hook to fetch and store the data, then maps each row to a colored `div` whose background is set from the `RGB hex value` column. The visualization demonstrates a simple React rendering pipeline with D3 utilities for data loading, displaying each color as a horizontal stripe in a 960-pixel-wide column.

Mar 3, 2021

Loading thumbnail…

Loading Data with React and D3

This example displays a text summary of a loaded dataset, showing the number of rows, columns, and file size in kilobytes. The program uses React's `useState` and `useEffect` hooks to manage data loading asynchronously, fetching a CSV of CSS named colors from a GitHub gist via D3's `d3.csv` utility. The resulting message is rendered inside a `<pre>` element, with the D3 `csvFormat` function calculating the byte size. While the page is styled globally, the core visualization is purely textual, contrasting with the commented-out SVG circle markup in the HTML.

Mar 3, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data CSS colors

This example displays summary statistics from a CSV file of CSS named colors, showing the dataset’s row count, column count, and size in kilobytes. It loads the remote CSV using `d3.csv` and formats the output with `d3.csvFormat` to calculate data size. The result appears as large text in a `<pre>` element, updated via the DOM API. React state is noted in the metadata, though the visible implementation relies on D3’s promise-based loading and plain JavaScript DOM manipulation. The code also includes commented alternatives using `fetch` and `d3.csvParse`.

Mar 3, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV file containing CSS named colors using D3’s `d3.csv` utility. It displays the dataset’s basic metrics—row count, column count, and file size in kilobytes—in a large, centered `<pre>` element. The code fetches the remote CSV from a GitHub gist, parses it into an array of objects, and uses D3’s `csvFormat` function to calculate the file size. The implementation relies on D3 v6’s async promise-based API, with a commented alternative showing an equivalent `fetch` and `d3.csvParse` approach.

Mar 3, 2021

Loading thumbnail…

Smiley Face Part 1

A grid of six-by-three smiley faces, each with randomized eye and mouth dimensions, is rendered side-by-side. The React application maps over a `d3.range` array to generate each SVG face, composing reusable components for the background circle, eyes, and mouth. The mouth is drawn using a `d3.arc` path with specified inner and outer radii, while the overall layout is positioned via SVG transforms. Each face’s parameters, such as eye radius and mouth width, vary randomly per instance.

Mar 3, 2021

Loading thumbnail…

Vega-Lite API

This visualization displays the distribution of world religions across countries, using circle size to represent population. Built with the Vega-Lite API, it maps country and religion categories along the axes with a single circular mark per data point. The example demonstrates the library’s fluent interface, registering Vega and Vega-Lite, and applying a dark config for labels and axes. Data is loaded via D3’s `csv` function from a Gist, and the chart auto-fits to the window size with interactive tooltips supplied by the Vega Tooltip handler.

Mar 2, 2021

Loading thumbnail…

Mouse Follower Two

A circle follows the mouse cursor across an SVG canvas, updating its position in real time. The React app tracks mouse coordinates via an `onMouseMove` event handler and stores them in state using the `useState` and `useCallback` hooks. The circle’s `cx` and `cy` attributes are bound to that state, and React re-renders the SVG element on every move. The example uses React 16.9 and renders directly to the DOM through `ReactDOM.render`.

Mar 2, 2021

Loading thumbnail…

Mouse Follower

An SVG smiley face follows the mouse cursor across a hidden-overflow canvas. The face is built from React components for the background circle, eyes, and mouth, with a d3.arc path generating the curved smile. A range of 18 faces is rendered, each with randomized stroke widths, eye offsets, eye radii, and mouth dimensions, producing a playful, shifting expression as the pointer moves. The composition uses static SVG elements and React’s component model to assemble the graphic.

Mar 2, 2021