jwesterlund412

@jwesterlund412·14 public vizzes

Fork of Stylized Bar Chart

This example displays the top 10 most populous countries as horizontal bars, using the United Nations World Population Prospects 2019 dataset. It shows a styled bar chart with a Poppins font, custom teal bars, and formatted axis labels that convert scientific notation to billions. Built with React and D3 v5, the code uses `scaleBand` and `scaleLinear` for positioning, while SVG rectangles render the marks with tooltips. The axes are created via `AxisBottom` and `AxisLeft` components, and the data is loaded asynchronously using D3’s `csv` function.

Jan 10, 2022

Loading thumbnail…

Fork of Refactored Bar Chart

This example visualizes the top 10 most populous countries as a horizontal bar chart. The chart uses SVG rectangles for the bars, with D3’s scaleBand and scaleLinear for positioning, and custom React components (AxisBottom, AxisLeft, Marks) for rendering axes and marks. Data is loaded from a CSV file of United Nations World Population Prospects 2019 using d3.csv.

Jan 10, 2022

Loading thumbnail…

Refactored Bar Chart

This bar chart displays population data for the top ten countries from a UN 2019 dataset, with horizontal bars and labeled axes for easy comparison. Built with React, it uses a custom `useData` hook to load the CSV via D3's `csv` utility, then renders bars and scales using React's state management and SVG elements. D3's `scaleBand` and `scaleLinear` map country names and population values to coordinates, while `ticks` generate grid lines and labels, all within an SVG canvas created through ReactDOM.

Jan 10, 2022

Loading thumbnail…

Axes with React & D3

A bar chart displays the top 10 countries by 2020 population using CSS named color data. The React component manages state with `useState` and `useEffect`, loading CSV data via `d3.csv` and parsing it with a row function. D3 scales `scaleBand` and `scaleLinear` position the bars, while custom tick lines and labels render axes within an SVG. The visualization demonstrates integrating React rendering with D3 utilities for data loading and scaling.

Jan 10, 2022

Loading thumbnail…

Margin Convention

This example demonstrates the margin convention in D3, rendering a horizontal bar chart of population data for the top 10 countries in 2020. The chart displays bars scaled by population using `d3.scaleLinear` and `d3.scaleBand`, with the SVG group translated to respect the defined margins. React manages the component state, loading the CSV data via `d3.csv` before rendering the SVG rectangles.

Jan 8, 2022

Loading thumbnail…

UN Population: Rendering Data with React & D3

This example displays UN population data for the top 10 countries in 2020 as horizontal bars rendered in SVG via React. It loads the dataset using `d3.csv`, then uses React’s `useState` and `useEffect` to fetch and store the data. D3’s `scaleBand` and `scaleLinear` map country names and population values to pixel positions and widths, while React maps the data array to `<rect>` elements. The visualization demonstrates a hybrid approach where D3 handles data loading and scaling, and React manages the DOM rendering.

Jan 8, 2022

Loading thumbnail…

Fork of Rendering Data with React & D3

This example presents a donut chart that visualizes CSS named colors from a remote CSV file. It loads the data using `d3.csv`, processes it with the `d3.pie` and `d3.arc` utilities, and renders the result as SVG paths via React components. The chart displays each color as a segment, filled with its corresponding RGB hex value. The visualization demonstrates a straightforward integration of React state management with D3’s data handling and arc generation within a single SVG canvas.

Jan 8, 2022

Loading thumbnail…

Rendering Data with React

This example displays CSS named colors as a vertical stack of horizontal strips, each colored by its RGB hex value. The data loads from a remote CSV file using d3.csv, and React state manages the asynchronous loading and rendering of the data into div elements. The visualization uses React 16.9, ReactDOM, and d3.v7, with SVG markup present in the HTML but the primary rendering approach relying on React’s component-based DOM updates.

Jan 8, 2022

Loading thumbnail…

Fork of Loading Data w/ React with D3.

This example shows the CSS named colors dataset loaded asynchronously and rendered as colored bars, with a loading message displayed until the data arrives. The code uses React hooks (`useState`, `useEffect`) to manage data state and trigger the D3 `csv` utility to fetch the remote CSV file. Once loaded, each row is mapped to a `<div>` whose background color is set from the color value, demonstrating a simple integration of React’s declarative rendering with D3’s data-loading API.

Jan 8, 2022

Loading thumbnail…

Loading Data w/ React with D3.

This example demonstrates loading a CSV dataset of CSS named colors and displaying summary statistics about it. The app uses React hooks (`useState` and `useEffect`) to manage asynchronous data loading, with D3's `csv` utility fetching the remote file. Once loaded, the data is passed through a custom `message` function that calculates file size in kilobytes, row count, and column count using `d3.csvFormat`. The rendered output is a large `<pre>` element showing these metrics, transitioning from a "Loading.." state to the final statistics.

Jan 8, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This scatterplot visualizes U.S. auto industry trends, plotting engine horsepower against miles per gallon, with each car’s origin shown by color and its weight by bubble size. The interactive tooltip reveals the vehicle’s name on hover. The visualization is built using the Vega-Lite API, which compiles specifications to Vega for rendering via SVG, and the data is loaded from a CSV of the Auto MPG dataset using `d3.csv`. Custom axis and label styling come from a shared config object.

Jan 8, 2022

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v7. It fetches a remote CSS named colors dataset via `d3.csv()`, then displays summary statistics about the parsed data—size in kilobytes, row count, and column count—in a large HTML `<pre>` element. The code also includes an alternative commented-out approach using the Fetch API with `async/await` and `d3.csvParse()` to achieve the same result. This illustrates both modern D3 data loading patterns and raw text parsing.

Dec 29, 2021

Loading thumbnail…

Mouse Follower

A React component renders an SVG circle that tracks the mouse position across a 960×500 canvas. The App uses the useState and useCallback hooks to store and update the cursor’s clientX and clientY coordinates on every mousemove event. The circle’s cx and cy attributes are bound to this state, making it follow the pointer in real time. The rendering relies on ReactDOM and SVG elements, with no external data sources beyond user interaction.

Dec 29, 2021

Loading thumbnail…

Smiley Face Part 6

A grid of 18 smiley faces rendered in SVG, each with a yellow circle, black outline, and two eyes, demonstrates parameterized React components. The faces vary randomly in eye radius, using D3’s `range` to generate the array of instances. Built with React and D3 v7, the visualization uses `d3.arc` to draw each mouth as a curved path, with all elements assembled via custom components like `FaceContainer` and `Eyes`.

Dec 29, 2021