Skip to main content
SimilarExport ZIP
100%

Assignment_2

✓ Published1🌍 Public
Ssowmya167
Last edited Apr 13, 2024
Created on Apr 13, 2024
Forked from Test fork

This example combines a stacked area chart of country population changes across eight census years and a pie chart of fictional product sales. The area chart uses `d3.stack`, `d3.scaleBand`, and `d3.area` to layer annual population data by country, with axis labels and per-layer value text rendered via SVG. The pie chart applies `d3.pie` and `d3.arc` to sales quantities, adding a legend with color-coded rects and labels. Both visualizations load CSV data asynchronously and render using SVG elements.

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

This example presents two synchronized views of historical population data for multiple countries: a stacked area chart and a pie chart. The area chart uses `d3.stack()` and `d3.area()` to show population changes across eight census years, while the pie chart uses `d3.pie()` and `d3.arc()` to display the 2022 population distribution. Both visualizations load data from a CSV file via `d3.csv`, employ `d3.scaleOrdinal` with `d3.schemeCategory10` for coloring, and render as SVG. Numeric population values are displayed directly on the area chart layers.

Ssrujaneppalapally@gmail.com
88% match
Loading thumbnail…

Fork of Assignment_2_pie

This example compares population trends across countries using both a stacked area chart and a pie chart. The area chart displays population data from 1970 to 2022 across eight time periods, while the pie chart shows the 2022 population distribution. Both visualizations load CSV data via `d3.csv` and use D3’s `d3.stack`, `d3.area`, `d3.pie`, and `d3.arc` APIs. The code demonstrates rendering SVG elements with ordinal color scales and includes axis generation and legend creation.

Ssowmya167
87% match
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
86% match
Loading thumbnail…

Area Chart Assignment2

A stacked area chart displays population values across multiple countries, with each colored layer representing a distinct data category and numerical labels atop each segment. Built with D3.js, the visualization loads CSV data, applies a d3.stack() layout, and renders areas using d3.area() with scales for positioning. SVG output includes axes, legends, and value annotations, demonstrating ES6 module imports and a categorical color scale.

Ggvinaykumards@gmail.com
83% match
Loading thumbnail…

Assignment2_1

This example shows the population distribution of countries as a pie chart, with each slice labeled by country in a legend beside the chart. The visualization uses D3 v7 to load CSV data from a GitHub gist, compute pie angles with `d3.pie`, and render slices using `d3.arc` into SVG paths. A tooltip, implemented with HTML overlays, displays the country name and population on hover. Colors are assigned via `d3.scaleOrdinal` with `d3.schemeCategory10`.

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

Assignment 2 Pie Chart

This D3.js pie chart displays the distribution of land areas by country, using a categorical color scheme and white strokes to separate slices. The chart labels each slice with its country name at the centroid, and includes a legend positioned to the right. The visualization renders as SVG, with data pulled from a remote CSV file. The code uses `d3.scaleOrdinal`, `d3.pie`, `d3.arc`, and `d3.csv` to construct the chart, while labels and axis titles are positioned via SVG transforms.

Ggnanendra097@gmail.com
80% match
Loading thumbnail…

Assignment 2 part2

This area chart visualizes population trends for ten countries over time, highlighting changes in population size across several decades. The chart is rendered as an SVG using the D3.js library, with data processed from a CSV file via the `csv()` API. It uses D3's stacking and area functions to create layered regions, with a legend and axes labeled "Years" and "Population (millions)" to guide interpretation. The chart employs `d3.scaleTime` for the x-axis and a linear scale for the y-axis, with gridlines for readability.

Aanjeevu@gmail.com
80% match
Loading thumbnail…

Fork of Assignment 2 part2

This area chart visualizes population trends across multiple countries over time, with each country represented by a filled area path. The data comes from a CSV file containing yearly population figures, processed into chronological series using d3.csv and custom data transformation. The visualization employs d3.area(), d3.scaleTime(), and d3.scaleLinear() for rendering, along with d3.axisBottom() and d3.axisLeft() for axes. A categorical color scale (d3.scaleOrdinal with schemeCategory10) distinguishes countries, while a legend identifies each series. The chart is rendered as SVG with configurable width, height, and margins through a reusable areaChart() function.

Aamulyabhagwat1999@gmail.com
80% match