L

Lisa Wagner

@lisawagner·20 public vizzes

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart visualizes the top ten countries by population using data from the UN Population 2019 CSV file. The horizontal bars are rendered as SVG rectangles, with a linear scale mapping population values to bar widths and a band scale positioning the discrete country categories vertically. Tooltips display formatted population values, while axis labels and ticks are generated using D3's scale API and React components. The chart uses the Poppins typeface and a custom color palette, with axis formatting converting values to billions.

Loading thumbnail…

Simple Interactive Color Legend

This interactive scatter plot visualizes the Iris Dataset using React and SVG, with D3 scales for positioning and color encoding. The legend lists species names as colored circles, and hovering over a legend item triggers a fade effect that dims all non-matching data points while keeping the selected species fully opaque. The chart uses `scaleOrdinal` for categorical colors and `scaleLinear` for axes, with the hover state managed via React's `useState` hook.

Loading thumbnail…

Polished Scatter Plot with Menus and Color

This interactive scatter plot visualizes the Iris dataset, showing relationships between four flower measurements with points colored by species. Users can switch the X and Y axes via dropdown menus powered by ReactDropdown. Built with React and D3 v5, the visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for species colors, and scales computed with d3.extent and d3.nice. SVG circles include tooltip titles, while axis components render ticks and labels.

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, plotted with D3 scales and rendered as SVG circles via React components. Two dropdown menus, built with React state, let users select which of the four flower measurements (sepal length/width, petal length/width) to map to the x- and y-axes, with axis labels updating accordingly. The visualization uses `d3.csv` for data loading, `d3.scaleLinear` for axes, and custom React components for axes and marks, with native SVG `<title>` elements for hover tooltips.

Loading thumbnail…

Menus with React

This example demonstrates how to build an interactive dropdown menu in React that lets users select a pet from a list of six options, with the current selection displayed in a label. The app uses React's `useState` hook to manage the selected value, and a custom `Dropdown` component renders a native HTML `<select>` element with `<option>` children. The component receives `options`, `selectedValue`, and an `onSelectedValueChange` callback, mapping over the options array to generate each choice and conditionally marking the selected one. ReactDOM renders the entire interface to the `#root` element.

Loading thumbnail…

React Starter

This React starter example renders the text “Hello React” directly into a web page. It uses the React and ReactDOM libraries, specifically the `ReactDOM.render` method, to mount a simple functional component into a `div` with the id `root`. The page loads React and ReactDOM from unruly `unpkg` CDN scripts and relies on a separate `bundle.js` file to contain the compiled JavaScript. The example demonstrates a minimal setup for building React-based data visualizations.

Loading thumbnail…

World Map

This example displays a natural Earth projection of the world, highlighting landmasses in teal against a light gray sphere with graticules and country borders. It uses React with D3 v7, employing geoNaturalEarth1 and geoPath to render the map from TopoJSON data loaded from world-atlas. The visualization distinguishes land, interiors, and graticules through styled SVG paths.

Loading thumbnail…

Working with Time

A line chart displays San Francisco’s weekly temperatures over time, with a smooth curve connecting daily readings. The x-axis labels weekdays via a time scale, while the y-axis shows degrees. Built with React and D3 v7, it uses `scaleTime`, `scaleLinear`, and `line().curve(curveNatural)` to render the path. Axes are generated from the `AxisBottom` and `AxisLeft` components, pulling data from a CSV loaded in `useData`.

Loading thumbnail…

Stylized Iris Scatter Plot

This stylized scatter plot visualizes the Iris dataset, plotting sepal length against sepal width for individual flowers. The visualization uses React to render SVG elements, with D3.js v7 functions like `scaleLinear`, `extent`, and `max` to compute scales and domains. Custom axis components generate tick marks and labels, while circle marks display the data points with a tooltip showing formatted values. The plot features a clean design with a Poppins font and muted color palette for the grid lines and data points.

Loading thumbnail…

Axis with React and D3

This example displays a horizontal bar chart comparing the 2020 populations of the top ten countries from a UN dataset, loaded via `d3.csv`. Using React for the user interface and D3's `scaleBand` and `scaleLinear` for axis scaling, the SVG renders tick marks and labels from `xScale.ticks()`. D3's `max` function determines the domain, and React’s `useState` and `useEffect` manage asynchronous data loading, with the bars themselves drawn as `rect` elements.

