Skip to main content
SimilarExport ZIP
100%

Fork of HTML Starter

✓ Published0🌍 Public
Aavgoust
Last edited May 15, 2022
Created on May 15, 2022
Forked from HTML Starter

This example displays a population dataset from the UN’s 2019 estimates, rendered as an interactive React application. The code imports D3’s `csv` loader to fetch data from a GitHub Gist, while `arc` and `pie` are used to generate a chart based on the loaded values. The visualization uses React hooks like `useState` and `useEffect` to manage asynchronous data loading and state. The UI presents a styled message, “Hello HTML!”, alongside the data-driven chart, combining static HTML/CSS with dynamic JavaScript and D3 functionality.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This example displays static text reading “Hello HTML” on a large scale, with population data logged to the browser console. The HTML page uses CSS for centered styling and inline JavaScript for a console message, while a separate script imports D3’s `select` and `csv` functions to load data.csv. The visualization does not render the dataset visually; it only demonstrates basic D3 data loading and console output within a bare HTML starter template.

Bbyiringirodalio
85% match
Loading thumbnail…

Fork of loading data in React with d3

This example shows a React application that loads a CSV dataset of world population prospects using D3’s `d3.csv` function, storing the result in component state via `useState` and `useEffect`. While the current code only logs the parsed data to the console, it sets up an SVG canvas with a width of 960 and height of 500, importing `arc` and `pie` from D3 for potential chart rendering. The data originates from a GitHub gist URL, and the ReactDOM render method mounts the app to the root element.

Bblackbottt
83% match
Loading thumbnail…

Fork of Rendering Data with React & D3

This example visualizes United Nations population data from 2019 using React and D3. It loads the CSV dataset with `d3.csv` and renders the country values as a radial burst of colored arcs in an SVG. The code constructs a band scale with `scaleBand` for positioning, while commented-out sections show how `arc` and `pie` would compute angular segments, and a scaleLinear is prepared for potential x-axis mapping. React’s `useState` and `useEffect` hooks manage asynchronous data loading, displaying a loading message until the dataset arrives.

Aalfredwang0707
83% match
Loading thumbnail…

Fork of HTML Starter

This example displays a static bar chart of country populations, reading from a CSV file with `d3.csv` and rendering rectangles with `d3.selectAll` and `data.join`. It uses D3 v7 within a plain HTML page, with data loaded asynchronously and converted to numbers. The visualization demonstrates basic data binding and SVG shape creation, though the rendered bars are all fixed at 300 by 300 pixels, so the chart does not reflect population values visually.

Vvoid-LSTM
83% match
Loading thumbnail…

Fork of HTML Starter

This example displays a minimal HTML page that greets the viewer with "Hello HTML!" in oversized, centered text while simultaneously loading a CSV dataset. Using the `d3.csv` API, it fetches a government financial dataset and formats it with `d3.csvFormat`. The page then computes and displays the dataset's size in kilobytes, row count, and column count. Built with plain HTML, CSS, and JavaScript, it also references a React starter for comparison, but relies solely on D3.js for data handling.

TTariq Marcel
82% match
Loading thumbnail…

Fork of Fork of Loading Data with React & D3

This example displays a horizontal bar chart of UN population data for 2019, using React state to manage the asynchronous loading of CSV data via D3’s `csv` utility. The bars are rendered as SVG `<rect>` elements whose widths map to population values through `d3.scaleLinear`, while country names are positioned using `d3.scaleBand`. The visualization shows a loading message until the data arrives, then renders the chart with a fixed size of 960×500 pixels. D3 v5 and React 16.9 are loaded via CDN, and the data is fetched from a gist hosted by Curran Kelleher.

Zzyniax
82% match
Loading thumbnail…

Fork of Rendering Data with React & D3

This example visualizes United Nations population data for 2020 as a simple bar chart rendered with SVG. It loads a CSV file using D3’s `csv` utility, then uses React components to map each country to a rectangle, with a band scale (`scaleBand`) positioning rows vertically. The code also imports `arc` and `pie` utilities, though the main rendering path uses plain React elements rather than D3’s shape generators.

EEevikettu
82% match
Loading thumbnail…

Fork of Fork of Fork of HTML Starter 2

This example displays a horizontal bar chart of population by country for the top 10 countries, using data from the UN Population 2019 CSV. Built with React and D3 v7, it renders SVG elements including rectangles for bars, with axes created using `scaleBand` and `scaleLinear`. The chart includes a custom `AxisTop` with `d3.format` for tick labels and an `AxisLeft` for country names. Data is loaded via `d3.csv` and parsed in a `useData` hook.

LLeonardo Baron
81% match