Skip to main content
SimilarExport ZIP
100%

Energy DashBoard

✓ Published1🌍 Public
Rrayavarapulokesh3@gmail.com
Last edited Dec 4, 2024
Created on Dec 4, 2024

This dashboard visualizes global energy trends across multiple metrics, including renewable energy share, electricity access, fossil vs. renewable proportion, and GDP versus energy consumption per capita for selected countries. It features four synchronized D3.js v7 SVG charts—a line chart, bar chart, pie chart, and scatter plot—with a dropdown menu for country selection. The visualization uses d3.csv to load data and d3.timeParse for year formatting, while tooltips provide interactive detail on hover. Each chart includes styled titles and axis labels, and the pie chart uses d3's arc generator to display proportional energy sources.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

project

This example presents a dashboard of four D3.js charts—a line chart, bar chart, pie chart, and scatter plot—visualizing global sustainable energy data from a CSV file. It shows trends in renewable energy share, electricity access, fossil versus renewable energy proportions, and the relationship between GDP and energy consumption per capita, with a tooltip and country selector. The visualization uses D3 selections, scales, and time parsing to render SVG charts, updating all views based on the selected country.

YYeruva Snehith Reddy
85% match
Loading thumbnail…

Q2 Dinesh Pie chart D3.js!

This D3.js pie chart visualizes global energy consumption by source, displaying percentage shares for coal, natural gas, hydroelectric, nuclear, and renewables. It renders SVG slices using `d3.pie` and `d3.arc`, with `d3.scaleOrdinal` and `d3.schemeSet2` for color encoding. Labels positioned via `arc.centroid` show source names and percentages, while a legend on the right uses colored rectangles. Data comes from an external CSV file loaded with `d3.csv`.

Ddineshsingiri18@gmail.com
76% 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
76% match
Loading thumbnail…

Activity6_Task2

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.

Bbudalavijay2001@gmail.com
74% match
Loading thumbnail…

Reusable Scatter Plot

This visualization explores global city energy and demographic data using a reusable D3 scatter plot component. It displays cities as colored symbols (triangles, squares, diamonds, circles) based on their renewable energy adoption, with a legend categorizing values from low to very high. The example animates by cycling the X-axis through population, temperature, CO2 emissions, and renewable energy percentage every three seconds, while the Y-axis remains electricity consumption. The code imports D3 v6 modules via `select`, `text`, `csvParse`, `scaleLinear`, `axisLeft`, `axisBottom`, and `symbol` to build the custom SVG visualization, reading data from a gist-hosted CSV.

Sshreelasya.bezawada@gmail.com
74% match
Loading thumbnail…

reusable

This interactive scatter plot visualizes city-level energy metrics, comparing population against CO₂ emissions while using color to represent renewable energy adoption buckets (low, medium, high). The chart cycles through five different x-axis variables every three seconds, including electricity consumption, renewable percentage, and temperature, with smooth updates via D3’s data joins. Built with d3.v7, the reusable scatterPlotFactory pattern manages scales, axes, and a categorical color legend, rendering animated SVG marks that re-position as the axis changes. The dataset is fetched from a remote CSV and parsed client-side.

Sshreelasya.bezawada@gmail.com
74% match
Loading thumbnail…

Activity 6_Task 2

This stacked horizontal bar chart shows the percentage breakdown of energy sources—fossil fuels, nuclear, hydroelectric, solar, wind, and other renewables—for eight countries, with each bar segment colored by source and an interactive tooltip revealing exact values. The visualization uses D3 v7's `d3.stack()` to compute layered series, `d3.scaleBand()` and `d3.scaleLinear()` for axes, and `d3.scaleOrdinal()` for color mapping. Data is loaded from `data.csv` and rendered as SVG rectangles, with a custom mouseover tooltip built via D3 selections and a legend generated dynamically from the column headers.

Kkblikitha22@gmail.com
74% 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
73% match