Noelle Huchette

Stylized Scatter

A stylized scatter plot of the Iris dataset displays sepal length against sepal width, with each flower as a fixed-radius circle colored in purple. The visualization is built with React and rendered as SVG, using D3 v5 scales (scaleLinear) and axis components to generate ticks and labels. The code loads data asynchronously via d3.csv, and the minimalist styling includes a custom Poppins font, muted axis lines, and centered axis labels.

Jan 15, 2023

Stylized Refactor REAxes

This example shows a horizontal bar chart of population data for the top 10 countries in 2020, using React state management with hooks to load and render the data. The visualization displays country names on the y-axis and population values on the x-axis, with formatted tick labels converting large numbers to abbreviations like “1.5B.” The code leverages D3 v5 APIs including `scaleBand`, `scaleLinear`, `csv`, and `format`, while rendering SVG elements through React components. Styling uses a custom Poppins font and muted colors, with data sourced from a CSV of the UN Population 2019 dataset.

Refactor REAxes

This example shows a horizontal bar chart of population data for ten countries, with labeled axes and rectangular marks scaled by population values. The visualization uses React components to render SVG elements, leveraging D3’s `scaleBand` and `scaleLinear` for positioning and scaling. Axes are custom-built from D3 ticks and domain mappings, while data is loaded asynchronously from a CSV file via D3’s `csv` function. The chart updates reactively through React state management, with a loading message displayed until the dataset arrives.

REAxes

This interactive bar chart displays population projections for the top ten countries in 2020, using data from the UN Population 2019 dataset. Built with React and D3 v5, the visualization renders SVG elements and uses React state to manage data loading. The code leverages D3's `scaleBand` and `scaleLinear` for axes and scaling, while the chart updates dynamically when the data is fetched from a CSV URL.

MARGIN

This bar chart displays the top 10 countries by 2020 population, drawn as horizontal rectangles scaled by population. The visualization uses D3 v5 (via `d3.csv`, `d3.scaleBand`, `d3.scaleLinear`, and `d3.max`) to parse the UN Population 2019 CSV data and compute the scales. React manages the chart's state with `useState` and `useEffect`, rendering the SVG elements dynamically. The margin constant (50 pixels on each side) offsets the plot area from the window edges, and the chart fills the entire browser viewport.

Fork of Render Data with React & D3

This example shows a horizontal bar chart of the top 10 countries by 2020 population, rendered as SVG rectangles sized by population. The app uses React state and hooks to fetch a CSV from a gist, parse it with `d3.csv`, and map the data to scales via `d3.scaleBand` and `d3.scaleLinear`. The chart updates reactively when data loads, displaying a simple loading message until then.

Render Data with React & D3

This example renders a donut chart of named CSS colors using React and D3. It loads color data from a CSV file via `d3.csv`, then uses `d3.pie` and `d3.arc` to generate SVG paths. React’s `useState` and `useEffect` hooks manage the asynchronous data loading, displaying a loading message until the data arrives. Each color is represented as a slice filled with its corresponding hex value from the dataset.

MouseFollower

A black circle follows the mouse cursor across a full-screen SVG canvas. The visualization uses React with the `useState` and `useCallback` hooks to track the cursor's `clientX` and `clientY` coordinates on every `mousemove` event. The current mouse position is stored in state and then passed as the circle's `cx` and `cy` attributes, causing the shape to render at the cursor's location at all times. The code relies on ReactDOM to mount the component, while the initial position is set to the center of the window.

Load and Parse CSV

This example demonstrates loading and parsing a CSV file using JavaScript, displaying a simple HTML page with a large message. The code references a URL variable for fetching the CSV data, though the actual parsing logic is not shown in the visible snippet. It uses vanilla HTML, CSS, and JavaScript, with the page structure defined in index.html and styling for the message element. The example serves as a minimal foundation for incorporating external data into a web visualization, likely intended for use with frameworks like React as noted in the accompanying documentation.

Fork of React Starter

A grid of 24 randomly generated cartoon faces fills the screen, each rendered as an SVG component with yellow rounded-rectangle heads, eyes, and curved arcs for mouths. The faces vary in eye position, eye radius, mouth radius, and mouth width through randomized properties. Built with React and D3 v7, the visualization uses D3's `arc` generator for mouths and `range` to create the array of face instances, with reusable React components composing the outer face container, bone shape, eyes, and mouth.

Fork of HTML Starter

This example displays a static SVG smiley face composed of three circles: a large yellow outline for the head and two smaller black circles for eyes. The code uses plain HTML and CSS, with the scalable vector graphic elements (`circle`) defined directly in the markup. The `overflow: hidden` style removes scrollbars, and the canvas is fixed at 960 by 500 pixels. No JavaScript or external libraries are involved, making it a minimal demonstration of inline SVG structure and basic shape styling.

Fork of Let's Make a Face Part I

This visualization shows the first step in constructing a smiley face, with a large yellow circle forming the head and two smaller circles placed as eyes, all rendered as basic SVG shapes. The page uses raw SVG markup within an HTML document, specifying exact coordinates for circle centers and radii, with the head positioned at (480, 250) and eyes at (350, 180) and (600, 180). The JavaScript-free approach relies entirely on SVG's native circle element, with stroke and fill attributes defining the visual style.