HunDeTroie

@HunDeTroie·5 public vizzes

Fork of Loading Data with React & D3

This example shows a bar chart of the top 10 countries by 2020 UN population estimates, loaded asynchronously from a CSV file. The chart uses D3 scales (scaleBand and scaleLinear) to map country names and population values to SVG rectangles, with grid lines and tick labels generated from the x-axis scale. React manages the component state, fetching data with the useEffect hook and rendering the SVG markup directly. The visualization demonstrates a simple integration of React for UI state and D3 for data-driven SVG geometry.

Dec 20, 2021

Loading thumbnail…

Loading Data with React & D3

This example demonstrates how to load and render a dataset with React and D3, displaying the CSS named colors as a pie chart where each slice corresponds to a color. The visualization uses React hooks like `useState` and `useEffect` to fetch CSV data via `d3.csv`, then applies `d3.pie` and `d3.arc` to generate SVG paths. The chart is rendered with React's declarative JSX, filling each slice with its corresponding hex color value from the dataset.

Dec 16, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between fuel efficiency, acceleration, weight, and country of origin for cars from the UCI Auto MPG dataset. The code constructs a scatter plot using the Vega-Lite API, plotting `mpg` against `acceleration`, with color encoding origin and size encoding weight. It leverages `vl.register` to integrate Vega-Lite, and `vl.markCircle` with `.encode` for the visual marks. Data is loaded asynchronously via `d3.csv`, and the chart is rendered as an SVG, configured with custom axis and label styling.

Dec 16, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates the process of loading and parsing CSV data by fetching a file of CSS named colors and displaying summary statistics about it. It shows the data’s size in kilobytes, the number of rows, and the number of columns as large text on the page. The code uses the `fetch` API within an `async` function to retrieve the raw text, then relies on `d3.csv` and `d3.csvFormat` to parse and measure the data, highlighting the integration of D3 v5 with modern JavaScript.

Dec 16, 2021

Loading thumbnail…

React D3 Tutorial

A grid of eighteen smiley faces, each with randomized eye and mouth thickness, demonstrates reusable React components paired with D3. The `Face` component composes smaller pieces like `BackgroundCircle`, `Eyes`, and `Mouth`, with the latter using `d3.arc` to draw an arc path. The `FaceContainer` wraps everything in an SVG group translated to the face center. Rendered with React 17 and D3 v7, the example shows how declarative JSX and D3 shape generators can build modular data visualizations.

Dec 15, 2021