Petko4

@Petko4·5 public vizzes

Rendering data with react & d3

A horizontal bar chart displays the 10 most populous countries from the UN Population 2019 dataset, fetched via d3.csv. React manages the component state and rendering, while D3's scaleBand and scaleLinear compute the bar positions and lengths. The visualization uses SVG rectangles, with each bar’s width proportional to the 2020 population estimate.

Aug 3, 2022

Loading thumbnail…

Rendering data with react

This example renders the CSS named colors as a pie chart using D3.js within a React application. It loads color data from a CSV file containing color names and RGB hex values, then maps each color to a pie slice using the `pie()` and `arc()` functions from D3. The React component uses `useState` and `useEffect` to fetch the data asynchronously, displaying a "Loading..." message until the CSV is ready. The resulting SVG visualization, centered in a 960x500 viewport, displays each named color as a filled path segment.

Aug 2, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatter plot of automobile data, with circles positioned by vehicle origin on the x-axis and horsepower on the y-axis. Tooltips reveal car names when hovering, using the vega-lite-api to construct the visualization. The code loads data from a CSV via d3.csv, then renders the chart with vega, vega-lite, and vega-tooltip, applying a custom config for styling and fitting the full window size.

Aug 1, 2022

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates the process of loading and parsing a CSV file, displaying basic information about the dataset in a large preformatted text element. It fetches a CSV file containing CSS named colors from a GitHub gist, parses it using `d3.csvParse`, and shows the file size in kilobytes, row count, and column count. The implementation uses the Fetch API with `async/await` to retrieve the text, then D3 v7's CSV parsing utilities to structure the data.

Jul 31, 2022

Loading thumbnail…

Mouse follower

A single black circle follows the mouse cursor across a blank SVG canvas, updating its position in real time. The React app tracks pointer coordinates through an `onMouseMove` event handler and stores them in state with `useState`, then re-renders the circle using the `clientX` and `clientY` values. The example demonstrates a basic interactive pattern using React’s `useCallback` and ReactDOM, with SVG circle elements for rendering.

Jul 31, 2022