Skip to main content
Log in
J

Janet Li

@janetxinli·16 public vizzes

Loading thumbnail…

World Map

This example renders a world map using D3’s `geoNaturalEarth1` projection and `geoPath` to draw SVG paths for landmasses, country borders, and the sphere outline. Data comes from the World Atlas TopoJSON file via `topojson.feature` and `topojson.mesh`, loaded asynchronously with `json()` into React state. The map fills land in teal, strokes interior borders in a lighter shade, and uses a light gray background for the ocean.

Aug 25, 2021
Loading thumbnail…

Working with Time

This example visualizes a week of temperature readings in San Francisco as a smooth line chart, with circular marks highlighting each data point and tooltips revealing the exact timestamp. It uses React to manage component state and render the SVG, while D3 v5 utilities handle data loading, scales, and shape generation. The data is fetched from a CSV file using `d3.csv`, then mapped through `scaleTime` and `scaleLinear` to position points along the time and temperature axes. Curves are drawn with `d3.line` and the `curveNatural` interpolation, and custom React components encapsulate the axes and marks.

Aug 24, 2021
Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes measurements from the classic Iris flower dataset, mapping sepal length on the x-axis and sepal width on the y-axis. Each circle represents an individual flower sample, with axes rendered using reusable React components that leverage D3’s scaleLinear, extent, and tick-generation utilities. The SVG visualization loads data asynchronously via d3.csv within a React useEffect hook, using state to manage the parsed dataset. Styling includes Poppins typography, custom tick colors, and teal marks, with tooltips displaying formatted sepal length values via SVG title elements.

Aug 24, 2021
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 countries by population using D3 scales and React components. The SVG visualization uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the numeric x-axis, and `d3.format` to convert population values into readable billions. Data loads from a CSV of UN population estimates via `d3.csv`, with React hooks managing asynchronous state. Each bar includes a native SVG `<title>` tooltip showing the formatted value, with styled axes using Poppins typography.

Aug 15, 2021
Loading thumbnail…

Refactored Bar Chart

This example shows a horizontal bar chart of the top 10 countries by 2020 population, as listed in the UN Population 2019 CSV dataset loaded via D3’s `csv` utility. The React component uses `scaleBand` and `scaleLinear` to map country names and population values to the SVG viewport, with the bars rendered as `<rect>` elements in `Marks.js`. The axis components `AxisBottom` and `AxisLeft` reuse D3’s scale functions directly, while React state managed by `useState` and `useEffect` handles asynchronous data loading.

Aug 15, 2021
Loading thumbnail…

Axes with React & D3

A horizontal bar chart displays the ten most populous countries from the 2020 UN Population dataset, loaded via `d3.csv`. The React component manages the fetched data with `useState` and `useEffect`, then renders SVG bars sized by `scaleLinear` and positioned by `scaleBand`. Axis ticks are generated manually by mapping over `xScale.ticks()` and `yScale.domain()`, with labels and lines drawn as React elements, demonstrating D3 scales and the React-D3 integration pattern.

Aug 14, 2021
Loading thumbnail…

Margins and Axes

This example visualizes the top 10 countries by 2020 population as horizontal bars, using D3 scales to map country names and population values to screen positions. The React component loads the data via d3.csv, stores it with useState, and renders an SVG with rect elements inside a translated group to respect the margins. It uses d3.scaleBand for the categorical y-axis and d3.scaleLinear for the quantitative x-axis, demonstrating a minimal margin-and-axes layout without labeled ticks.

Aug 14, 2021
Loading thumbnail…

Making a Bar Chart with React & D3

This example shows a horizontal bar chart of the top 10 most populous countries in 2020, rendered as SVG rectangles. React manages the loading state and data via `useState` and `useEffect`, while D3 utilities handle data fetching with `d3.csv`, quantitative scaling with `scaleLinear`, and categorical positioning with `scaleBand`. The chart updates once the CSV data from a GitHub gist is loaded, mapping each country’s population to a rectangle width in a fixed 960×500 viewport.

