Laura Brown

@lauraliz6·9 public vizzes

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries in 2020 as a bar chart stripped of axes and labels, arranged vertically with bar lengths proportional to population. It loads data from the United Nations World Population Prospects 2019 CSV via `d3.csv`, formats population values, and slices the first ten rows. React manages the loading state and renders SVG rectangles using `scaleBand` for the y-axis positions and `scaleLinear` for bar widths inside a margin-based group.

Feb 6, 2025

Loading thumbnail…

React data

This React and D3 data visualization renders the CSS named colors as a pie chart. It loads color data from a CSV file using `d3.csv`, then maps each color name to a slice of the pie. The chart uses `d3.pie` and `d3.arc` to generate the paths, with each slice filled by its corresponding RGB hex value. The SVG is rendered using React’s `useState`, `useEffect`, and `ReactDOM.render`, creating a dynamic and interactive display.

Feb 6, 2025

Loading thumbnail…

Color wheel

This example visualizes the loading and parsing of a CSV file containing CSS named colors. It displays the file size in kilobytes, the number of data rows, and the number of columns in a large text format. The code uses the JavaScript `fetch` API with `async`/`await` to retrieve the remote CSV, then applies `d3.csvParse` to convert the text into a structured data array. The rendered output updates a `<pre>` element with the summary statistics.

Jan 23, 2025

Loading thumbnail…

Fork of Rendering Data with React & D3

A React application visualizes CSS named colors as a radial burst, where each color appears as a slice or label arranged around a central point. The app loads its dataset from a CSV file of CSS color names using D3’s `csv` utility. React’s `useState` and `useEffect` hooks manage the asynchronous data fetching and rendering. The visualization is built with React components for layout, while D3 v5 handles the data loading, demonstrating a hybrid approach where React owns the DOM and D3 provides data utilities.

Jan 23, 2025

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile performance data from a CSV file, plotting each car’s origin against its horsepower as a scatterplot with semi-transparent circles and tooltips showing the vehicle name. It uses the Vega-Lite API to construct the chart declaratively, with D3’s `csv` function for data loading and Vega-Tooltip for interactive hover details. The code registers Vega and Vega-Lite, then renders the visualization in an SVG view, with custom axis and label styling applied via a shared configuration object.

Jan 23, 2025

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example displays the result of loading and parsing a CSV file containing CSS named colors. It reports the file size in kilobytes, the number of data rows, and the number of columns in a large text output. The code uses the `fetch` API to retrieve the remote CSV text and the `d3.csvParse` function from D3 v5 to parse it into a tabular data structure. The parsed data’s properties are then summarized and rendered within an HTML `<pre>` element.

Jan 21, 2025

Loading thumbnail…

Mouse follower

A React component tracks the mouse position across an SVG canvas and renders a solid black circle that follows the pointer. The application uses React's `useState` and `useCallback` hooks to manage and update the mouse coordinates on every `mousemove` event. The SVG viewport is set to 960 by 500 pixels with a circle radius of 30. The code draws only the moving circle, with no additional data or visual elements beyond the pointer-following behavior.

Jan 21, 2025

Loading thumbnail…

Fork of Hello HTML

This example renders a grid of five smiley faces using React components, mapping over an array to produce each face. The faces are built from modular SVG primitives, including a pink background circle, eyes with layered white highlights, and a mouth drawn with a D3 arc generator. The `arc()` function from d3-shape defines the mouth’s inner and outer radii, corner radius, and start/end angles, while the FaceContainer wraps all elements in a centered SVG group. Each face’s eye radius, mouth radius, and mouth end angle are randomized, producing slight variations across the repeated faces.

Jan 15, 2025

Loading thumbnail…

Fork of Let's Make a Face Part I

This is a static SVG data-visualization that depicts a half-finished smiley face, consisting of a large yellow circle for the head and two smaller circles for eyes, all drawn with the `<circle>` element. The code uses inline SVG within an HTML `index.html` file, with CSS styling to remove page margins and hide overflow. The rendering relies on explicit coordinate attributes, such as `cx`, `cy`, and `r`, to position the shapes. A placeholder YouTube video in the README suggests a tutorial context, but the visualization itself shows no dynamic behavior or data source.

Jan 14, 2025