Skip to main content
SimilarExport ZIP
100%

Fork of HTML Starter

✓ Published0🌍 Public
445.saiful@gmail.com
Last edited Mar 2, 2026
Created on Mar 2, 2026
Forked from HTML Starter

This visualization shows global renewable energy production statistics by country and year, displaying average and maximum production values alongside a bar chart. The chart encodes each country-year combination on the x-axis with production in terawatt-hours on the y-axis, using hover effects to highlight individual bars. The implementation loads CSV data from a GitHub gist via `d3.csv`, computes summary statistics with `d3.mean` and `d3.max`, and renders an SVG bar chart using `d3.scaleBand` and `d3.scaleLinear` with `d3.axisBottom` and `d3.axisLeft`. The page is styled with CSS and built with D3.js v7.

AI-generated description

Global Renewable Energy Production Visualization

A D3.js data visualization project displaying renewable energy production statistics by country and year.

Features

  • Interactive bar chart visualization
  • Data summary with total records, average, and maximum renewable energy production
  • Hover effects on bars for better interactivity
  • Responsive design

Technologies

  • D3.js v7.3.0
  • HTML5
  • CSS3

Author

Created by Md Saiful Islam for CSCE 5320 - ICE 5

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

A horizontal bar chart displays population figures for ten countries in the year 2000, using yellow bars with green tick labels on a red axis grid. Built with React and D3 v5, the visualization loads CSV data via `d3.csv`, scales values with `d3.scaleBand` and `d3.scaleLinear`, and renders SVG rectangles through reusable components. Axis formatting uses `d3.format` to abbreviate large numbers, and tooltips appear via SVG `<title>` elements.

Ssahithya.voleti@gmail.com
79% match
Loading thumbnail…

Fork of HTML Starter

This D3.js v7 example visualizes country population and area data from a GitHub-hosted CSV file. It shows a bar chart of populations with value labels, alongside a data summary and a data table. The code uses `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to construct the SVG chart, plus `d3.format` for number formatting. The visualization also provides a computed summary of total population and the largest country by area.

Nnabeel.ahmed2003.na@gmail.com
78% match
Loading thumbnail…

Fork of HTML Starter

This interactive bar chart visualizes the distribution of tree species from a CSV dataset, displaying the count of each species alongside tooltips that reveal average height and circumference. Built with D3 v7, the visualization employs `d3.csv` for data loading, `d3.rollups` for aggregation, and `d3.scaleBand` and `d3.scaleLinear` for axes. Bars animate upward on load, use a green sequential color scale, and respond to hover with opacity changes. The SVG rendering includes rotated x-axis labels and a styled title.

Aanirudhrao345@gmail.com
78% match
Loading thumbnail…

Fork of HTML Starter

A bar chart displays national-level data from a CSV dataset, filtered to include all years for the "National" level. The visualization uses D3.js to create an SVG rendering, with a band scale for the x-axis and a linear scale for the y-axis. Bars are drawn as rectangles filled with steelblue, and axes are generated using `d3.axisBottom` and `d3.axisLeft`. The data is loaded asynchronously via `d3.csv` from a GitHub gist URL.

Pprathyusha-reddy-arch
78% match
Loading thumbnail…

Fork of HTML Starter

This example shows a horizontal bar chart of population data for 20 countries from 2010, using React with D3 v5 for scales and axes. It loads CSV data via `d3.csv` and renders SVG elements with `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. The chart includes formatted tick labels using `d3.format` and displays a custom tooltip on each bar through SVG `<title>` elements. The visualization demonstrates a basic data-loading workflow with `useEffect` and `useState`.

Ssahithya.voleti@gmail.com
78% match
Loading thumbnail…

Fork of Fork of Simple World Map

This visualization shows a world map highlighting renewable energy production for 2024, using a yellow-green sequential color scale to indicate production levels across countries, with a legend and tooltip providing exact values. It renders the map as SVG using `d3.geoNaturalEarth1` projection and `d3.geoPath`, pulling geographic data from a TopoJSON world atlas. The code uses `d3.scaleSequential` with `d3.interpolateYlGn` to color countries, and a linear scale with axis for the legend. Countries not in the dataset appear gray, and the tooltip displays production in TWh or no data.

Ssaiabhishekmunnangi@gmail.com
77% match
Loading thumbnail…

Fork of React & D3 Starter

This example combines a bar chart and line chart to compare solar and wind energy production from 2000 to 2182, sampling every tenth year for clarity. It uses React for the DOM structure and D3 v7 for SVG rendering, with `d3.scaleBand` positioning the bars, `d3.scaleLinear` mapping the y-axis, and `d3.line` drawing the wind energy trend overlaid with circular points. The data comes from a CSV file, and the chart includes gridlines, axis labels, and a legend to distinguish the two series.

Ppvvaishnavi93@gmail.com
77% match
Loading thumbnail…

Fork of React & D3 Starter

This example shows a multi-series line chart of renewable energy production (solar, wind, and hydro) over time, from 2000 to 2182, using data from a CSV file. It renders three colored lines, each with small data-point circles, plus axes, gridlines, labels, and a legend. The code builds an SVG using React and D3 v7, employing `d3.csv`, `d3.scaleLinear`, `d3.line`, `d3.axisBottom`, `d3.axisLeft`, and `d3.max` to create the visualization.

Ppvvaishnavi93@gmail.com
77% match