ICE-6

100%

✓ Published0🌍 Public

Last edited Oct 19, 2025

Created on Oct 19, 2025

Forked from Fork of Scatter Plot with Color

This example shows a bar chart of CO₂ emissions by country, sorted from the largest emitter (Non-OECD GCP) down to the Dominican Republic. It uses an SVG canvas with D3’s `scaleBand` and `scaleLinear` to position bars, and `axisBottom` and `axisLeft` to render axes. The chart displays only the first 10 tick labels to avoid clutter, with rotated text. Data comes from an embedded CSV file, and the visualization is built with D3 v7.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-6 Q1

A horizontal bar chart ranks countries by their 2017 fossil CO2 emissions, sorted in descending order with purple bars on a gold-ruled grid. Built with React and d3.v5, the visualization uses `csv()` to load the dataset, `scaleBand()` for the country axis, and `scaleLinear()` for the emissions axis. SVG rendering is handled through ReactDOM, with gridlines and labels generated via `xScale.ticks()` and map iterations.

RRebecca Moore

84% match

Loading thumbnail…

ICE-6

This example displays a horizontal bar chart of the 12 most populous countries in 2022, loaded from a CSV dataset via d3.csv. D3’s scaleBand and scaleLinear map country names and population values to SVG rectangles, with axes drawn manually using d3.axisBottom and d3.axisLeft. The chart is rendered inside a React component using react-dom, with D3 v5 handling data parsing and scales, while React manages state and updates the SVG elements.

Aabdhaseeeb

80% match

Loading thumbnail…

ICE 6

This example shows a bar chart of GDP in billion USD for various countries in 2024. The bars are sorted in descending order and colored a uniform blue, with a tooltip revealing each country's exact value. The visualization is rendered as an SVG using D3 v7. The code loads data from a CSV file, processes it with `d3.csv`, and uses `d3.scaleBand` and `d3.scaleLinear` to map country names and GDP values to positions. Axes are drawn with `d3.axisBottom` and `d3.axisLeft`, with rotated country labels for readability.

CCharith Kapuluru

80% match

Loading thumbnail…

ICE6 - Bar Chart

This interactive bar chart compares direct N₂O emissions in 2020 across several countries, including China, India, the United States, and Germany. Built with React and D3 v5, it uses `d3.csv` to load data from a GitHub-hosted CSV file and `scaleBand` and `scaleLinear` to map countries to horizontal bars. The visualization renders as SVG elements, with red grid lines and axis labels generated from the scales’ tick values.

Nneffer77

80% match

Loading thumbnail…

ICE-6

A bar chart displays the GDP of fifteen countries, sourced from a CSV file. The visualization uses React to manage state and render an SVG, with D3 v5 functions for data loading (`d3.csv`), scaling (`d3.scaleBand`, `d3.scaleLinear`), and axis generation. Rectangles encode GDP values along a horizontal scale with labeled ticks.

JJasvitha Allamsetty

80% match

Loading thumbnail…

ICE - 7 Pie Chart

This pie chart displays the top 10 countries by global CO2 emissions in 2018, using a dataset fetched via d3.csv from a remote gist. Each slice is labeled with the country name and colored using d3.scaleOrdinal with a predefined palette, while a legend on the right maps colors to countries. The visualization is rendered as an SVG using d3.pie and d3.arc, with the chart centered and scaled to fit the 960x500 canvas. The code filters and sorts the data to show only the largest emitters.

Yyvarshachowdary@gmail.com

79% match

Loading thumbnail…

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

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.

NNikhilchiguru-8

79% match

Loading thumbnail…

ICE-6 Bar Charts

A horizontal bar chart displays the GDP per capita for 15 countries, sourced from a CSV file. The chart uses SVG for rendering and is built with React, D3 v5, and D3's scaleBand and scaleLinear for axis scaling. It uses D3's csv loader and max functions, and renders the chart with a blue gridline, labeled axes, and colored bars.

MMounikadontireddy

79% match