Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of ICE-6: Rendering Marks and Channels with React & D3

Public visualization

Fork of ICE-6: Rendering Marks and Channels with React & D3

0 stars0🌍 Public
NNikhilchiguru-8
Last edited Mar 8, 2023
Created on Mar 8, 2023

This example displays the top 10 countries with the highest CO2 emissions in 2019 as a horizontal bar chart, using a dataset loaded from a CSV file. The visualization is built with React components that render SVG marks while leveraging D3’s `scaleBand` and `scaleLinear` to position rectangles along the x and y axes. Axis ticks and labels are generated manually by mapping over scale domains, and the chart includes a blue gridline for each tick value. The page is titled "CO2 emission in the Countries" and updates asynchronously when the data finishes loading.

AI-generated description

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

See also React Starter.

Comments

Sign in to join the discussion.

MIT Licensed