Skip to main content
Log in
K

kbrookshire420

@kbrookshire420·19 public vizzes

Loading thumbnail…

Scatter_Plot_New_withMenus

This interactive scatter plot displays the Iris Dataset, allowing users to explore relationships between sepal and petal measurements by selecting different attributes for the X and Y axes via dropdown menus. The visualization updates the axes and data points dynamically when a new attribute is chosen, with each point representing an iris flower. Built with React and D3 v5, the chart renders as an SVG, using D3's `scaleLinear` for scaling, `extent` for domain calculation, and custom components for the axes, marks, and menus.

May 19, 2022
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, allowing users to select which of four numeric attributes or species appear on the x- and y-axes via dropdown menus. Built with React and D3 v5, the chart renders SVG circles and axes using reusable components like `AxisBottom`, `AxisLeft`, and `Marks`. Data loads through D3’s `csv` utility, while React state (`useState`) manages selections and updates scales with `scaleLinear` and `extent` from D3.

May 18, 2022
Loading thumbnail…

Menus with react

A dropdown menu built with React selects a pet from a list of five options, displaying the chosen value via the `useState` hook. The `Dropdown` component renders a native `<select>` element, mapping each option to an `<option>` tag and triggering `onSelectedValueChange` on change. Label and select styling come from inline CSS in `index.html`, while `ReactDOM.render` mounts the `App` component to the `#root` element.

May 16, 2022
Loading thumbnail…

React Starter

This example demonstrates a minimal React application that renders the text "Hello React!" inside a full-screen HTML page. The code creates a single React component, `App`, which returns a `<div>` element, and mounts it to the DOM using `ReactDOM.render` targeting the `#root` div. It imports `React` and `ReactDOM` from the React library, and includes external React and ReactDOM production scripts via CDN in the HTML file. The accompanying CSS sets the body margin to zero and hides overflow.

May 15, 2022
Loading thumbnail…

World map

This example displays a world map using a natural Earth projection, rendering land masses, graticules, country borders, and the sphere outline as SVG paths. The visualization loads geographic data from the World Atlas TopoJSON using `d3.json` and converts it with TopoJSON’s `feature` and `mesh` utilities. React manages the fetched data through a custom `useData` hook, while the `Marks` component applies `geoNaturalEarth1`, `geoPath`, and `geoGraticule` from D3 to generate the map geometry. Styling via CSS distinguishes the land, sphere, interiors, and graticule layers.

May 13, 2022
Loading thumbnail…

Line Chart Example

This line chart visualizes temperature in San Francisco over time, with a blue curve and circles marking the sample points. The chart’s axes and tick marks are generated using the D3.js v7 API, and the rendering is performed in React with SVG. The data is loaded directly from a CSV file using the `csv` function, and the visualization uses `scaleTime` for the x-axis and `scaleLinear` for the y-axis.

May 10, 2022
Loading thumbnail…

Iris Data Scatter Plot

This visualization shows the Iris dataset as a scatter plot, mapping petal length on the x-axis and sepal width on the y-axis. Each circle represents an individual iris flower, with a tooltip displaying the exact x-value on hover. The chart uses React state via `useState` and `useEffect` to load the CSV data through d3.csv, while d3.scaleLinear and d3.extent compute the scales. Axes are rendered as custom React components using SVG, with d3.format for tick labels and the Poppins font from Google Fonts.

May 10, 2022
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top ten countries by population in 2020, with horizontal bars sorted by country name. The visualization uses D3.js scaling functions and React components to render SVG rectangles, axes, and tick labels. Data is loaded asynchronously via the `d3.csv` utility from a GitHub-hosted CSV file, and tooltips show formatted population values using `d3.format`. The chart’s aesthetic is enhanced with the Poppins font and a custom color palette applied to marks and gridlines.

May 8, 2022
Loading thumbnail…

Refactored Bar Chart

A refactored bar chart visualizes the populations of the ten most populous countries in 2020. The chart uses React state via a custom hook to manage data loading, while D3.js utilities handle scaling and drawing. SVG rendering with `scaleBand` and `scaleLinear` positions horizontal bars, with axes and marks split into separate components. Population data comes from a UN CSV file fetched using D3's `csv` function.

May 8, 2022
Loading thumbnail…

Axis Creation With React & d3

This example shows a horizontal bar chart of 2019 UN population data for the top ten countries, loaded via d3.csv. React state stores the parsed data, while d3.scaleBand and d3.scaleLinear create categorical and linear scales for positioning bars and axes. The SVG renders custom tick marks and labels by iterating over xScale.ticks() and yScale.domain(), with bars drawn as rect elements sized by the scales.

