Skip to main content
SimilarExport ZIP
100%

Activity 6 Q2

✓ Published0🌍 Public
Ssaitejakaranam10@gmail.com
Last edited Apr 13, 2024
Created on Apr 12, 2024
Forked from area chart

This example visualizes survival outcomes on the Titanic by passenger class using two overlaid area charts. It loads the Titanic dataset from a CSV URL and filters the data into survived and non-survived groups, then uses `d3.rollup` to count occurrences by class. The SVG rendering employs `d3.scaleBand`, `d3.scaleLinear`, `d3.area`, and `d3.axisBottom`/`d3.axisLeft` to draw the paths, axes, and a color-coded legend.

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…

Activity6_Question_2

This visualization shows the proportion of male and female Titanic passengers who survived or did not survive, using stacked horizontal bars. Built with d3.js v7 and rendered as SVG, it loads data from a local CSV file and uses `d3.stack`, `d3.scaleOrdinal`, and `d3.axisBottom` to create the stacked chart. Interactive tooltips display exact percentages on hover, and the color scale distinguishes survival outcomes.

Hhemalathayella@my.unt.edu
85% match
Loading thumbnail…

SDA HW2-2

This area chart visualizes survival outcomes across Titanic passenger classes, comparing counts of survivors and non-survivors for classes 1, 2, and 3. The visualization uses two overlapping filled regions, with green representing survivors and red representing non-survivors. The code loads data from a CSV file using d3.csv, aggregates counts with d3.rollup and d3.sum, and renders the chart as SVG using d3.area generators, d3.scaleBand for the x-axis, and d3.axisBottom and d3.axisLeft for the axes. The chart explicitly includes all three passenger classes even if empty.

Vvits.18731a0539@gmail.com
84% match
Loading thumbnail…

Activity 6 Q2

An area chart displays the relationship between passenger age and fare from the Titanic dataset. The D3 v7 library loads the CSV data, maps age to the x-axis and fare to the y-axis, and renders a steel-blue filled area using `d3.area`. Linear scales, axes with labels, and a responsive SVG container structure the visualization.

Ssaitejakaranam10@gmail.com
84% match
Loading thumbnail…

Activity7_Que1

This pie chart visualizes the distribution of survival outcomes among Titanic passengers, separating data into "Survived" and "Did Not Survive" categories. Using D3 v6, the code loads a CSV file, aggregates records by the `Survived` attribute, and renders the result with `d3.pie` and `d3.arc`. Each slice is colored via `d3.scaleOrdinal` and labeled directly on the chart.

MMannava Priyanka Chowdary
84% match
Loading thumbnail…

SDA HW2-1

This example shows the survival distribution of Titanic passengers with a pie chart comparing the counts of survivors and non-survivors. D3 v5 loads the dataset via `d3.csv` from a GitHub gist, aggregates counts using `d3.rollup`, and renders the chart with `d3.pie` and `d3.arc` into an SVG. The visualization includes labels at each arc’s centroid via `arc.centroid`, a color scale from `d3.schemeSet2`, and an interactive legend built with D3 selections. Axis titles and a chart heading are added as SVG text elements.

Vvits.18731a0539@gmail.com
82% match
Loading thumbnail…

SDA HW2-1

This example shows the survival outcomes of Titanic passengers as a pie chart, separating the data into two categories: those who survived and those who died. The chart uses D3 v6 to load a CSV dataset from a GitHub gist, then computes aggregate counts for each outcome. The visualization is rendered as SVG using D3’s `pie` and `arc` generators, with a categorical color scale assigning green to survivors and red to non-survivors. A custom HTML legend is built alongside the chart to label each slice with its corresponding count, and extra elements like the initial heading are removed for a clean presentation.

Vvits.18731a0539@gmail.com
82% match
Loading thumbnail…

Fork of Assignment 2 - Pie Chart

A static pie chart displaying the survival distribution of Titanic passengers, split into two categories: "Survived" and "Not Survived." The chart reads data from a remote CSV file, parsing each row to increment counts based on the survival flag. It is rendered as an SVG using D3 v7, with slices drawn via `d3.arc` and positioned by `d3.pie`. The visualization includes a title, color-coded slices, and a simple legend, all styled with inline SVG attributes and CSS rules.

Ssaitejakaranam10@gmail.com
81% match
Loading thumbnail…

Activity 6

This pie chart displays the survival distribution of Titanic passengers, breaking down the total count into those who survived and those who did not. The visualization fetches a CSV file from a GitHub gist, parses the data, and counts occurrences based on the survival status column. It uses the Chart.js library with the Canvas API to render the pie chart, applying distinct blue and red colors to represent the two categories. The chart is configured with a non-responsive layout and a title that labels the data as "Survival Distribution on Titanic."

Ssaitejakaranam10@gmail.com
81% match