dmagarian

@dmagarian·7 public vizzes

Visualizing Data with React and D3 - Bar Chart Margin Convention

This example demonstrates a horizontal bar chart that displays the top 10 countries by population in 2020, sourced from a UN Population CSV file. The visualization uses React to manage state and render SVG elements, while D3’s `scaleBand` and `scaleLinear` handle the categorical and quantitative scales. The chart applies the margin convention by translating a `<g>` element based on defined margins, ensuring proper spacing around the plotting area. Data is loaded asynchronously using D3’s `csv` function and rendered dynamically once fetched.

Nov 1, 2021

Loading thumbnail…

Visualizing Data with React and D3 - Bar Chart

This bar chart visualizes the top 10 countries by population for 2020, using data from a UN Population CSV file. It combines React with D3, where React manages the component state and rendering of SVG elements, while D3’s `scaleBand`, `scaleLinear`, and `max` functions handle the chart’s scaling and domain calculations. The chart displays horizontal bars representing each country’s population, with the bar width proportional to the population value. Data is loaded asynchronously via `d3.csv` and statefully updated using React hooks.

Nov 1, 2021

Loading thumbnail…

Visualizing Data with React and D3

This visualization displays the CSS named colors as a donut chart, with each color represented by a wedge whose fill matches the color it encodes. The data comes from a CSV file listing named colors and their hex values, loaded asynchronously via `d3.csv`. React manages the component state and rendering lifecycle, while D3’s `pie` and `arc` functions compute the angular layout and path geometry. The SVG output is generated declaratively in JSX, with React re-rendering once the CSV data arrives.

Nov 1, 2021

Loading thumbnail…

Loading Data with React and D3

This example demonstrates how React and D3 can work together to load and display tabular data. It uses the `csv` function from D3 to fetch a remote dataset containing CSS named colors and then presents a summary of the data in a plain text format. The `useState` and `useEffect` hooks manage the asynchronous data loading, while a custom function calculates the file size in kilobytes, row count, and column count. The visualization renders as SVG within a React component, showing only the file's metadata rather than the color values themselves.

Nov 1, 2021

Loading thumbnail…

Loading CSV Data

This example demonstrates how to load and summarize a CSV file from a remote URL using D3 v7. It fetches data containing CSS named colors and displays three metrics in a large text block: file size in kilobytes, row count, and column count. The code uses the `d3.csv` method to parse the data and `d3.csvFormat` to calculate its string length for size estimation. Results are inserted into the page via the DOM API `textContent`.

Nov 1, 2021

Loading thumbnail…

Mouse Follower

A circle inside an SVG follows the mouse cursor in real time. The visualization tracks pointer coordinates and updates the circle's position instantly. Built with React and D3 v7, the app uses the `onMouseMove` event and the `useState` hook to store and render the cursor's `clientX` and `clientY` values. The circle's radius is fixed at 30 pixels.

Oct 31, 2021

Loading thumbnail…

Fork of Hello HTML

This example renders a cartoon face composed of SVG shapes in a React component hierarchy. It uses D3's `arc` generator to draw the mouth and passes numeric props from a top-level `Face` component down to `BackgroundCircle`, `Eyes`, and `Mouth`. The face is centered with a yellow background circle, two black eyes, and a curved smile. The React app mounts to a div and renders the face into an SVG container with a fixed width and height.

Oct 31, 2021