Loading thumbnail…

The Margin Convention

This example demonstrates the margin convention in D3 by rendering a horizontal bar chart of population data for the top 10 countries from a CSV file. The visualization uses React to manage state and render SVG elements, while D3 utilities (`csv`, `scaleBand`, `scaleLinear`, and `max`) handle data loading and scaling. A fixed margin object creates inner dimensions for the plot area, with bars translated inside a `<g>` element. The chart shows each country's 2020 population as a proportional bar, with axes omitted to focus purely on bar lengths and spacing.

Loading thumbnail…

Fork of Rendering Data with React

This example shows a horizontal bar chart of the top 10 countries by population as of 2020, using React to render SVG rectangles. The chart loads CSV data with `d3.csv` and use `d3.scaleBand` and `d3.scaleLinear` to map countries and population values to screen coordinates. The data is fetched asynchronously via `useEffect`, stored in React state, and displayed after a brief "Loading..." message. React’s `useState` and `useCallback` manage the data flow, while `d3.max` determines the scale domain.

Loading thumbnail…

Fork of Pathetic Bar Chart

This gallery example shows the ten most populous countries as horizontal bars without axes or labels, highlighting only relative population sizes. It loads United Nations population data from a CSV file, sorts by 2020 estimates, and maps each country’s value to a rectangle’s width using D3’s `scaleLinear` and `scaleBand` for positioning. The React component manages state with `useState` and `useEffect`, while rendering SVG rects directly via JSX. D3’s `csv` function parses the remote data, which is then displayed through ReactDOM.

Loading thumbnail…

Rendering Data with React

This example shows a radial burst of colored arcs representing CSS named colors, with each arc assigned the fill color from its corresponding data row. The visualization loads color data from a comma-separated values file using D3’s `csv` utility, then uses D3’s `pie` and `arc` functions to compute the arc paths, while React manages the component state and renders the SVG output. The code relies on React’s `useState` and `useEffect` hooks to asynchronously fetch the data, and the final graphic is drawn as an SVG group translated to the canvas center.

Loading thumbnail…

Loading Data with React and D3

This example demonstrates how to load external data in a React application using D3 utilities. It fetches a CSV file containing CSS named colors via `d3.csv`, stores the result in React state with `useState` and `useEffect`, and displays a summary of the loaded data as text. The summary includes file size in kilobytes, row count, and column count, computed using `d3.csvFormat`. While loading, the view shows a “Loading…” message, and the data is rendered as plain text in an SVG-free layout.

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the world’s top five religions per country using a bubble chart, where circle size encodes population and axes map country and religion. Built with the Vega-Lite API, it loads CSV data via d3.csv, configures axes and tooltips through a custom config object, and renders as an SVG using Vega and Vega-Lite’s runtime. The visualization adapts to the viewport with autosize and includes an interactive tooltip handler from vega-tooltip.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data by fetching a remote file and displaying basic statistics about it. The page shows the file size in kilobytes, the total number of rows, and the number of columns. It uses the D3.js library (v7) with the `d3.csv` method to retrieve the data from a GitHub gist containing CSS named colors, and `d3.csvFormat` to calculate the data length. The results are rendered as text in a `<pre>` element.

Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across an SVG canvas. Built with React and ReactDOM, it uses a state variable to track pointer coordinates and updates a circle's center position on every mouse movement. The SVG element has a fixed width and height, and the circle's radius is set to 40 pixels.

Loading thumbnail…

Smile Part I

A grid of sixteen identical smiley faces, each rendered as a yellow circle with white eyes, black pupils, and a curved mouth, forms a playful pattern. The code builds each face using React components and SVG primitives, with the `arc()` generator from D3 to draw the mouth path. Randomized eye and mouth dimensions slightly vary each face, while the `FaceContainer` component translates the drawing to the center of its viewport.

Loading thumbnail…

Fork of Smile Tweek

This fork of the Smile Tweek example renders a yellow smiley face in SVG using React and D3.js. It combines static circles for the head, eyes, and pupils with a D3 arc path for the mouth, all positioned around a central transform. The code defines geometric constants for offsets, radii, and stroke widths, then uses ReactDOM to mount the chart. It relies on D3’s `arc()` generator for the mouth shape and explicit SVG circle elements for the facial features.