Skip to main content
Log in
J

Jasmine Ye Han

@yhy6f·20 public vizzes

Loading thumbnail…

Responsive Axes

This example demonstrates a reusable chart component that adapts to the full browser viewport, redrawing itself on window resize. It applies the D3.js margin convention to separate the plotting area from axis labels, using `d3.scaleLinear` and `d3.axisLeft`/`d3.axisBottom` to render axes. A rounded rectangle fills the inner chart space, while an event listener triggers the render function to recompute dimensions on every resize.

Feb 19, 2023
Loading thumbnail…

D3 Margin Convention - forked from responsive starter

This example demonstrates the D3 margin convention, a reusable pattern for structuring SVG charts with explicit padding around the plotting area. A component function applies the margin to an SVG, translating a container `g` element and returning the computed inner dimensions. It then renders a single rounded rectangle that fills this inner space, resizing dynamically on window resize events. The code uses D3 v5’s selection methods, including `merge` for efficient updates, and a custom `marginConvention` helper for managing layout.

Feb 19, 2023
Loading thumbnail…

Responsive Starter Code

This responsive starter code demonstrates how to build a D3 visualization that adapts to the browser window’s dimensions. It renders a full-screen SVG containing a single rounded rectangle that resizes along with the viewport. The example uses D3 v5 with a reusable component function, `myResponsiveComponent`, which receives width and height from `document.body.clientWidth` and `document.body.clientHeight`. A resize event listener triggers the `render` function, updating the SVG and rectangle attributes via D3’s data-join and merge pattern, ensuring smooth, unobtrusive resizing without redeclaring elements.

Feb 18, 2023
Loading thumbnail…

Fork of Let's Make a Face Part I - fork to review react

This example shows a smiley face created with SVG circles on a yellow background. The face has two eyes and a black outline, with the shapes positioned using explicit x and y coordinates. The code renders through React, importing the React and ReactDOM libraries, and includes a YouTube video embed. The fork's title suggests it is intended to review how React behaves within this static SVG visualization context.

Dec 21, 2022
Loading thumbnail…

Fork of Loading Data with React & D3

This example displays all CSS named colors as horizontal stacked bars, with each color’s row showing its RGB hex value as the background. It uses React hooks (useState, useEffect, useCallback) to manage asynchronous state, while D3’s csv() function loads color data from a gist-hosted CSV file. The rendering approach maps each data row to a div element, dynamically setting its backgroundColor style from the parsed hex value, with a “Loading…” placeholder shown before data arrives.

Mar 1, 2022
Loading thumbnail…

Fork of Rendering Data with React & D3

This example shows CSS named colors loaded from a CSV file, rendered as a grid of colored square divs. Built with React and D3 v5, it uses `d3.csv` within a `useEffect` hook to fetch the data, then maps each row to a React component with a background color derived from the RGB hex value. A loading message appears until the data arrives.

Mar 1, 2022
Loading thumbnail…

Panda Face: D3 exercise

This example shows a cheerful panda face built as an SVG scene, composed of two ear arcs, black eye patches, eyes with white pupils, a nose, and a two-part curved mouth. The panda is centered within a 960×500 viewport. The visualization is implemented using React for component structure and D3 v5’s `d3.arc()` to generate the ear and mouth path shapes, while circles and ellipses are drawn directly with SVG elements. All shapes are styled with explicit stroke and fill attributes, and the layout is fixed without interactivity or data binding.

Feb 13, 2022
Loading thumbnail…

Rendering Data with React & D3

A radial burst of CSS named colors, loaded from a CSV file via `d3.csv`, is rendered as an SVG pie chart using React. Each color slice is drawn with `d3.arc` and `d3.pie`, with the fill set to the color’s RGB hex value. React manages the component state and lifecycle, displaying a “Loading...” message until the data arrives. The visualization demonstrates a hybrid approach where D3 handles data loading and geometry, while React controls the DOM rendering.

Jan 12, 2022
Loading thumbnail…

Rendering Data with React

This example visualizes CSS named colors as a horizontal stack of colored bars, with each bar representing a row from a CSV dataset loaded via D3’s `csv` utility. The React `useState` and `useEffect` hooks manage asynchronous data loading, initially displaying a “Loading…” message before rendering one colored `<div>` per color entry using inline styles. The app uses ReactDOM to mount the component, while the data source is fetched from a remote gist URL.

Jan 12, 2022
Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot visualizes the relationship between miles per gallon, horsepower, weight, and origin for vehicles from the UCI Auto MPG dataset. The visualization uses the Vega-Lite API with D3.js to load CSV data and render interactive circles with tooltips. Point color encodes the vehicle’s country of origin, while point size reflects weight. The chart is configured to fill the browser window and uses custom axis and label styling for clarity. Data is fetched via d3.csv from a Gist-hosted CSV file.

