Malcolm Mead

@mmn11·26 public vizzes

react html menus

A React component uses the `useState` hook and a reusable `Dropdown` component to render an HTML `<select>` menu for choosing a pet. The dropdown maps over a static array of pet options, displaying each as an `<option>` element. The selected value updates the React state and is logged to the console, while the `onChange` event handler triggers the state change. The example combines React 17, ReactDOM, and a minimal amount of D3 v7 for the page setup.

Jan 22, 2022

Loading thumbnail…

react starter

This example demonstrates a minimal React application that renders a simple "Hello" message inside a full-screen div. It integrates React 17 and D3 v7 via UMD scripts, using ReactDOM.render to mount the component into a root element. The code shows a basic setup for embedding D3 within a React component structure, with no data visualization or dynamic behavior beyond the static text output.

Jan 22, 2022

Loading thumbnail…

react starter code

This example demonstrates a minimal React starter template for integrating D3.js visualizations. It renders a simple array of "Hello" text elements using React’s `ReactDOM.render` method, with a full-screen layout that hides page overflow. The code loads React 17, ReactDOM, and D3 v7 from CDN links, though it does not yet utilize any D3-specific visualization functions. The primary purpose is to provide a blank canvas for building interactive charts or graphs within a React component structure, using the `root` div as the mounting point.

Jan 22, 2022

Loading thumbnail…

react d3 world map

This example renders a natural Earth projection world map using React and D3 v7. It displays landmasses in teal, country borders as interior lines, graticules, and a blue sphere background, all drawn as SVG paths via `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.geoGraticule`. Geographic data comes from the World Atlas TopoJSON dataset, processed with TopoJSON’s `feature` and `mesh` functions. The React component loads the data asynchronously and conditionally renders the map once available.

Jan 22, 2022

Loading thumbnail…

react time line chart styled

This interactive visualization displays temperature readings over time as a smooth line chart with circular markers, rendered as SVG within a React application. The chart uses d3.scaleTime for the x-axis and d3.scaleLinear for the y-axis, with d3.line and curveNatural generating the smoothed path. Built with React 17 and D3 v7, the code loads temperature data from a CSV file via d3.csv, and includes tooltips on hover for each data point using SVG title elements.

Jan 21, 2022

Loading thumbnail…

react time scatter chart styled

This example presents a time-based scatter chart of San Francisco temperature data, plotting temperature values against timestamps. The visualization uses D3 version 7 for scales, CSV data loading, and time formatting, while React 17 handles component rendering, producing SVG output. The chart employs separate axis components for the left and bottom tick marks, along with circular marks that display tooltips on hover. The data comes from a week_temperature_sf.csv file hosted on GitHub. Styling includes custom tick coloring, green bars (though unused in this chart), Lato font, and axis labels for both time and temperature.

Jan 21, 2022

Loading thumbnail…

line chart react

This example demonstrates a minimal React application that loads a CSV file containing CSS named colors from a remote URL using the `d3.csv` function. The page displays a loading message while the data is being fetched, and the React component manages the asynchronous state with `useState` and `useEffect`. The visualization also includes a yellow background circle with a black stroke, rendered as a React component. The code uses ReactDOM to render the app, and the `message.js` module calculates and formats statistics about the loaded CSV data, such as byte count, number of rows, and number of columns.

Jan 21, 2022

Loading thumbnail…

react scatterplot iris data

This interactive scatterplot visualizes the Iris dataset, plotting sepal width against petal length for individual flowers. Each point is rendered as a circle using React components that leverage d3.scaleLinear for x and y positioning, with d3.extent determining the domain. The visualization includes axes generated by custom AxisBottom and AxisLeft components, plus formatting via d3.format. Data loads asynchronously from a CSV using d3.csv within a React hook, and tooltips display formatted values through SVG title elements.

Jan 20, 2022

Loading thumbnail…

stylizing of componentizing react bar 2 margins w/ axis

A React application renders a horizontal bar chart of world population data from a CSV file, showing the top ten countries by 2020 population. The visualization uses a d3.scaleBand for the y-axis and d3.scaleLinear for the x-axis, with SVG rendering. The code employs React components to structure the axes and bars, and d3.csv for data loading. Axis tick labels are formatted using d3.format to convert values into Billions, and hover tooltips display the population values via SVG title elements.

