kalmdown

@kalmdown·10 public vizzes

Pretty Population Bar Chart

This example displays a horizontal bar chart of the ten most populous countries for 2020, using population values loaded from a remote CSV file. The chart is built with React and rendered as an SVG, leveraging D3 v7’s `scaleBand` and `scaleLinear` to position bars and axis ticks, and `csv` for data parsing. Gray gridlines mark each x-axis tick, while country labels appear along the vertical axis, with bar widths proportional to population.

Aug 16, 2021

Loading thumbnail…

Pathetic Population Bar Chart

This example displays the top ten countries by 2020 population as a horizontal bar chart, with bar lengths proportional to population size. The chart loads data from a CSV file hosted on GitHub using D3’s `csv` function, then maps the data to SVG rectangles via React’s `useState` and `useEffect` hooks. D3’s `scaleBand` and `scaleLinear` position the bars within a fixed 960-by-500 pixel viewport, while the `max` function determines the scale’s upper bound.

Aug 10, 2021

Loading thumbnail…

Radial Spray of CSS Named Colors & D3

A radial spray of CSS named colors fans outward from the center of an SVG canvas, with each color represented as a slice of a pie chart. The code uses React hooks to load the color data from a CSV file and D3's `pie` and `arc` functions to generate the paths, filling each path with its corresponding RGB hex value from the dataset. The visualization renders as a full circle of 148 color swatches, demonstrating the full CSS named color palette in a compact, circular layout.

Jul 30, 2021

Loading thumbnail…

Rendering Data w- React

This example renders the CSS Named Colors dataset as a vertical stack of thin colored rectangles. Each row in the CSV file becomes a single div element, with its background color set from the dataset’s `RGB hex value` field, forming a 960-pixel-wide spray. The visualization is built with React, using the `useState` and `useEffect` hooks to asynchronously load the CSV via D3’s `csv` function, and then maps each record to a styled div. ReactDOM mounts the final component into the page’s root element, displaying all color swatches stacked without gaps.

Jul 29, 2021

Loading thumbnail…

Vega-Lite API Template

This visualization displays a scatter plot of automobile data, plotting acceleration against horsepower for each vehicle model. Built with the Vega-Lite API, it uses `vl.markPoint()` with encoded x and y fields, while tooltips reveal the car name. The code registers Vega-Lite with Vega, loads data via `d3.csv()` from an external URL, and applies a custom configuration for axis styling and typography. The visualization renders responsively to fill the window using SVG output.

Jul 19, 2021

Loading thumbnail…

Loading Data w- React & D3

This example demonstrates the minimal steps for loading external CSV data into a React component using D3’s `d3.csv` method. It displays a text summary of the loaded dataset—rows, columns, and file size in kilobytes—computed with `d3.csvFormat`. The React `useState` hook holds the fetched data, while `useEffect` triggers the asynchronous CSV request. The visualization uses a simple styled `<pre>` element and relies on React 16.9 and D3 v7.

Jul 19, 2021

Loading thumbnail…

CSS Colors

This example loads a CSV of CSS named colors from a GitHub gist and displays summary statistics about the dataset: its size in kilobytes, row count, and column count. The page uses D3 v7’s `d3.csv` to fetch and parse the data, then `d3.csvFormat` to calculate the file size from the formatted string. Results are rendered as plain text into a pre element via `textContent`, with the body styled at a large font size for readability. The code also includes commented-out alternatives using the Fetch API.

Jul 18, 2021

Loading thumbnail…

Mouse Follower

A smiley face drawn as a simple SVG circle follows the mouse cursor across a 960-by-500 viewport. React’s `useState` hook tracks the pointer’s `clientX` and `clientY` coordinates, updating the circle’s `cx` and `cy` attributes on every `mousemove` event. The example demonstrates interactive rendering with React’s declarative state management, where the component re-renders the gold-filled circle with an orange stroke in real time. No external data source is used; the visualization relies solely on user input to drive position changes.

Jul 18, 2021

Loading thumbnail…

Initial Face - after Part III

This example displays a stylized cartoon face composed of a radial-gradient orange-and-yellow background circle, white eyes with black pupils, and an orange arc-shaped mouth. It demonstrates component-based React visualization, with separate `BackgroundCircle`, `Eyes`, and `Mouth` components reused within an SVG. The mouth uses D3’s `arc` generator to create a path, while the eyes and face render as basic SVG circles. The layout centers the face using a transformed group, and the code includes variables for dimensions, radii, and offsets to control the facial proportions.

Jul 15, 2021

Loading thumbnail…

Fork of HTML Starter

This example renders a cheerful smiley face using SVG, composed of a radial-gradient-filled face, two white eyes with black pupils, and an orange mouth drawn as an arc. It is built with React and D3 v7, specifically using the `arc` generator from the `d3` package to create the mouth’s path. The entire graphic is centered within a 960×500 viewport, with all shapes positioned via explicit coordinates and transforms. The code demonstrates how to mix React’s declarative JSX with D3’s geometric helpers, all inside a minimal HTML page.

Jul 14, 2021