D

dan815

@dan815·18 public vizzes

Loading thumbnail…

Refactored Bar Chart

A horizontal bar chart displays the top 10 countries by 2020 population from a UN dataset loaded via d3.csv. The visualization uses React state to manage the data lifecycle. Scales from d3.scaleBand and d3.scaleLinear map country names and population values to SVG coordinates. Grid lines, tick labels, and bars are rendered as SVG elements using React’s declarative JSX syntax. The chart includes a black axis line and text labels positioned using D3 scale outputs, with Vega tooltip and Vega-Lite libraries loaded but not actively used in the visible code.

Loading thumbnail…

Fork of MakingBars1

This fork of MakingBars1 renders a horizontal bar chart of the top 10 countries by 2020 population from a UN dataset loaded via d3.csv. The React app uses d3.scaleBand and d3.scaleLinear to position bars, with gridlines and tick labels generated from xScale.ticks(). SVG rectangles display the data, styled through React’s JSX.

Loading thumbnail…

MakingBars

This example displays a circular arrangement of colored arcs derived from a CSV file of named CSS colors. Each color is drawn as a small arc path, with its fill set to the corresponding RGB hex value, and its position and opacity scaled by its index in the dataset. The visualization uses React for rendering SVG elements, and D3 v7 for data loading via `d3.csv`, as well as for the `arc` generator and linear/sqrt scales that compute angular and opacity values.

Loading thumbnail…

VEGA_Explore

This example displays a data summary as a plain-text message, reporting the number of rows in a CSV dataset loaded from a GitHub gist. A React component uses the `useEffect` hook to fetch and parse the data with `d3.csv`, then renders the count through a custom message module. The visualization remains minimal, showing only the row total while the data is loaded, with no graphical chart. It relies on React for state management and D3 v7 for data loading, alongside Vega-Lite and Vega APIs referenced in the page setup.

Loading thumbnail…

LoadingOtherColorViz

This visualization displays a grid of colored circles, each representing a CSS named color loaded from a CSV file hosted on GitHub. The circles are rendered as SVG elements, with their positions calculated based on the ball radius and container width. When a circle is clicked, its hex color value is displayed in a separate text area. The code uses React with hooks like `useState` and `useEffect` to manage data loading and state, and it utilizes the D3.js `csv` function to fetch and parse the data. The example demonstrates two approaches for generating the circles: one using React components and another using direct D3.js manipulation.

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example visualizes CSS named colors as a grid of circles, where clicking any circle displays its corresponding hex value above the SVG. The data is loaded asynchronously from a GitHub-hosted CSV file using the `d3.csv` function within React's `useEffect` hook. Rendering is handled through React components that generate SVG circles, with interaction managed via callback handlers like `handleMouseOver` and `onClick`. The visualization also displays data statistics, including file size, row count, and column count, computed using `d3.csvFormat`.

Loading thumbnail…

VegaLitePractice

This example demonstrates how to embed Vega-Lite visualizations in a React application. It loads the Vega, Vega-Lite, Vega-Lite API, Vega-Tooltip, and D3 v5 libraries via CDN, then uses them to render interactive charts within a single-page interface. The code creates a visualization pipeline where Vega-Lite specifications are parsed and rendered as SVG or Canvas output, with tooltips enabled for user interaction. The minimal HTML page and JavaScript setup show a practical starter template for integrating declarative visualization grammars into modern web frameworks.

Loading thumbnail…

Load D3 Util and use React state

This example shows a minimal React application that loads D3 utilities and uses React state to manage fetched data. The interface renders empty placeholder divs, while a script appends a new paragraph and sets all div text content to a numeric value. The code initializes a React component with a `useState` hook for storing data, and a `useEffect` hook for fetching a JSON dataset from the Vega movies URL. It also constructs a vega-lite-api mark bar chart specification referencing the same data source, though the chart itself is not rendered. The example demonstrates integrating D3 v7, React 16.9, and vega-lite-api.

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization shows the relationship between vehicle weight and fuel efficiency (mpg) across a dataset of auto models, with each point represented as a semi-transparent circle. The color encoding maps weight values, and hovering reveals the vehicle name via tooltip. Built using the Vega-Lite API wrapped in a D3.js framework, it loads CSV data from a gist URL and renders an interactive scatterplot. The code uses `vl.markCircle`, `vl.x().fieldQ()`, `vl.y().fieldQ()`, and `vl.color().fieldQ()` to define the chart, with a custom config adjusting axis and label styling.

