Skip to main content
Log in
M

mbooch22

@mbooch22·25 public vizzes

Loading thumbnail…

BarChart

This bar chart displays the 2020 populations of the ten most populous countries, with country names on the y-axis and population values on the x-axis. Built with React and D3 v7, it uses `d3.csv` to load data from a GitHub-hosted UN Population dataset and `scaleBand` and `scaleLinear` for positioning. The SVG renders gridlines, tick labels, and rectangles, while a small message function reports the dataset’s file size, row count, and column count.

Jan 12, 2023
Loading thumbnail…

Fork of Rectangles example

This example visualizes a bar chart of items and their prices using D3 and React. The chart uses `d3.scaleBand` and `d3.scaleLinear` to map data to the x and y axes, with SVG `rect` elements drawn for each bar. The y-axis is flipped using a `scale` transform, and axes are rendered via `d3.axisBottom` and `d3.axisLeft`. The code also includes a separate, unreferenced component that would manage circles with `d3.nest` and a `transition` for sorting, though only the bar chart is rendered in the final app.

Jan 9, 2023
Loading thumbnail…

Rectangles example

A bar chart displays stock price values over time, with blue bars for positive values and red bars for negative ones. The bars animate upward from the baseline on load using D3 transitions. Built with React hooks and D3 v5, it uses `d3.scaleTime` and `d3.scaleLinear` for axes, and SVG `rect` elements are appended and transitioned via `transition.attr`.

Jan 6, 2023
Loading thumbnail…

Circles Part3

Three face-like clusters of circles are grouped and then re-sorted into rows by color when a button is clicked. The visualization uses React state to manage the SVG circles, with D3’s `selectAll`, `data`, and `transition` APIs to animate the `cy` attribute over one second. A `d3.nest` key operation groups circles by their color property, and the resulting groups trigger rendering of text labels. The example is built with React 16.9, D3 v5, and renders via SVG.

Jan 5, 2023
Loading thumbnail…

Circles Part2

Ten randomly placed light blue circles animate smoothly across the screen in a full-window SVG. The example uses React state to trigger a D3 v5 transition that shifts each circle horizontally; upon transition completion, new random x-coordinates are generated and the animation repeats. Data binding via `selectAll` and `join` keeps the circles synchronized with the changing state.

Dec 21, 2022
Loading thumbnail…

Fork of Random Circles

This example shows a field of 50 randomly placed circles that drift continuously across the screen through a series of small random steps. Each circle’s position updates on every tick of a d3.timer, while the SVG attributes for cx and cy are rebound to reflect the changing data. The visualization uses D3 v6 for selection, data binding, and animation, with circles styled in steelblue via a CSS class. A React wrapper is present, though the core rendering and movement are handled entirely by the D3 code in circles.js.

Dec 21, 2022
Loading thumbnail…

Fork of Menu Part 2

This example shows 50 randomly positioned and sized circles bouncing horizontally across the full screen, with a button to sort them by radius or revert to random positions. Built with React and D3 v5, it uses `d3.range`, `d3.timer`, and `d3.select` to manage SVG circle elements, while React state controls the circle data and re-renders on button clicks. The animation continuously updates the `cx` attributes as circles move, and the sort operation reorders the array before updating the DOM.

Dec 19, 2022
Loading thumbnail…

Fork of Menu Part 1

This example creates 50 randomly sized and positioned circles on an SVG canvas using D3 v5 and React 16 hooks. The circles bounce horizontally across the screen via a `d3.timer` callback that updates their `cx` attributes each frame. A button labeled "Sort" reorders the circles by descending radius using a JavaScript state update, while a "Revert" button randomizes their positions again. It demonstrates integrating D3 selections with React's `useState` and `useEffect` for managing dynamic visual state.

Dec 19, 2022
Loading thumbnail…

Circles React

