project d3

100%

✓ Published0🌍 Public

Jjyothirmaijyothi2017@gmail.com

Last edited Apr 26, 2024

Created on Apr 26, 2024

This visualization presents global CO2 emissions and population data through a series of linked charts. It shows a line chart of emission trends over the last twenty years, a scatter plot by country, a histogram of emission values, and bar charts highlighting the top and least populated countries. The code uses d3.csv to load the dataset, then employs d3.group, d3.sum, and d3.scaleBand, alongside d3.line, d3.axisBottom, and d3.axisLeft to render SVG charts.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Project Prototype 3

This visualization displays cumulative greenhouse gas emissions for the ten highest-ranked countries from 1990 to 2013, with each country represented by a circle scaled by population and a line indicating annual emissions. The chart uses D3 v4 to create an SVG scene with animated transitions between years, including top and bottom marks connected by rectangles to show cumulative totals. The data comes from a CSV file containing country, year, GHG values, cumulative GHG, and population figures, rendered using `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom`.

RRobertDelgado

84% match

Loading thumbnail…

verma

This example presents a dashboard of five D3.js v7 visualizations analyzing CO2 emissions and population data from a GitHub-hosted CSV. A line chart, scatter plot, and histogram summarize global CO2 emission trends over the last twenty years, while two bar charts rank the top and least populated countries by 2022 data. The scatter plot groups emissions by country, and the interface includes a supplementary index listing all countries. Using SVG rendering, the code employs d3.csv, d3.scaleBand, d3.scaleLinear, d3.line, d3.axisBottom, d3.axisLeft, d3.group, and d3.sum to build the charts.

Vvikramkotlo9@gmail.com

83% match

Loading thumbnail…

D3 Data Dashboard

This dashboard visualizes global CO2 emissions across countries, continents, and years, allowing users to compare total emissions or per-capita values via an interactive world map, a pie chart of continental shares, and a bar chart of annual trends for a selected country. Built with D3 v4, it uses `d3.geoMercator` and `d3.geoPath` for map rendering from TopoJSON world atlas data, plus animated SVG transitions for the map, pie arcs, and bars. A year slider and radio buttons drive updates, with tooltips revealing detailed values from the CSV dataset.

VVishnu Sudireddy

82% match

Loading thumbnail…

D3 - Multi-Line Chart

This multi-line chart displays carbon dioxide emissions per country from 1970 to 1979, using four distinct colored lines with circular data points. The visualization loads CSV data from a GitHub gist and renders an SVG with a light gray background panel, axis labels, and a title. It uses d3.csv for data loading, d3.line to construct the paths, and d3.axisBottom and d3.axisLeft for the axes. Interactive tooltips appear on mouseover, showing the emission value for the hovered point, with circles enlarging to indicate selection. The chart also incorporates colorbrewer colors and the d3-legend library.

CChandana Srinivas

82% match

Loading thumbnail…

v3

This example visualizes global CO₂ emissions over time using a smooth line chart, with the x-axis representing years and the y-axis representing emissions in million tonnes. The chart filters the loaded CSV data for the "World" country and plots it as a red line. Built with D3.js v7, the code uses `d3.csv` for data loading, `d3.scaleLinear` for axes, `d3.line` with the `d3.curveCatmullRom` curve for the smoothed path, and `d3.axisBottom` and `d3.axisLeft` for labeled axes. The SVG rendering is configured within a fixed chart area, and the data originates from the `preprocessed_owid_co2_data.csv` file.

Ssrisailapu.rc@gmail.com

81% match

Loading thumbnail…

Project Prototype 3

This visualization compares cumulative greenhouse gas emissions for the ten highest-emitting countries across yearly intervals. It uses circular marks sized by population, vertical rectangles showing the current year's emissions contribution, and dashed lines connecting cumulative totals to a baseline. The code employs d3.scaleBand for country positioning, d3.scaleLinear for emission values, and d3.axisBottom/axisBottom for axes, with data loaded from a CSV file containing GHG, population, and rank fields.

RRobertDelgado

81% match

Loading thumbnail…

123

This sunburst chart displays global CO₂ emissions, with the top-emitting countries grouped by their respective regions. Using D3.js v6, the chart partitions a hierarchical dataset, rendering each segment as an arc whose angle and radius correspond to emission values. The visualization employs `d3.partition` and `d3.arc` for geometry, with regional colors from `d3.schemeCategory10` and country colors from `d3.schemePastel1`. Tooltips reveal exact emission figures, while an interactive legend color-codes both regions and individual countries.

Nnitinramagiri1@gmail.com

81% match

Loading thumbnail…

Project

This example displays two grouped bar charts showing population and renewable energy consumption by year, sourced from a CSV dataset hosted on GitHub. It uses D3.js v7 to load and parse the data, group records by year, and render SVG bar charts with linear and band scales. The charts are styled with distinct colors, steelblue for population and orange for renewable energy, and include labeled axes and a legend. The visualization offers a comparative view of demographic and energy trends over time.

Vvenkatabhaskaratetali@my.unt.edu

80% match