vits.18731a0539@gmail.com

@my-web-site·4 public vizzes

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.

Mar 27, 2025

Loading thumbnail…

SDA HW2-1

This pie chart visualizes the survival rates of Titanic passengers by splitting the dataset into two categories: non-survivors (0) and survivors (1). The chart uses a purple and green color scale to distinguish between the two groups, with labels showing the count for each category. Built with D3 v6, the visualization loads CSV data from a GitHub gist and uses the `d3.pie()` and `d3.arc()` functions to generate the SVG slices. A legend to the right of the chart displays the color-keyed categories, while text annotations label the axes as survival count and passenger total.

Mar 26, 2025

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.

Mar 26, 2025

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.

Mar 26, 2025