Marcus

@Macronius·12 public vizzes

Fork of React + D3 Viz Starter

A line chart tracks IBM’s daily closing stock prices throughout March 2020 using D3.js v6 within a React framework. The visualization loads data from a local CSV, maps dates and closing values to x- and y-axes, and draws a smooth monotone curve. Animated transitions sequentially reveal the line’s stroke, followed by points and text labels that show each day’s price, colored green or red based on daily change. The SVG rendering includes margin containers and axis ticks styled with cornflowerblue, demonstrating a reusable VizContainer component.

Jun 4, 2023

Loading thumbnail…

historical-bitcoin-with-moon-cycle

This example visualizes historical Bitcoin price data alongside moon phase information, displaying daily high values in text form with a message header. The code loads a CSV file containing Bitcoin’s open, high, low, close, and volume data with moon phase annotations using d3.csv, then iterates through the parsed rows to log each day’s high price to the console. The visualization relies on React’s useEffect hook to asynchronously fetch and process the data, while the container div is styled with a gray background. No chart or graphical rendering is implemented; the focus remains on data parsing and textual output.

May 30, 2022

Loading thumbnail…

historical-bitcoin_2014-2022

This example displays historical Bitcoin price data from 2014 to 2022, loading a CSV file with daily open, high, low, close, and volume values. The page initially renders a static text message reading "Hello D3 version 7" before fetching the dataset. It uses d3.csv to load the external data file and d3.select to update the page content, demonstrating basic data-loading and DOM manipulation with D3 v7.

May 30, 2022

Loading thumbnail…

Loading Data with React & D3

This example demonstrates a React component that loads a CSV file of CSS named colors using D3’s `csv` utility, stores the result in React state via `useState` and `useEffect`, and displays a short summary of the dataset. The summary shows the file size in kilobytes, the row count, and the column count, using `d3.csvFormat` and `message.js` to compute the values. While the data is loading, the interface shows “Loading…” instead of the statistics. The code combines React 16.9, D3 v7, and a remote gist URL as the data source.

May 22, 2022

Loading thumbnail…

mexico svg

This example displays a vector map of Mexico using a single SVG path, with a simple React component that reports whether external CSV data has loaded. It uses React state to track the data and the `useState` hook, while D3’s `csv` utility fetches a list of named colors from a GitHub gist. The map itself is rendered as raw SVG path data using React and D3 v7, with the visualization sized to the full browser window.

May 22, 2022

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates loading and parsing a CSV file of CSS named colors from a remote URL, displaying the file size in kilobytes, row count, and column count. The preferred method uses the `d3.csv(URL).then(...)` API to fetch and parse the data asynchronously, then calculates metrics from the resulting data object and its `columns` array. The code also includes commented-out alternatives using `fetch` and `d3.csvParse` for comparison. The sparse text output is presented in a large-format `<pre>` element.

May 22, 2022

Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across a full-window SVG canvas. Built with React, the app tracks pointer coordinates through an SVG `onMouseMove` handler, stores them in state with the `useState` hook, and updates the circle's `cx` and `cy` attributes on every move. The `useCallback` hook memoizes the event handler for efficiency, while the initial mouse position is centered on the screen. Rendering uses ReactDOM to mount the component into the page.

May 22, 2022

Loading thumbnail…

update pattern - nested elements - bowl of sweet sweet fiber

A data artist constructs a bowl of fruit and consumes it over time, using D3.js to demonstrate the general update pattern for nested elements. The visualization shows a row of oranges and lemons as SVG groups, each containing a colored circle and a text label. The `fruitBowl` function uses `selection.merge` to update existing groups, `groupsEnter` to append new ones, and `groups.exit().remove()` to delete them, while `scaleOrdinal` maps fruit type to colors and radii. State changes from timed JavaScript `setTimeout` calls trigger re-rendering.

Jan 20, 2022

Loading thumbnail…

general update pattern - bowl of sweet sweet fiber

Six circles enter as oranges in a bowl, then shrink and disappear as they are eaten, while one circle changes from orange to lemon, demonstrating the D3.js general update pattern for animating changing datasets. Using D3 v5, the code manipulates the SVG via `selectAll`, `enter`, `merge`, and `exit` transitions, with `transition().duration(500)` animating radius and position changes driven by `scaleOrdinal` color and size scales.

Jan 20, 2022

Loading thumbnail…

followingATutorial - Fork of Radial Tree of Countries Hierarchy - tutz

This radial tree visualization displays the hierarchical structure of countries grouped by continent and subregion, using data from a JSON file. The visualization supports panning and zooming interactions. Built with D3 v4, the code uses `d3.cluster`, `d3.hierarchy`, `d3.zoom`, and SVG paths to render curved links and labels. Text styling applies a glow effect for readability, and font sizes scale with node depth.

Jan 19, 2022

Loading thumbnail…

Fork of Rendering Data with React & D3

This example renders a horizontal bar chart of project volumes using React and D3. The code loads a CSV file via the `d3.csv` utility, then maps the data to SVG rectangles positioned with `d3.scaleBand` and scaled with `d3.scaleLinear`. It uses React's `useState` and `useEffect` hooks to fetch and manage the data, and renders axes and marks through custom components. The chart displays, for each project, a bar whose width corresponds to its planned final volume, with hover tooltips via an HTML `<title>` element.

Nov 12, 2021

Loading thumbnail…

Fork of React + D3 Viz Starter

This starter template demonstrates a blank React and D3 visualization scaffold with a gray SVG canvas and visible margin guides. The code uses React 16.13.1 for component rendering and D3 v6 for future data-binding utilities. A reusable `VizContainer` component abstracts the SVG group element and follows the margin convention, accepting props for dimensions and spacing. Running through the `ReactDOM.render` call, it loads libraries from CDN and displays only the container structure without any actual data or chart marks.

Sep 16, 2021