Scott Kanning

@s-kanning·7 public vizzes

Fork of Pathetic Bar Chart

This example shows a horizontal bar chart of the top 10 most populous countries in 2020, with population values displayed along the x-axis using a D3 linear scale and country names on the y-axis. The visualization is rendered as an SVG using React, with axes and bars constructed from D3 scale objects and mapped to SVG elements. Data is loaded from a CSV file of the United Nations World Population Prospects via D3’s `csv` loader. The `AxisBottom`, `AxisLeft`, and `Marks` components format ticks and tooltips using D3’s `format` function.

Apr 25, 2024

Loading thumbnail…

Fork of Fork of Pathetic Bar Chart

This scatterplot displays the iris flower dataset, plotting sepal length against sepal width for individual specimens. The visualization is built with React and D3 v5, using `scaleLinear` and `extent` to map data values to SVG coordinates. Custom React components render the axes and circular marks, with D3's `format` function applying compact notation to tick labels. The code loads CSV data asynchronously and provides tooltips via SVG `<title>` elements.

Apr 24, 2024

Loading thumbnail…

Fork - Data, D3, React

This example demonstrates how to load and summarize CSV data by combining D3 data utilities with React state management. The code uses D3's `csv` function to fetch a dataset of CSS named colors, then displays a text summary showing the file size in kilobytes, row count, and column count. React's `useState` and `useEffect` hooks manage the asynchronous data loading, with a "Loading..." message shown before the data arrives. The visualization is rendered as SVG in a minimal interface that dynamically updates once the data is parsed.

Apr 18, 2024

Loading thumbnail…

Fork of MouseFollower

A React component renders an SVG circle that follows the mouse cursor across the full browser window. The circle's position updates on every mouse move via React's `useState` and `useCallback` hooks, with the `clientX` and `clientY` event coordinates passed directly to the SVG `cx` and `cy` attributes. The visualization demonstrates real-time event handling in a React-SVG setup, using `ReactDOM.render` to mount the root element.

Apr 18, 2024

Loading thumbnail…

Fork of Smiley Face Part II

This example renders a yellow smiley face that adjusts to the full browser window size. Built as a React application, it uses SVG components for the circular background, eyes, and mouth, with a D3 arc generator creating the curved smile. The face’s dimensions, including stroke width and eye positions, are passed as props, allowing for easy modification. The visualization demonstrates a compositional approach to building simple graphics with reusable React components.

Apr 18, 2024

Loading thumbnail…

Fork of Hello HTML

A React-based reproduction of a classic "Hello HTML" page, this example renders a yellow smiley face using SVG circles inside a `react-dom` application. The code defines `width`, `height`, and `centerX`/`centerY` constants to position the main circle, while two smaller circles form the eyes. It uses the `ReactDOM.render` API from `react-dom@18.2.0` to mount the component into a `#root` div, replacing a commented-out static SVG version with a dynamic React implementation.

Apr 18, 2024

Loading thumbnail…

Fork of Smiley Face Part II

A React application renders a full-window yellow smiley face using SVG. It positions the face and eyes relative to the window dimensions, computing center coordinates and offset values for the eye placement. The code uses React and ReactDOM to create the SVG circles, with a yellow face and black outline, but omits the mouth and eye colors from the markup. The rendering scales with the browser window size, filling the entire viewport.

Apr 18, 2024