Bubfield

@Bubfield·5 public vizzes

Fork of Rendering Data with React & D3

This example shows a horizontal bar chart of the top 10 countries by 2020 population from a UN dataset, loaded via `d3.csv`. React state manages the fetched data, while `d3.scaleBand` and `d3.scaleLinear` map country names and population values to SVG rectangles. The visualization renders with React’s declarative JSX, using `d3.max` for the domain and the `useEffect` hook to trigger the asynchronous data load. The bars update on data arrival, replacing a simple loading text.

May 21, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a stacked bar chart of population by country, colored by religion, using a dataset loaded from the UCI Auto MPG repository (via a Gist URL). The visualization is built with the Vega-Lite API, which generates a Vega-Lite specification that is rendered by the Vega engine. The code uses `vl.markBar()`, `vl.x().fieldN()`, `vl.y().fieldQ()`, and `vl.color()`, and it relies on d3's `csv` loader to fetch the data. The chart is interactive, including a tooltip via the Vega-Tooltip handler.

May 19, 2022

Loading thumbnail…

Mouse Follower

This example displays statistics about a dataset of named CSS colors, showing total file size in kilobytes, row count, and column count. The visualization is implemented with React and D3, using the `csv` function from D3 to load the data from a remote GitHub gist. The React component manages state with hooks, and displays the computed statistics as text after asynchronously fetching and parsing the data.

May 18, 2022

Loading thumbnail…

CoronaViruz Data

This example demonstrates a minimal approach to fetching and parsing CSV data, which in this case is meant to represent a dataset about the Coronavirus. The code uses the `fetch` API to retrieve text from a specified URL and then applies D3's `d3.csvParse` method to convert the raw CSV text into a structured array of JavaScript objects. The parsed data is logged to the console, showcasing the initial step of loading external data for potential visualization. The example relies on D3 version 7, loaded from a CDN, and runs within a standard HTML page.

May 18, 2022

Loading thumbnail…

Smiley Face Part 1

This example renders a stylized smiley face as a static SVG graphic using React components and D3’s `arc` generator. The face is built from modular React components: a filled background circle with a colored stroke, two offset eyes with distinct fills, and a curved mouth path created via `arc()` with specified inner and outer radii. The SVG is centered within a 960×500 viewport, with all geometric props (eye offsets, radii, stroke width) passed down from a top-level `App` component. No interactivity or data loading is present; the visualization purely demonstrates declarative SVG composition with D3 geometry helpers.

May 17, 2022