Skip to main content
SimilarExport ZIP
100%

Activity6_Task2

✓ Published0🌍 Public
Bbudalavijay2001@gmail.com
Last edited Apr 11, 2024
Created on Apr 10, 2024
Forked from Hello VizHub

A grouped and stacked horizontal bar chart displays the percentage shares of renewable, fossil fuel, and nuclear electricity generation for ten countries. The visualization uses D3.js v7 with SVG rendering, loading data directly from a local CSV. It demonstrates `d3.stack()` for stacking the energy source series, `d3.scaleOrdinal()` for categorical colors, and `d3.axisBottom()` and `d3.axisLeft()` for axes. Interactive tooltips provide country-specific values when hovering over bars.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Activity6_Question2

This stacked bar chart displays the proportional contribution of five energy sources—coal, gas, nuclear, hydro, and renewable—to electricity generation across six countries. Each bar segments by source share using percentages. The visualization uses D3 v7’s `d3.stack()` and `d3.scaleOrdinal` for coloring, with `d3.axisBottom` and `d3.axisLeft` for scales. Hovering over a segment reveals a tooltip showing the exact percentage via `d3.select` and `event.pageX`/`pageY` positioning, with data loaded from a local CSV.

Ssjannaikode@gmail.com
88% match
Loading thumbnail…

Activity-6-Q3

A stacked horizontal bar chart displays the percentage distribution of five energy sources—Coal, Solar, Wind, Nuclear, Hydro, and Natural Gas—across five categories from below 10% to above 40%. The chart uses d3.stack, d3.scaleOrdinal, d3.scaleBand, and d3.scaleLinear to render SVG rectangles, with tooltips on mouseover showing exact percentages via d3.format. A legend identifies each color-coded energy source. Data comes from the embedded energy_data.csv file.

Kkotasc18@gmail.com
86% match
Loading thumbnail…

Activity 6_Question 2

This stacked horizontal bar chart displays the percentage distribution of energy generation across five sources, broken into five percentage ranges. The visualization uses d3.stack() to aggregate categories and d3.scaleBand() for the y-axis positioning, with d3.scaleOrdinal() assigning colors to each energy source. Interactive tooltips triggered by mouse events display precise percentage values for each segment. The chart includes axis labels, a title, and a legend, rendered as SVG elements with data loaded from a CSV file.

SSiva Kishore Reddy
85% match
Loading thumbnail…

Activity_6_Q3

This example visualizes the distribution of energy generation percentages across five energy sources (Coal, Solar, Wind, Nuclear, Hydro, and Natural Gas) using a stacked horizontal bar chart. It shows the proportional share of each source across five percentage categories, from below 10% to above 40%. The chart uses D3 v7’s `d3.stack()` and `d3.scaleBand()`, with SVG rendering and an ordinal color scale. Hovering over any bar segment highlights it and displays a tooltip with the exact percentage value, formatted via `d3.format()`. Data comes from a locally loaded CSV file.

Ppradeepgubbala2001@gmail.com
84% match
Loading thumbnail…

Activity6_Task2

This stacked bar chart visualizes the percentage of internet usage across five age groups, segmented by region, with each bar normalized to 100%. The visualization uses `d3.stack()` to create the stacked segments and `d3.scaleOrdinal` for color encoding, mapping regions to distinct hues. Interactive tooltips appear on hover, displaying the precise percentage for each region-age combination using `d3.format('.2f')`. The chart leverages `d3.axisBottom` and `d3.axisLeft` with SVG rendering, reading from a `data.csv` file that contains proportional usage values for North America, Europe, Asia, Africa, and South America.

Ggoudrohit2000@gmail.com
82% match
Loading thumbnail…

4th visualisation

This visualization shows the composition of electricity generation by country, using stacked bar charts to break down each country’s total energy mix into six sources: coal, biofuel, hydro, nuclear, solar, and wind. The chart uses d3.csv to load data from a GitHub-hosted dataset, then applies d3.stack, d3.scaleBand, and d3.scaleLinear to compute and position the stacked segments. Color-coded bars via d3.scaleOrdinal distinguish the energy types, while interactive tooltips are provided through SVG title elements and axes are generated with d3.axisBottom.

Vvenkatabhaskaratetali@my.unt.edu
82% match
Loading thumbnail…

Activity6_Question2

A stacked bar chart displays energy consumption proportions across four sectors—Residential, Commercial, Industrial, and Transportation—from 2016 to 2020, using data from data.csv. The visualization uses d3.scaleBand, d3.scaleLinear, and d3.scaleOrdinal with d3.stack to layer bars, while d3.axisBottom and d3.axisLeft render axes with percentage formatting. An SVG legend maps colors to sectors, and the chart is styled via external CSS.

KKhushi Desai
81% match
Loading thumbnail…

Question 2

This stacked bar chart visualizes energy consumption by source across five countries (USA, China, India, Germany, Brazil) for 2023. The chart uses D3 v7 with `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, rendering stacked segments via `d3.stack().keys()` to represent Coal, Oil, Natural Gas, Renewable, and Nuclear proportions. Data loads from `energy_data.csv` using `d3.csv()`. A legend, generated with SVG groups, identifies each energy source, while custom colors are assigned through `d3.scaleOrdinal`.

Rragasrikakarla27@gmail.com
81% match