Skip to main content
SimilarExport ZIP
100%

Data Visualization ICE5

✓ Published1🌍 Public
TTharun2022
Last edited Feb 27, 2022
Created on Feb 26, 2022
Forked from HTML Starter

This example displays a bar chart of the Titanic disaster dataset, with bars colored by survival status and gender, using D3.js v7 for data binding and SVG rendering. It shows the number of passengers per class and sex, with an interactive tooltip revealing exact values on hover. The page also includes a message container that reports the CSV file size, row count, and column count, demonstrating basic data loading and inspection. The code loads data from a GitHub-hosted CSV and uses `d3.csv` and `d3.select` for chart construction.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This interactive visualization presents multiple coordinated views of Titanic passenger data, including gender and survival pie charts alongside age and fare histograms. Users can filter by passenger class via dropdown, while clicking pie chart slices triggers linked selections across all views. The code uses D3.js with `d3.pie`, `d3.arc`, `d3.histogram`, and `transition.attrTween` for animated updates, rendered as SVG. Data originates from the Titanic passenger manifest, though the README references a different population dataset without visible integration.

Wwishcsdev
80% match
Loading thumbnail…

Untitled

This interactive dashboard visualizes the distribution of Titanic passengers across age, fare, sex, and survival status using D3.js. Histograms show age and fare distributions, while pie charts display categorical breakdowns. Users can filter the entire dashboard by clicking pie chart segments or selecting passenger classes. The visualization uses D3's data join pattern with `transition.attrTween` for smooth updating animations and SVG rendering.

Mmab3105
79% match
Loading thumbnail…

Line chart.js!

This example visualizes the ages of Titanic passengers as a line chart, plotting each passenger’s age in sequence along the x-axis. The chart uses D3.js v7 to load CSV data from a GitHub-hosted file, parse the values, and render an SVG with scales, axes, and a line generator. The code employs `d3.csv` for data loading, `d3.scaleLinear` for both axes, and `d3.line` to draw the path, with axes appended via `d3.axisBottom` and `d3.axisLeft`. The rendering is entirely SVG-based, showing a simple yet effective use of core D3 DOM manipulation and data binding.

Vvishnupriya eupuri
78% match
Loading thumbnail…

Gist 121ed23ef467b1372d47e2e67d2aea1c

This example visualizes the Titanic passenger manifest, mapping each first-class passenger’s fare and age group. It uses `d3.forceSimulation` to position circles by passenger attributes, with color encoding survival status and gender. The code performs data loading via `d3.csv` and filters the dataset before rendering with SVG circles. It highlights fare disparities and demographic clusters among survivors and non-survivors, drawing directly from the provided `titanic20180616_coma.csv` file.

DDarioCel
77% match
Loading thumbnail…

Qualitative Scatter Plot in D3

This qualitative scatter plot displays the relationship between passenger age, fare paid, and survival status for 887 Titanic passengers. Each circle represents a passenger, with blue and red indicating survival (1) or non-survival (0), using a color scale from D3’s ordinal scale. The visualization uses D3 v7 to load CSV data from a remote source and render SVG circles, axes, and a legend. The code specifically employs `d3.csv`, `d3.scaleLinear` for the x (age) and y (fare) axes, and `d3.legendColor` to create the categorical legend, with the chart positioned within an SVG container using custom margins.

EEunice Tu
76% match
Loading thumbnail…

Line chart.js!

This example builds a line chart from Titanic passenger data, plotting the relationship between Age and Fare for a subset of passengers. It uses D3.js v7 to load data from a CSV file via `d3.csv`, then slices the data to focus on a specific range of rows. The chart includes linear scales, axes with labels, and a line generator (`d3.line`), all rendered as SVG elements within an HTML page. The visualization illustrates how D3 can handle data ingestion, scaling, and basic chart construction in a straightforward workflow.

Ssriram.official9@gmail.com
76% match
Loading thumbnail…

Data Visualization - ICE-6 - Bar Chart

This visualization displays a horizontal bar chart comparing types of chest pain against age counts from a heart attack dataset. The chart uses React to manage state and render SVG elements, while d3-scale functions (scaleBand and scaleLinear) map categorical pain types to y-axis bands and age values to x-axis positions. The data is loaded via d3.csv from a GitHub gist, filtered to the first 12 records, and mapped with a switch statement to rename chest pain codes into descriptive labels. The visualization highlights the distribution of different chest pain types across age groups.

Rrajasrilekkala
75% match
Loading thumbnail…

reusable scatter

This example demonstrates a reusable scatter plot that visualizes Titanic passenger data, comparing age against fare and coloring points by gender. The visualization alternates between two halves of the dataset every five seconds, using a custom `scatterPlot` function built with D3 v6. The chart employs `scaleLinear` for axes, `scaleOrdinal` with `schemeCategory10` for colors, and `axisLeft`/`axisBottom` for tick marks. Data is loaded via `d3.csv` from a remote source, and the animation uses `setInterval` to switch plots, removing and redrawing SVG circles.

Ssriram.official9@gmail.com
75% match