Aug 14, 2021
Loading thumbnail…

Rendering Data with React & D3

This example renders a donut chart of CSS named colors, with each slice sized equally and filled using the color’s hex value from a CSV dataset. The code combines React state and hooks—`useState`, `useEffect`, and `useCallback`—with D3 utilities `csv`, `pie`, and `arc` to load data and compute path geometries. SVG paths are generated inside a React component, while the chart is centered via a `<g>` transform. Loading feedback displays the text "Loading..." until the CSV arrives.

Aug 14, 2021
Loading thumbnail…

Fork of Rendering Data with React & D3

This example renders a radial burst of CSS named colors as an SVG, with each color represented by a slice of a pie chart. The code loads color data from a CSV file using D3’s `csv` utility, then uses React’s `useState` and `useEffect` hooks to fetch and store the data. D3’s `pie` and `arc` generators compute the slice geometry, while React maps each data entry to a colored `<path>` element. The visualization demonstrates a hybrid approach where D3 handles data loading and layout calculations, and React manages the DOM rendering.

Aug 14, 2021
Loading thumbnail…

Vega-Lite API Template

This example demonstrates a bar chart that visualizes the relationship between automobile model year and horsepower, colored by country of origin. Built with the Vega-Lite API, it uses `vl.markBar()` to encode data through the `vl.x()`, `vl.y()`, `vl.color()`, and `vl.tooltip()` channels. The visualization loads automotive data from a CSV file via `d3.csv`, and integrates with `vega-tooltip` for interactive hover details, with custom styling applied through a configuration object.

Jun 4, 2021
Loading thumbnail…

Loading Data with React & D3

This example demonstrates how to load and display CSV data in a React component using D3 utilities. It fetches a dataset of CSS named colors from a GitHub gist via `d3.csv`, stores the result in React state with the `useState` and `useEffect` hooks, and shows a summary of the data—file size in kilobytes, row count, and column count—rendered as text within a `<pre>` element. The SVG output is commented out, so the visualization focuses on the data-loading workflow.

Jun 3, 2021
Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v5, displaying summary statistics about the dataset. A large text area shows the file size in kilobytes, the number of rows, and the number of columns from a CSV file containing CSS named colors. The code uses the `d3.csv` function with a Promise-based `.then()` method, and also includes commented-out alternatives using the Fetch API with `async` and `await`, as well as the `d3.csvParse` function for manual text parsing.

Jun 3, 2021
Loading thumbnail…

Mouse Follower

A yellow circle follows the mouse cursor, moving responsively across a full-window SVG canvas. The React-based application uses the `useCallback` hook to refine mouse-move event handling and `ReactDOM.render` to update the circle’s position. It relies on SVG’s `onMouseMove` event and absolute coordinates via `clientX` and `clientY` to track pointer movement. The visualization demonstrates a minimal, real-time interactive pattern with no external data source.

Jun 3, 2021
Loading thumbnail…

Let's Make a Face Part II

This example demonstrates a minimal React application that renders a static "Hello world" heading, serving as a preliminary step toward a smiley face visualization. The code initializes a React component using the React and ReactDOM libraries, specifically calling `ReactDOM.render` to mount the component into the page's root element. The page loads React 17.0.2 from a CDN and hides overflow, while the JavaScript file logs "hello" to the console before outputting the heading. The visualization does not yet include any drawing or data, only the foundational structure for future development.

Jun 1, 2021
Loading thumbnail…

Smile

This example shows a simple smiling face made of three circles: a large yellow circle for the head and two smaller black circles for the eyes, all drawn on a 960 by 500 SVG canvas. The page uses raw SVG elements within an HTML document, setting a yellow fill and black stroke for the face via inline attributes. The minimal styling hides body margins and prevents scrolling, ensuring the graphic fills the viewport without interaction or animation.

May 31, 2021