Spuddy2884

@Spuddy2884·9 public vizzes

Fork of Refactored Bar Chart

This example displays a horizontal bar chart of the top 10 most populous countries using React and D3 v5. The bars are rendered as SVG rectangles, with the x-axis showing population values and the y-axis listing country names. Data comes from the United Nations World Population Prospects 2019 CSV, loaded via d3.csv. The chart uses d3.scaleBand for the categorical y-axis and d3.scaleLinear for the quantitative x-axis, with custom React components for the axes and marks.

Sep 15, 2021

Loading thumbnail…

Fork of Axes with React & D3

This example visualizes the top 10 most populous countries as horizontal bars using React and D3, with data from the United Nations World Population Prospects 2019. The chart includes both x-axis ticks from `xScale.ticks()` and y-axis country labels, though it lacks axis lines. D3’s `scaleBand` and `scaleLinear` map the data to SVG rectangles, while React’s `useState` and `useEffect` manage asynchronous CSV loading via `d3.csv`. The SVG is rendered directly through React, making it a hybrid of declarative components and D3 scales.

Sep 14, 2021

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a lamentably bare bar chart, with no axes or labels, using React for rendering and SVG for output. The chart pulls data from the United Nations World Population Prospects 2019 via a CSV, loading it with `d3.csv` and processing it in a `useEffect` hook. The bar lengths are scaled using `d3.scaleLinear`, while the vertical positions come from `d3.scaleBand`, which also provides the bar heights. The visualization is intentionally minimal, showing only the raw rectangles of varied widths.

Sep 14, 2021

Loading thumbnail…

Fork of Rendering Data with React & D3

This example renders CSS named colors as a radial burst using React and D3. It loads color data from a CSV file via `d3.csv`, then uses `d3.pie` to compute equal-sized arc segments and `d3.arc` with an outer radius equal to the full SVG width to draw them as filled paths. Each path’s fill is set to the corresponding color’s RGB hex value, creating a circular spectrum where every segment represents a distinct named color. React manages the component state and renders the SVG elements dynamically after the data loads.

Jul 28, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between fuel efficiency, horsepower, weight, and origin using data from the UCI Auto MPG dataset. Scatter plots map miles per gallon and horsepower, while point size encodes vehicle weight and color distinguishes geographic origin. The visualization is built with the Vega-Lite API, which registers Vega and Vega-Lite libraries, and uses d3.csv for data loading. Custom axis styling and tooltips enhance readability, with the view rendered as an SVG that fits the full window.

Jun 21, 2021

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal HTML page that combines CSS and JavaScript, rendering the text "Hello HTML" at a massive scale using an inline style of 13em. It shows how a bare-bones web document can integrate styling and scripting without external libraries or frameworks. The code uses the Document Object Model (DOM) via `index.html` structure, applies CSS through a `<style>` block, and executes a `console.log` statement in JavaScript to output "Hello JavaScript!" to the browser's developer tools. It serves as a foundational template for understanding static page composition.

Mar 2, 2021

Loading thumbnail…

Mouse Follow

A circle in an SVG follows the mouse cursor in real time. The visualization uses React’s `useState` and `useCallback` hooks to track pointer coordinates from the `onMouseMove` event, updating the circle’s `cx` and `cy` attributes. Rendering is handled by ReactDOM, which mounts the SVG element defined in the component’s JSX. The example demonstrates a simple, interactive state-driven update with no external data sources.

Mar 2, 2021

Loading thumbnail…

CSV Data

This example demonstrates loading and logging a CSV file containing CSS named colors from a remote GitHub gist. It shows the raw text output of the CSV in the browser console using the Fetch API. The code defines an asynchronous `fetchText` function that retrieves the file and returns its contents as plain text, then chains a `.then` callback to log that text. A commented-out alternative uses the Fetch API’s promise chain with `response.text()` to achieve the same result.

Feb 25, 2021

Loading thumbnail…

NB - Hello HTML

This example renders a grid of eighteen simple smiley faces using React and D3 v6. Each face is composed of SVG circle elements for the background and eyes, with a mouth generated by the D3 `arc` function. The faces are repeated using a `range` array from D3, with randomized eye radii, while all other dimensions remain fixed. The React components are structured to separate the face container, background circle, eyes, and mouth arc. The page also includes a minimal HTML setup with external React and D3 scripts from a CDN.

Feb 22, 2021