Adrianna87

@Adrianna87·5 public vizzes

Aggregating Data With React & D3 (skipped ahead)

This example shows a horizontal bar chart of the top 10 baby names from an 1880 dataset, with each bar’s length scaled to the name’s frequency. It uses React’s `useState` and `useEffect` to asynchronously load CSV data via `d3.csv`, then renders SVG rectangles with `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis. The chart also includes gridlines, tick labels, and axis labels generated from `xScale.ticks()`. The data source is a GitHub Gist, and the visualization updates only after the CSV resolves.

Oct 3, 2022

Loading thumbnail…

Visualizing Data With React & D3

This bar chart visualizes the top ten baby names from an 1880 dataset, loaded via `d3.csv` from a GitHub gist. React manages the component state for loading and rendering, while D3 utilities (`scaleBand`, `scaleLinear`, `max`) compute the scales and axis ticks. The SVG output displays horizontal bars with labeled axes, where each rect’s width reflects name frequency. React’s `useEffect` and `useState` handle data fetching, and the chart updates the visualization once the CSV is parsed.

Oct 3, 2022

Loading thumbnail…

Loading Data With React & D3

This example demonstrates how to integrate D3 data-loading utilities with React state management. The App component uses React’s `useState` and `useEffect` hooks to asynchronously fetch a CSV file of 1880 baby names via `d3.csv`, then stores the parsed result in component state. While the data loads, a “loading…” message appears; once loaded, the `message` utility computes and displays the file size in kilobytes using `d3.csvFormat`. The visualization itself is minimal, focusing on the data-fetching pattern rather than graphical output.

Oct 2, 2022

Loading thumbnail…

Loading Data With Fetch

This example demonstrates the file size of a CSV dataset after it is loaded and parsed. It fetches data from a GitHub Gist containing baby name statistics from 1880, then displays the formatted size in kilobytes within a large text element. The visualization uses D3 version 7.6.1, specifically the `d3.csv` method, to retrieve and parse the data, and `d3.csvFormat` to measure its serialized length. The result is a minimal, text-based output that quantifies the data payload.

Oct 2, 2022

Loading thumbnail…

Smiley Face Part III

A smiley face rendered in SVG via React and D3. The code draws a yellow circular head with black stroke, two eye circles, and an open mouth using a D3 arc path. The face is centered and constructed with coordinates derived from the fixed canvas dimensions. The visualization uses React for component-based rendering and D3’s `arc` function to generate the mouth’s curved shape.

Oct 2, 2022