My First Chart

100%

My First Chart

✓ Published0🌍 Public

Last edited Dec 18, 2022

Created on Dec 18, 2022

This example displays a horizontal bar chart of 2019 greenhouse gas emissions for the 11 largest GDP countries, with populations represented in MtCO₂e. Rectangles are drawn in SVG using D3 v7’s `scaleBand` and `scaleLinear`, with axes generated by `axisLeft` and `axisBottom`. A custom tooltip appears on mouseover, showing each country’s emission value. The code includes a static placeholder dataset, while the actual CSV loading and rendering logic remains commented out, alongside an unused rectangle animation group.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

asnn2_task1

A horizontal bar chart displays the greenhouse gas emissions in 2019 for the top 11 GDP countries, using a dataset with country names and population values. The chart, rendered as SVG with D3 v7, maps population to bar width on a linear scale and country names to vertical bands on a band scale. Tooltips appear on hover, showing the exact emission value, and the bars darken temporarily when the mouse is over them. The visualization includes axis labels and a title, with axes generated using `axisLeft` and `axisBottom`.

Mmandadi1999

85% match

Loading thumbnail…

Green house gas bar chart

A horizontal bar chart displays 2019 greenhouse gas emissions (in MtCO₂e) for eleven top-GDP countries, with population values from `data.csv`. Steel-blue bars encode emissions magnitude on a linear scale, while country names align on a band scale. The SVG rendering uses D3 v7’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the plot and axes. Interactive hover effects reveal a custom tooltip with the emission value, and the bar fill darkens via `attr("fill")` on mouse events.

DDIANJING FAN

84% match

Loading thumbnail…

Fork of Green house gas bar chart

A horizontal bar chart displays 2019 greenhouse gas emissions in MtCO₂e for the top 11 GDP countries, using population values from a CSV as the quantitative variable. The visualization, built with D3 v7, uses `scaleLinear` and `scaleBand` to map data to SVG rectangles, with `axisLeft` and `axisBottom` for axes. Hovering over a bar reveals a tooltip with the exact emission value, while the bar’s fill darkens briefly. The chart includes a title and renders with a clean, margin-based layout.

CCharlie Smith

84% match

Loading thumbnail…

Fork of Green house gas bar chart

CCharlie Smith

84% match

Loading thumbnail…

Fork of Green house gas bar chart

This bar chart displays 2019 greenhouse gas emissions for the top 11 GDP countries, using population data from a CSV file. Horizontal bars are rendered as SVG rectangles, with countries ordered along the y-axis and emissions scaled linearly on the x-axis. The visualization uses D3 v7 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, and includes interactive tooltips that appear on mouseover, showing each country’s emission value in MtCO₂e.

Mmavercikalvin

84% match

Loading thumbnail…

Fork of Green house gas bar chart

A horizontal bar chart displays greenhouse gas emissions (in MtCO₂e) for the top 11 GDP countries, sorted by population. Each bar’s length encodes emissions, with hover interactions triggering a tooltip and a subtle color shift. The visualization uses D3 v7’s `scaleLinear`, `scaleBand`, and SVG rendering, reading data from a CSV. Bars animate on mouseover via D3 transitions, while the axis and tooltip are generated with `axisLeft`, `axisBottom`, and custom DOM styling.

Mmythili

83% match

Loading thumbnail…

Fork of Green house gas bar chart

This example displays a horizontal bar chart of greenhouse gas emissions for the top 11 GDP countries in 2019, using data from a CSV file loaded via d3.csv. The chart maps emission values to bar widths with d3.scaleLinear and country names to y-axis positions with d3.scaleBand, rendering in SVG. Interactive tooltips appear on mouseover, showing the emission value in MtCO₂e, while bars darken on hover. The visualization uses d3.axisLeft and d3.axisBottom for axes and is built with React and D3 v7.

NNikithakatta30

83% match

Loading thumbnail…

Fork of Green house gas bar chart

This horizontal bar chart displays greenhouse gas emissions in 2019 for the top 11 GDP countries, with each bar’s length representing the population metric from the `data.csv` file. The visualization employs D3 v7’s `scaleLinear` and `scaleBand` for axes, `axisLeft` and `axisBottom` for ticks, and SVG `<rect>` elements drawn on a 960x500 canvas. A custom tooltip appears on mouseover, showing the emission value, and the bars are colored steelblue via CSS. The chart includes a title and margin-based layout.

HHoyeoun

83% match