Dusty

@DustyBestWondros·10 public vizzes

Axis with React and D3

This example presents a horizontal bar chart of United Nations population data for ten countries, rendered as an SVG. The React app uses a D3 CSV utility to fetch and parse the data, then employs D3’s `scaleBand` and `scaleLinear` to map countries and population values to coordinates. Axis ticks and labels are generated manually via `scale.ticks()`, while D3’s `max` function defines the scale domain. The React component manages state with hooks, rendering all bars and text directly in JSX.

Aug 16, 2021

Loading thumbnail…

The Margin Convention

This example displays a horizontal bar chart of the top 10 most populous countries in 2020, drawing from UN population data loaded via D3’s `csv` utility. React renders an SVG with scaled rectangles, using `scaleBand` for country categories and `scaleLinear` for population values, all positioned within a fixed margin using the `transform` attribute. The code relies on D3 v5 and React’s `useEffect` and `useState` hooks, with the chart’s dimensions computed from explicit top, right, bottom, and left margins to define the inner plotting area.

Aug 16, 2021

Loading thumbnail…

Making a Bar Chart with React & D3

This example shows a horizontal bar chart of the top 10 countries by 2020 population, with each bar representing a country’s estimated population in millions. The visualization is built by combining React for component rendering with D3 utilities for data loading and scales. The code uses `d3.csv` to fetch the dataset, `d3.scaleBand` for the categorical y-axis positioning, and `d3.scaleLinear` for the continuous x-axis range. Bars are rendered as SVG `<rect>` elements inside a React component, with the chart’s width and height fixed at 960 by 500 pixels.

Aug 16, 2021

Loading thumbnail…

Fork of Rendering Data With React D3

This example renders a pie chart of CSS named colors, with each slice filled by the color it represents. The data is loaded from a CSV file via `d3.csv`, and the pie layout is computed with `d3.pie`, while `d3.arc` generates the SVG path geometry. React manages the component state and rendering, producing an `<svg>` element with `<path>` slices. The chart visualizes the distribution of named colors, though the exact proportions depend on the CSV’s row order due to the `.value(1)` setting.

Aug 6, 2021

Loading thumbnail…

Rendering Data With React D3

This example shows CSS named colors loaded from a GitHub Gist as CSV data, rendered as a vertical stack of thin horizontal bars whose background colors match each color’s hex value. Using React 17 hooks (`useState`, `useEffect`) and `d3.csv` for loading, it maps each row to a styled `div` element, displaying a loading message until the data arrives. The code also defines a separate `message` utility that reports the data’s approximate size, row count, and column count using `d3.csvFormat`.

Aug 6, 2021

Loading thumbnail…

Fork of Loading Data With React D3

This example demonstrates how to load and display CSS named colors data using React and D3. It fetches a CSV file with the D3 `csv` utility and stores the result in React state via the `useState` and `useEffect` hooks. While the data is loading, a “Loading...” message appears in a `<pre>` element, but the code does not render the fetched data itself. The project uses React 17 and D3 v7, with a separate `message.js` file that calculates file size, row count, and column count from the data.

Aug 6, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a bar chart of population by country, with bars segmented by religion. The visualization uses the Vega-Lite API to construct the chart, and the Vega and Vega-Lite libraries to render it as an SVG. The data is loaded from a CSV file using d3.csv. The bars are sorted by population in descending order, and tooltips show the population value for each segment. Chart appearance is customized through a configuration object.

Jul 23, 2021

Loading thumbnail…

LoadingData with Fetch, Promises, Async and Await Parsing CSV Data

This example demonstrates the results of loading and parsing a CSV file from a remote URL, displaying the file size, row count, and column count. It uses the D3.js v7 `d3.csv` method to fetch and parse the data. The code also includes commented-out alternatives using native JavaScript `fetch` with promises and async/await, along with `d3.csvParse`, to achieve the same result. The data comes from a gist containing CSS named colors.

Jul 22, 2021

Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across an SVG canvas. React state tracks the pointer position, updating on every `mousemove` event, and re-renders the circle's `cx` and `cy` coordinates accordingly. The example uses React 17 with hooks (`useState`, `useCallback`) and renders through `ReactDOM`. D3 v7 is loaded but not directly used. The SVG has a fixed width of 960 pixels and height of 560 pixels, with the circle initially centered at the canvas midpoint.

Jul 22, 2021

Loading thumbnail…

Fork of Hello HTML

A grid of eighteen randomly configured cartoon faces is rendered as SVG through React. Each face, built from reusable components like `BackgroundCircle` and `Eyes`, uses `d3.arc` for the mouth path. The `index.js` maps over `d3.range(18)` to create the faces, with randomized properties for stroke width, eye offset, and mouth dimensions, all rendered within a fixed 160 by 160 viewport.

Jul 21, 2021