This example shows 50 randomly sized and positioned circles moving horizontally across the screen, bouncing off the edges. A button toggles between sorting the circles by descending radius and reverting them to random positions. Built with React hooks and D3 v5, it uses `d3.range` to generate the initial data and a `d3.timer` loop to update both React state and SVG attributes (`cx`, `cy`). The circles are rendered as SVG elements, with the animation driven by state changes that update the DOM.

Dec 19, 2022
Loading thumbnail…

Random Circles

Fifty randomly positioned and sized circles drift across the browser viewport in this d3.v6 example. Each circle's location updates on a timer, shifting by small random increments at every tick, creating a subtle Brownian-like motion. The visualization uses the `d3.range` function to generate the initial dataset, `d3.select` to create the SVG canvas, and the `d3.timer` API to drive the animation loop. Circles are styled as steelblue fills via CSS, with a light gray page background.

Dec 19, 2022
Loading thumbnail…

Interactive Scatter with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements across three flower species. Two dropdown menus let viewers select which attributes appear on the x and y axes, while hovering over the color legend highlights points of a selected species and dims others. The visualization is built with React and D3 v5, using `scaleLinear` and `scaleOrdinal` for positioning and coloring, with SVG circles rendered through custom React components.

Mar 4, 2022
Loading thumbnail…

Polished Scatter with Menus

A React-based scatter plot of the Iris dataset visualizes relationships between four flower measurements (sepal length/width, petal length/width). Interactive dropdown menus let users select which measurement drives the x- and y-axes, with species color-coded via a d3.scaleOrdinal legend. The SVG rendering uses d3.scaleLinear for axes and custom React components (AxisBottom, AxisLeft, Marks) to generate ticks and circles, while the data loads asynchronously via d3.csv through a custom useData hook.

Mar 4, 2022
Loading thumbnail…

Scatter with Menus

This interactive scatter plot displays the Iris dataset, allowing exploration of relationships between sepal and petal measurements. Two dropdown menus let users select which attributes to plot on the x and y axes, with the chart updating dynamically. Built with React and D3 v5, the visualization renders as an SVG, using d3.scaleLinear for axes and d3.extent to compute data domains. Axis ticks and labels are generated from the D3 scale, while circle marks include a tooltip showing the formatted x-value.

Feb 25, 2022
Loading thumbnail…

Menu Starter

This example demonstrates a React dropdown menu for selecting a pet from a list of six options, with the initial selection set to "Spider." The interface displays a label and a styled select element that updates a state value when the user chooses a new option. The code uses React's `useState` hook to manage the selected value and passes it as a prop to a reusable `Dropdown` component, which renders the `<select>` and `<option>` elements. The options are defined as an array of objects with `value` and `label` properties, and the selected value is highlighted via the `selected` attribute.

Feb 25, 2022
Loading thumbnail…

Menu Part 1

This example shows a static smiley face drawn with React and D3, using the D3 arc generator to create the mouth shape. The face is positioned at the center of a 960-by-500 pixel canvas, with circular eyes and a thick, arc-based mouth spanning a half-circle. The code integrates React components with D3’s `arc()` API, while ReactDOM renders the root element into the page. The app currently displays only a “Hello World” text placeholder, as the smiley face visualization is not yet implemented in the rendered output.

Feb 21, 2022
Loading thumbnail…

World Map

This example renders a world map using a Natural Earth projection and SVG paths. The visualization displays landmasses in teal, national borders as thin lines, graticules, and a light gray sphere background. Data comes from the world-atlas TopoJSON dataset, processed with topojson.feature and topojson.mesh. The React component uses D3’s geoPath and geoGraticule to generate the geographic shapes, while the app dynamically sizes the SVG to fit the browser window.

Feb 21, 2022
Loading thumbnail…

Line Chart

This line chart tracks daily temperature fluctuations over a week in San Francisco, with time on the x-axis and temperature on the y-axis. The visualization renders as an SVG using React components for the axes and marks. The line path is drawn with `d3.line` using natural curve interpolation, while individual data points appear as circles with tooltips. Data comes from a CSV file loaded via `d3.csv`, and the scales use `d3.scaleTime` and `d3.scaleLinear`.