Jan 19, 2022

Loading thumbnail…

componentizing react bar 2 margins w/ axis

This example shows a horizontal bar chart of the top 10 countries by 2020 population, rendered as SVG using React components. It demonstrates how to decompose a visualization into reusable pieces: the bottom axis, left axis, and bars are each separate React functions. The code uses D3's `scaleBand` for the categorical country axis and `scaleLinear` for the continuous population axis, with data fetched from a CSV URL. The margins and inner plot area are explicitly calculated, and the axes are drawn with white gridlines and blue text labels.

Jan 19, 2022

Loading thumbnail…

react bar 2 margins w/ axis

This example displays a horizontal bar chart of the top 10 countries by population for 2020, loaded from a CSV file via `d3.csv`. The visualization uses React with hooks (`useState`, `useEffect`) to manage the asynchronous data loading and render the SVG. D3’s `scaleBand` and `scaleLinear` position the bars and axes, while gridlines and tick labels are generated using `xScale.ticks()`. The chart is drawn inside an SVG with explicit margins, and text elements for the country labels are styled with a blue stroke.

Jan 19, 2022

Loading thumbnail…

Fork of Fork of react bar 2 margins

This bar chart displays the top 10 countries by 2020 population from a UN dataset, using a horizontal bar layout with yellow circular background elements. The React application fetches CSV data via d3.csv, scales the bars with d3.scaleLinear and d3.scaleBand, and renders the SVG inside a viewBox with margins. The visualization loads using React 17, D3 v7, and includes a background circle component that acts as a decorative frame.

Jan 18, 2022

Loading thumbnail…

Fork of react bar 2

This example shows a horizontal bar chart ranking the top 10 countries by 2020 population, with bars drawn as SVG rectangles inside a React component. The chart uses `d3.csv` to load UN population data from a gist URL, then transforms it with `scaleBand` for the y-axis and `scaleLinear` for the x-axis. The React app manages the data asynchronously via `useState` and `useEffect`, rendering a loading message until the data arrives. The visualization is a simple one: yellow bars extend from the left, sized proportionally to each country’s population.

Jan 18, 2022

Loading thumbnail…

bar chart

This bar chart displays the top 10 countries by 2020 population, with horizontal bars encoded by length and ordered by country name. The visualization uses React to manage state and render SVG elements, while D3 v7 handles data loading via `csv()` and scales through `scaleBand` and `scaleLinear`. Population data comes from a UN gist CSV file. Loading text appears until data arrives, and the chart currently lacks axis labels or text annotations.

Jan 18, 2022

Loading thumbnail…

react pie chart

This visualization displays a full-screen pie chart that assigns each CSS named color an equal slice, arranged around a bright yellow circle with a black outline. Built with React and D3 v7, the chart loads data from a CSV file of CSS color names and uses the `pie()` layout generator alongside the `arc()` generator to compute slice angles and paths. Each slice is filled with its corresponding CSS color hex value, with all slices rendered as SVG paths within a React component using state and effects.

Jan 18, 2022

Loading thumbnail…

Fork of load data d3 react

This example renders a simple cartoon face composed of SVG shapes, assembled through React components for the background circle, eyes, and mouth. The face geometry is driven by parameters like eye offset, radius, and mouth width, with the mouth drawn using a D3 arc generator. The page also loads CSS named color data from a CSV via D3's CSV parser, though the data is only used to update a loading status message. React manages the component hierarchy, while D3 provides the arc path and data fetching utilities.

Jan 18, 2022

Loading thumbnail…

react d3 state example

This example shows a React application that fetches CSS named colors from a CSV file and renders them as a vertical stack of 900-pixel-wide horizontal bands, each colored by its corresponding RGB hex value. The visualization uses React’s `useState` and `useEffect` hooks to load data asynchronously via d3’s `csv` function, mapping each row to a styled `div`. A separate `BackgroundCircle` component (not used in the main view) defines a yellow circle with black stroke, while the `message.js` module computes data statistics. The page is styled with a large `pre` element as a placeholder.