May 8, 2022
Loading thumbnail…

The Margin Convention

This visualization displays a horizontal bar chart of the ten most populous countries, using the United Nations 2019 population estimates. The chart is rendered as SVG elements within a React component. The data is loaded using `d3.csv`, with the y-axis scaled by country name via `d3.scaleBand` and the x-axis scaled by population count using `d3.scaleLinear`. React's `useState` and `useEffect` manage data loading and state, while D3's `max` function determines the chart’s domain. The visualization follows a margin convention with a 20-pixel inset on all sides of the 960x500 SVG canvas.

May 8, 2022
Loading thumbnail…

Population Line Chart

This visualization displays population figures for the top 10 countries in 2020 using a horizontal bar chart. The chart maps country names to a `d3.scaleBand` y-axis and population values to a `d3.scaleLinear` x-axis, rendering each bar as an SVG `rect` element. Data is loaded asynchronously via `d3.csv` from a UN Population dataset, with React state managing the loaded data through `useState` and `useEffect`. The visualization is built using React 18 and D3 v7, rendered entirely as SVG within a fixed 960×500 viewport.

May 8, 2022
Loading thumbnail…

Pie Chart React & d3

A pie chart renders a color wheel from a CSV file of named colors, using React state to manage the asynchronous data loading. The static chart displays each color as an equally sized slice, with its fill set to the corresponding RGB hex value from the data. Built with React and D3 v7, the code uses `d3.csv` to fetch the data and `d3.pie` with `d3.arc` to generate the SVG paths. The visualization is rendered as an SVG element, centered on a 960x500 canvas.

May 7, 2022
Loading thumbnail…

Fork of Loading Data With React & d3

This visualization displays a vertical stack of 960-pixel-wide color swatches, one for each row in a CSV file of named colors, with each swatch’s background set to its corresponding hex value. The example loads the remote CSV using d3’s `csv` utility and manages the asynchronous result through React state with a `useEffect` hook, initially rendering a large “Loading…” message. Once the data arrives, React maps over the array to produce the colored divs, illustrating how d3 data-loading APIs can feed a React-based rendering pipeline.

May 7, 2022
Loading thumbnail…

Iterating Fast with vega-lite api

This example visualizes the global distribution of religious populations across countries using a bubble chart, where circle size encodes population and axes represent country and religion. It loads CSV data via d3.csv, then builds the chart with the vega-lite API’s `vl.markCircle()` and encoding helpers like `vl.x().fieldN()`, `vl.size().fieldQ()`, and `vl.tooltip()`. The visualization renders as SVG through Vega-Lite, with custom axis and label styling from a config object, and integrates react state and vega-tooltip for interactive inspection.

May 7, 2022
Loading thumbnail…

Loading Data With React & d3

This example demonstrates a minimal React and d3 integration for loading external CSV data. The application fetches a color dataset from a GitHub Gist URL using `d3.csv`, then stores the parsed result in React state via `useState` and `useEffect`. While the data loads, the interface displays the text “Loading...”. Once complete, the `message` utility calculates and displays the dataset’s size in kilobytes, row count, and column count, using `d3.csvFormat` to compute file size.

May 6, 2022
Loading thumbnail…

Loading And Parsing CSV Data

This example demonstrates the loading and parsing of a CSV file, displaying the data’s size in kilobytes, row count, and column count in large text. It uses D3’s `d3.csv` method to fetch and parse the remote CSV data from a GitHub gist, then formats the output with `d3.csvFormat`. The page is a minimal HTML document with inline CSS and JavaScript, providing a straightforward overview of the dataset’s basic structure.

May 6, 2022
Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across an SVG canvas, updating its position in real time as the pointer moves. The visualization uses React state to track mouse coordinates via the `onMouseMove` event handler and renders a single `<circle>` element with D3 v7’s selection-free React integration. The SVG viewport is fixed at 960 by 500 pixels, and the circle’s center tracks the clientX and clientY values directly.

May 6, 2022
Loading thumbnail…

Smiley Face Part I

This example displays a grid of ten randomly generated smiley faces, each with variations in eye placement, eye radius, mouth width, and mouth radius. The faces are rendered as SVG circles using React components, with the mouth drawn via a D3 arc generator (`d3.arc`). The JavaScript `Math.random()` function drives the per-face differences, while the `range` function from D3 controls the array length for mapping. The rendering pipeline combines React's component model with D3’s arc shape generator to produce the smiley faces.

May 4, 2022