Feb 19, 2022
Loading thumbnail…

ScatterPlot

This scatterplot visualizes the Iris dataset, plotting petal length against sepal width with each data point rendered as a circle. Built with React and D3 v7, the visualization uses SVG for rendering, with D3's linear scales to map data values to pixel coordinates. The axes are generated using custom React components (AxisBottom, AxisLeft) that leverage D3's scale ticks, while the Marks component renders circles with tooltips. The interface dynamically fills the browser window and uses the Poppins font, with all data loaded via D3's CSV parsing utility.

Feb 19, 2022
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 countries by population using D3.js v7 within a React application, rendered as SVG. The horizontal bars are colored teal with a Poppins font, and the chart includes labeled axes with formatted tick values that convert large numbers to abbreviated units (e.g., "B" for billions). The data comes from a UN Population 2019 CSV file, loaded with d3.csv. The visualization uses scaleBand for the y-axis, scaleLinear for the x-axis, and native SVG elements with React components for the axes and marks.

Feb 18, 2022
Loading thumbnail…

Refactored BarChart

This bar chart displays the population counts for the ten most populous countries, with each country listed on the y-axis and its population plotted along the x-axis. Built with React and D3 v7, it uses d3.scaleBand and d3.scaleLinear to position the bars and axes, rendering the SVG elements as React components. Data is loaded from a CSV file containing UN population estimates for 2020. The chart shares a light-hearted smiley face graphic in its HTML as an Easter egg, though it is commented out.

Feb 18, 2022
Loading thumbnail…

Rendering Data with React

This example shows a color palette from a CSV file rendered as an SVG pie chart in React. It uses React hooks like `useState` and `useEffect` to load CSV data via `d3.csv`, then maps each row to a path using `d3.arc` and `d3.pie`. The pie slices are filled with the RGB hex values from the dataset, and the chart fills the full viewport. The implementation relies on ReactDOM for rendering and D3 v7 for data parsing and shape generation.

Feb 16, 2022
Loading thumbnail…

Loading data with React and D3

This example demonstrates the loading of a CSV dataset within a React application, displaying a summary message that reports the file size in kilobytes, row count, and column count. The interface initially shows a loading state and updates once the data is fetched. The code combines React’s `useState` and `useEffect` hooks with the `d3.csv` function from D3 v7, and uses `d3.csvFormat` within the message utility to compute data size. The visualization renders as an SVG container, though the output is text-based.

Feb 11, 2022
Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates the foundational step of fetching and parsing CSV data for visualization, displaying the raw text output in a large, styled `<pre>` element. It uses the native Fetch API with an asynchronous `fetchText` function to retrieve the data, while the D3.js library (v7) is loaded via CDN for potential future data manipulation. The code shows commented-out alternatives for handling the response, illustrating the progression from a basic promise chain to a more concise async/await pattern. The page relies on plain HTML and CSS for structure and styling, with JavaScript handling the data retrieval logic.

Feb 11, 2022
Loading thumbnail…

Mouse Follower

A reactive SVG smiley face follows the pointer across the browser viewport, using React state and event handling to update its position. The code defines a single circle element that tracks the mouse's client coordinates within an SVG canvas sized to the window dimensions. React’s `useState` and `useCallback` manage the updated position, while `ReactDOM.render` mounts the component. The example demonstrates basic interactive SVG visualization with React, where the graphic responds directly to user input.

Feb 10, 2022
Loading thumbnail…

Smile Part 1

18 simple smiley faces render in a grid, each with a yellow circle, two eyes, and an arc-shaped mouth that together form a smiling face. The faces are built with React components that position SVG elements relative to a center point via an SVG group transform. The `d3.arc` generator creates the mouth paths, while random offsets from `d3.range` vary each face’s eye placement, eye radius, and mouth dimensions, producing subtle differences across the collection. The code uses React 17 and D3 v7 with SVG rendering.

Feb 10, 2022