Skip to main content
SimilarExport ZIP
100%

task 9&10

✓ Published0🌍 Public
Ppranayrajana.97@gmail.com
Last edited Apr 28, 2024
Created on Apr 28, 2024
Forked from Hello VizHub

This visualization shows the percentage of Democratic voters across different states using a D3.js area chart. The SVG-based chart displays each state on the x-axis with the corresponding percentage on the y-axis, rendered as a filled steelblue area. The code loads CSV data from a GitHub gist, processes the percent_democrat values, and uses d3.area, d3.scaleBand, and d3.scaleLinear to construct the visualization with rotated x-axis labels for readability.

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…

Task 9

This pie chart visualizes the top 10 Democrat state populations, with each slice sized proportionally to the state's Democratic population count and colored using D3’s `scaleOrdinal` and `schemeCategory10`. The code loads data from a CSV file via `csv()`, sorts it, and renders the chart with `pie()`, `arc()`, and SVG `path` elements. A legend, built with custom `rect` and `text` elements, displays state names and population values formatted in millions.

Ppranayrajana.97@gmail.com
83% match
Loading thumbnail…

Task9&10_areachart

A stacked area chart displays the changing quantities of apples, oranges, and bananas over time, with each fruit represented by a distinct colored area stacked atop one another. The visualization uses D3.js v7, loading data from a remote CSV file and processing it with `d3.csv`. The chart employs `d3.stack()` to aggregate series, `d3.scaleBand` and `d3.scaleLinear` for axes, and `d3.area()` to generate the filled paths rendered as SVG elements.

Mmanohar varma
74% match
Loading thumbnail…

Activity 6 task2

This stacked bar chart shows the racial composition of ten U.S. states, with each horizontal bar segmented into Asian, Black, and White population percentages. The visualization uses D3 v7’s stacking API (`d3.stack`) to layer the three categories, with a linear x-scale for percentages and a band scale for states. Hovering or clicking a segment reveals its exact percentage via an interactive tooltip, while inline labels display each segment’s value. The SVG rendering includes axes formatted as percentages, and the color scale assigns distinct hues to each racial group. The data is hardcoded as an array of state objects.

Ssahithitoomu@gmail.com
74% match
Loading thumbnail…

Task9&10_Question2

This area chart visualizes the distribution of student marks, showing the number of students across different score ranges on the x-axis and y-axis. The chart uses a linear gradient fill that fades from a semi-transparent purple at the bottom to fully transparent at the top, creating a smooth shaded area beneath the curve. The visualization is rendered as an SVG using D3 v7, with scales defined via `d3.scaleLinear` and the area shape generated by `d3.area`. The dataset is loaded asynchronously from a GitHub gist CSV file using `d3.csv`.

Kkondaveeti.bhargavi7780@gmail.com
73% match
Loading thumbnail…

Pie Chart

This pie chart displays the top ten states by Democratic voter population, with each slice sized according to the state’s Democratic vote count and labeled in a legend with the population in millions. The visualization uses D3 v5’s `pie` and `arc` generators to compute and draw the slices, `scaleOrdinal` with `schemeCategory10` for slice colors, and loads data from a CSV file containing 2020 election data. Hovering over a slice logs the Democratic population to the console, while the legend is built manually with SVG rectangles and text elements.

LLakshmiVandanaNunna
73% match
Loading thumbnail…

Task9and10_PR_2

This example visualizes fruit preference data as a green area chart, mapping six fruit categories along a band scale and student preference counts along a linear scale. The visualization includes labeled axes, a legend, and a link to the underlying CSV dataset. The code uses d3.area() to generate the SVG path, d3.scaleBand() and d3.scaleLinear() for positioning, and d3.axisBottom() and d3.axisLeft() to render the axes. A separate legend is built with SVG rectangles and text elements, while D3 is loaded via the v7 minified script from UNPKG.

Ppravallikaratankanthkatragadda@my.unt.edu
73% match
Loading thumbnail…

task2 prjct

This example presents two linked D3 v7 visualizations: a bar chart displaying the count of orders by state and a pie chart showing order status distribution. The bar chart uses d3.scaleBand and d3.scaleLinear with d3.axisBottom and d3.axisLeft, while the pie chart employs d3.pie and d3.arc. Both render to SVG elements, loading CSV data via d3.csv from GitHub repositories. The code includes custom chart titles, axis labels, and rotated text for readability.

Ssannihitha.k23@gmail.com
73% match
Loading thumbnail…

TASK-9&10(Q2)

A population area chart displays the population of multiple countries from a CSV file hosted on GitHub. The chart uses a single steel-blue filled path created with `d3.area`, positioned by a band scale for countries and a linear scale for population values. Axes from `d3.axisBottom` and `d3.axisLeft` include rotated country labels and axis titles. Data is loaded asynchronously with `d3.csv`, and the SVG renders on a light gray background with a visible border.

Nnagabinduk2023@gmail.com
72% match