ducan114

@ducan114·7 public vizzes

Make bar chart with React using D3

This example shows a horizontal bar chart of the ten most populous countries in 2020, using data loaded from a CSV file via `d3.csv`. The chart maps country names to a `scaleBand` on the y-axis and population values to a `scaleLinear` on the x-axis, rendering each bar as an SVG `<rect>` element. Built with React and D3 v7, the component fetches data asynchronously in a `useEffect` hook and stores it with `useState`, updating the visualization once loaded.

Dec 28, 2021

Loading thumbnail…

Render data with React using D3

A React component renders a pie chart of CSS named colors from a CSV file, with each slice’s fill matching its corresponding hex value. Using React hooks (`useState`, `useEffect`) to load data via `d3.csv`, the chart is drawn as SVG paths generated by `d3.pie` and `d3.arc`. The visualization demonstrates integrating D3’s layout and shape APIs with React’s declarative rendering, as each slice is a React `<path>` element. The data source is a gist URL containing named colors and their RGB hex values.

Dec 28, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automobile data, with horsepower on the y-axis and weight on the x-axis. Each point represents a vehicle, colored by its origin and sized according to miles per gallon, with a tooltip showing the car’s name. Built using the Vega-Lite API running on D3.js, it loads a CSV from a GitHub gist and renders into a full-window SVG with custom axis styling and tooltip configuration from Vega Tooltip.

Dec 27, 2021

Loading thumbnail…

Load data with React using D3

This example demonstrates how to load and display a CSV dataset in a React application, summarizing the data’s size and schema. It uses React hooks `useState` and `useEffect` to manage asynchronous data loading, with D3’s `csv` function fetching the data from a remote gist URL. The loaded dataset is passed to a formatting function that uses `csvFormat` to compute the file size in kilobytes, row count, and column count, which are rendered as text. The example highlights the integration of D3’s data-loading utilities within a React component lifecycle.

Dec 27, 2021

Loading thumbnail…

CSS Named Colors

This example displays basic summary statistics about the CSS named colors dataset, showing the file size in kilobytes, the number of rows, and the number of columns. It loads a CSV file from a remote GitHub gist using the `d3.csv` function, then computes the text length of the formatted data via `d3.csvFormat`. The results are rendered as plain text in the browser body, with the page styled using a large 4rem font size. The code also includes an alternative commented-out approach using the native `fetch` API with `d3.csvParse`.

Dec 27, 2021

Loading thumbnail…

Interaction with React

This example demonstrates how React manages interactive SVG rendering by drawing a single circle that follows the mouse cursor across the full browser window. The visualization tracks pointer movement through React state and event handling, updating the circle’s position in real time using the `useState` and `useCallback` hooks. The code renders an SVG element with ReactDOM, binding `onMouseMove` to update coordinate values, while the circle’s `cx` and `cy` attributes reflect the current mouse position. No external data source is used; it focuses purely on React’s declarative interaction model.

Dec 27, 2021

Loading thumbnail…

Fork of Hello HTML

This example renders a smiling face composed of basic SVG shapes using React and D3.js. It shows a yellow circle for the head, two black circular eyes, an arc-based mouth, and two smaller arcs for cheeks, all positioned around the center of a 960×500 viewport. The code uses React for component structure and JSX, while D3’s `arc()` helper generates the path data for the mouth and cheek arcs. SVG attributes like `cx`, `cy`, and `r` define geometry, with transforms handling rotation and translation for the cheek elements.

Dec 27, 2021