Jan 18, 2022

Loading thumbnail…

bar chart react

This example shows a React component that loads CSS named color data from a CSV file using d3.csv, then displays a text summary of the dataset’s size, row count, and column count. The visualization renders within a React app using ReactDOM.render, while the data fetching and parsing are handled by the useEffect hook. The code includes a BackgroundCircle component that draws a yellow circle with a black stroke using SVG circle attributes, though the main user interface displays only a loading message or the text summary.

Jan 17, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This example demonstrates a scatter plot of automobile data, mapping miles per gallon and horsepower with point size reflecting mpg and color indicating origin. The visualization uses the Vega-Lite API to declare the chart specification, with D3.js loading the CSV dataset from a GitHub gist. Rendering is handled by Vega and Vega-Lite, while Vega Tooltip provides interactive hover details. The chart fills the viewport, and custom axis, label, and title styling improve readability against the dark text on a light background.

Jan 17, 2022

Loading thumbnail…

vega lite example

This example displays a large, centered “Hello HTML!” message on a blank page, demonstrating basic web layout with CSS. The page uses an HTML structure with a styled `<div>` element, setting its font size to 13em and centering it horizontally. No JavaScript libraries or data sources are included; the visualization relies solely on static HTML and CSS markup to render text.

Jan 17, 2022

Loading thumbnail…

circle following cursor

A yellow circle with a black outline follows the cursor across a blank SVG canvas. The circle’s position is updated on mouse movement using React state and the `onMouseMove` event handler. The visualization is built with React 17 and D3 v7, rendering SVG elements directly. The code uses `useState` and `useCallback` to track and set cursor coordinates, demonstrating interactive data-driven updates without any external dataset.

Jan 16, 2022

Loading thumbnail…

load data d3 react

This example demonstrates how to load CSV data from a remote URL using D3’s `csv` method and display a loading status in a React component. The code fetches a dataset of CSS named colors and updates the UI text from “loading” to “loaded” once the data arrives. The visualization renders SVG elements—a yellow face with eyes and a mouth—built from reusable React components like `Face`, `BackgroundCircle`, and `Mouth`, which uses `d3.arc` to draw the mouth path. The app relies on React 17 and D3 v7.

Jan 16, 2022

Loading thumbnail…

Loading data with react & d3

A smiley face rendered as SVG is built from React components for the background circle, eyes, and mouth. The mouth is generated using the d3 `arc` function to create a path. The example demonstrates a modular approach to composing SVG elements, with React managing the component hierarchy and d3 providing geometry. The code imports React and uses `ReactDOM.render` to mount the application, while the page includes a video embed. The data loading aspect is not implemented, as the app renders a static face.

Jan 14, 2022

Loading thumbnail…

Fork of Loading and parsing data

This example demonstrates two methods for loading and parsing a CSV file containing CSS named colors. The page displays byte counts, row counts, and column counts from the dataset in large text. One method uses `d3.csv` to fetch and parse the data asynchronously, while the other uses the browser’s native `fetch` API with `d3.csvParse` to handle the raw text. Both approaches output the same summary statistics, highlighting the equivalence between D3’s convenience wrapper and lower-level parsing.

Jan 14, 2022

Loading thumbnail…

Loading and parsing data

This example demonstrates how to load and parse a CSV file using the Fetch API in a minimal HTML page. The code fetches a remote CSV containing CSS named colors from a GitHub gist and logs the raw text response to the browser console. It also includes a commented-out alternative approach using chained promises. No data visualization is rendered; the focus is purely on the asynchronous data-loading pattern.

Jan 14, 2022

Loading thumbnail…

Fork of Hello HTML

The visualization renders a yellow, smiling face composed of SVG circles and a d3.arc path, repeated one hundred times across the viewport via a React component map. Each face uses props like `centerX`, `eyeOffsetX`, and `mouthRadius` to position its features, with the background circle, eyes, and mouth assembled from separate React components. The code imports React, ReactDOM, and d3's `range` and `arc` functions, and draws using SVG elements within a FaceContainer that applies a translation transform.

Jan 14, 2022