Loading thumbnail…

Fork of Pathetic Bar Chart

This example visualizes the ten most populous countries as a set of plain rectangles, each with a width proportional to its population and no axes or labels. The bar chart is implemented using React and D3 v5, where D3’s `csv` function loads data from the United Nations World Population Prospects 2019, and `scaleBand` and `scaleLinear` map country names and population values to SVG coordinates. Each bar is drawn as an SVG `rect` element generated by React’s `map` function, with the chart rendered inside an `<svg>` component.

Loading thumbnail…

D3 Color Parser

A black circle follows the mouse cursor over a blank SVG canvas in this interactive React application. The code fetches a CSV file of CSS named colors from a GitHub gist and parses it with D3's `csvParse` function, though the parsed data is only logged to the console. The visualization itself is minimal, demonstrating event handling with React's `onMouseMove` and state management via `useState` and `useCallback`. The SVG circle's position updates directly from `clientX` and `clientY` coordinates.

Loading thumbnail…

D3 Color Parser plus mouse move

A React-based SVG visualization parses the CSS named colors dataset from a CSV file using d3.csvParse, then renders a small black circle that follows mouse movements across the full-screen viewport. The component tracks the pointer position via a React useCallback event handler and updates the circle’s cx and cy coordinates in real time. The example demonstrates integration between React state management, D3’s parsing utilities, and SVG mouse-event handling in d3.v7.

Loading thumbnail…

Fork of Mouse Follower

A red circle tracks the cursor's movement across an SVG canvas. The example demonstrates a basic interactive visualization using React and ReactDOM. The `App` component maintains the mouse position in state, updating it through an `onMouseMove` event handler on the SVG element. The circle’s center coordinates are bound to this state, and its radius is fixed at 30 pixels.

Loading thumbnail…

CSV Color Visualizer

This example loads a CSV file of CSS named colors from a GitHub gist and prints its contents to the browser console. It uses the Fetch API to request the remote CSV text asynchronously, then logs the raw string output. The visualization itself is not yet rendered; the code currently only demonstrates data retrieval and parsing preparation, without any chart, canvas, or DOM manipulation. The page includes no external libraries, relying solely on native JavaScript promises and `fetch` for the network request.

Loading thumbnail…

Smiley With Lashes

A grid of twenty smiling faces with eyelashes fills the screen, each face randomly varied in size, stroke width, and eye radius. The faces are composed of SVG circles for the face and eyes, a path for the rectangular mouth, and arc-generated paths for the lashes. React renders the components, while D3’s `arc` and `line` generators create the lash and mouth shapes.

Loading thumbnail…

New Face

This example shows a simple yellow circular face rendered in SVG using React components. The `Smiley` component composes a `FaceContainer` with an SVG `<circle>` for the face and a nested `<circle>` for the eye, positioned via offsets. The `index.js` file sets the canvas dimensions and renders the face centered on screen with ReactDOM. The visualization uses React 16.7, D3 v7 for the `arc` import, and SVG transforms to position elements relative to the center point.

Loading thumbnail…

Smiley Face Part I

A yellow smiley face is drawn inside an SVG canvas, with two black eyes and a brown arc-shaped mouth. The face is centered within an 800x500 viewport, using a yellow circle with a black stroke as the head. The mouth is generated with the d3.arc() API, calculating its inner and outer radii and start and end angles. The example is built with React, using JSX to render the SVG elements, and relies on d3.v7 for the arc path generation.

Loading thumbnail…

Fork of Sine Wave Circles

A row of 30 circles animates vertically in a sine wave pattern across an SVG canvas. The animation continuously updates each circle’s y-coordinate using a time-based sine function, producing a smooth, undulating wave effect. The example uses D3 v7’s `timer` and `range` methods along with the JavaScript `Math.sin` function. Circles are appended via `selectAll`, and their positions are calculated based on the viewport width and height, with a frequency parameter controlling the wave’s oscillation.