Jan 6, 2022
Loading thumbnail…

Loading Data with React and D3

This example demonstrates how to load external data in a React application using D3 utilities, displaying the dataset’s size in kilobytes, row count, and column count as formatted text. The code uses React’s `useState` and `useEffect` hooks to manage the asynchronous loading state, while `d3.csv` fetches the CSS named colors dataset from a GitHub gist. The `d3.csvFormat` function calculates the data size for the message. Rendering is handled through React DOM, producing an SVG-backed text output that transitions from a “Loading…” placeholder to the final statistics.

Jan 2, 2022
Loading thumbnail…

Episode 13 & 15: Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data in D3.js, displaying file size, row count, and column count for a dataset of CSS named colors from a GitHub gist. The visualization uses d3.csv to fetch and parse the remote CSV file, then computes and renders the statistics in a large preformatted text element. The code also includes commented alternatives using async/await with fetch and d3.csvParse, though these are not active. The output updates directly to the DOM via innerHTML.

Dec 31, 2021
Loading thumbnail…

Mouse Follower

A React component renders an SVG circle that follows the mouse cursor across a 960-by-500 viewport. The app uses React's `useState` and `useCallback` hooks to track mouse coordinates from the `onMouseMove` event, passing the updated position to the circle's `cx` and `cy` attributes. The visualization demonstrates basic event handling and state-driven SVG rendering in React.

Dec 29, 2021
Loading thumbnail…

Fork of Smiley Face Part V

A grid of eighteen smiley faces, each rendered as a separate React component, shows randomized eye radii and mouth sizes. The faces are composed of SVG circles and an arc-generated mouth path, with the `d3.arc` API computing the curved mouth shape. Each face uses React fragments to group its eyes, and the entire grid is generated by mapping over an array from `d3.range` within a React application.

Dec 21, 2021
Loading thumbnail…

Fork of Smiley Face Part III

A smiling face rendered as a yellow SVG circle with black stroke, two dark eyes, and an arc-shaped mouth, centered on a 960 by 500 canvas. Built with React components and D3 v5, the visualization uses the `arc` generator from D3 to define the mouth path, while the background and eyes are simple `<circle>` elements. All shapes are positioned via a shared coordinate system translated to the canvas center, with props for radius, stroke width, and offsets.

Dec 17, 2021
Loading thumbnail…

Fork of Smiley Face Part IV

A React component renders a yellow smiley face as an SVG graphic, with a black-outlined head, two eyes, and a smiling mouth. The visualization uses D3’s `arc` generator to create the mouth path, while React JSX defines the SVG elements, including a reusable BackgroundCircle component. All shapes are centered via a translated group, with fixed pixel dimensions for the canvas and explicit offsets for facial features.

Dec 17, 2021
Loading thumbnail…

transform question

This example uses React and D3 to draw a smiley face as a set of SVG shapes. D3's `arc` generator creates the mouth and ear paths, while React handles the rendering of circles, ellipses, and paths within a single SVG group transformed to the center of the canvas. The face is composed of yellow-stroked ellipses, grey rotated eyebrows, eyes with white pupils, and a nose, all arranged in a fixed 960x500 viewport.

Dec 16, 2021
Loading thumbnail…

Fork of Smiley Face Part II

This interactive example displays a smiley face that fills the browser window. The face is constructed from SVG shapes, including a yellow circle for the head, two eye circles, and a mouth arc. The code uses React to render the SVG elements and defines the mouth’s shape with the d3.arc function. The face is centered and scaled based on the window’s dimensions, with its position and size recalculated on load.

Dec 15, 2021
Loading thumbnail…

Fork of Hello HTML

A yellow smiley face is drawn with SVG in a React app, centered on a 960 by 500 canvas. The face uses D3's `arc` API to create a mouth path with an inner radius, and the eyes are simple circles. The rendering relies on ReactDOM to mount the component, with the SVG elements dynamically positioned using JavaScript variables for coordinates and dimensions. The code imports `arc` from D3 and uses JSX attributes like `stroke-width` and `transform` to control the visual presentation.

Nov 30, 2021
Loading thumbnail…

Fork of Smiley Face Part II

This example displays a classic smiley face rendered as an SVG graphic, with a yellow circular head, two black eyes, and a curved mouth drawn using an arc path. The visualization is built with React and D3 v7, using the `arc` function to generate the mouth shape from specified inner and outer radii. The face is centered on the screen and dynamically sized based on the browser window dimensions, with all elements positioned relative to the center point. The code defines constants for eye offset, radius, and stroke width to control the facial features.

Nov 30, 2021