Skip to main content
SimilarExport ZIP
100%

Assignment_2.2

✓ Published0🌍 Public
VVishnu Mallampalli
Last edited Jul 11, 2024
Created on Jul 11, 2024
Forked from Hello VizHub

This example displays a global renewable energy production area chart, using a dataset of countries and their total renewable energy output. The D3.js v7 code fetches CSV data from a GitHub repository, parses it with `d3.csvParse`, and renders a single area path using the `d3.area` generator. The visualization includes a rotated x-axis for country labels via `d3.axisBottom` and a linear y-axis for energy values, all rendered as SVG within a styled HTML page.

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…

Assignment 2 Area Chart

This example presents a stacked area chart displaying population data across multiple countries. The visualization uses D3.js v6 to load CSV data, stack series with d3.stack, and render areas with d3.area, while d3.scaleBand and d3.scaleLinear position the categorical and numeric axes. The SVG output includes axis labels, a color-coded legend, and numeric value labels atop each segment. A d3.scaleOrdinal with the schemeCategory10 palette assigns distinct colors to each population category.

Ggnanendra097@gmail.com
78% match
Loading thumbnail…

Assignment 2 Question 2 (b)

This area chart displays nuclear energy usage from 2010 to 2020. It uses D3 v5 to load and parse CSV data, then applies a time-scale for the x-axis and a linear scale for the y-axis. The chart renders a smoothed line with a basis curve and fills the area beneath it with a green color. The SVG output includes axis labels, grid lines, and styled tick marks.

Mmeghna.reddy700@gmail.com
77% match
Loading thumbnail…

Area chart - Activity 7

This example uses D3 v6 to visualize total energy consumption by electric vehicle model. It loads CSV data from a GitHub repository, aggregates energy values per vehicle model with `d3.rollups`, and renders an area chart using `d3.area()`, `d3.scaleBand()`, and `d3.scaleLinear()`. The SVG output includes rotated x-axis labels, a y-axis title, and value labels above each point.

Ssahithigovindaraju@my.unt.edu
76% match
Loading thumbnail…

Assignment2_2

This area chart displays the population of all countries, sorted in descending order, with each country represented along the x-axis and its population on the y-axis. The visualization uses a light blue filled area with a darker blue stroke to highlight population trends across nations. Built with D3 v7, the code loads CSV data from a GitHub gist, employs `scalePoint` for the categorical country axis and `scaleLinear` for population, then renders the chart as SVG using the `area` generator, `axisLeft`, and `axisBottom` APIs.

MManishaBoppa@my.unt.edu
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
76% match
Loading thumbnail…

Assignment2_Question2.1

This visualization displays the annual consumption of different fuel types—solid fuel, liquid fuel, gas fuel, cement production, and gas flaring—as a series of overlaid area charts. The chart uses a time-based x-axis and a linear y-axis to show the magnitude of each fuel source over time. Built with D3 v7, the code loads CSV data from a GitHub repository, parses it, and creates five separate semi-transparent area paths using `d3.area()`, each with its own color, to render the SVG output.

HHarsha vardhan reddy Yarmareddy
76% match
Loading thumbnail…

ASSIGNMENT-2_QUESTION-2

This D3.js area chart visualizes data loaded from a CSV file hosted on GitHub, displaying a time series of values over years. The SVG-based visualization uses `d3.scaleLinear` to map the data domain to pixel coordinates, generates the area path with `d3.area`, and renders labeled axes via `d3.axisBottom` and `d3.axisLeft`. Labels "Year" and "Value" are added to the corresponding axes. The chart is embedded in an HTML page that loads D3 v7 from a CDN.

Ssiddhartha gurram
76% match
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
76% match