Skip to main content
SimilarExport ZIP
100%

question 6

✓ Published0🌍 Public
Vvinaykollapudi@my.unt.edu
Last edited Oct 22, 2024
Created on Oct 22, 2024
Forked from Hello VizHub

A scatter plot displays Titanic passengers, mapping Fare on the x-axis and Age on the y-axis. Each passenger is represented by a star or diamond symbol, colored red for non-survivors and green for survivors, using the D3.js library with SVG rendering. The chart loads data from a CSV file via `d3.csv`, processes missing values, and uses `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` for axes. Custom D3 symbols and a survival-based color scale reveal the relationship between fare, age, and survival outcome.

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…

Ice6_question2

This scatter plot visualizes the relationship between passenger age and fare price in the Titanic dataset, with each circle representing a passenger and colored by survival status (green for survived, red for did not survive). The visualization uses D3.js v7 with SVG rendering, loading data asynchronously via `d3.csv` from the public Titanic dataset on GitHub. D3 scales (`d3.scaleLinear` for axes and `d3.scaleOrdinal` for colors) map data values to pixel positions, while `d3.axisBottom` and `d3.axisLeft` generate the axes. Hover effects increase point opacity, and a legend distinguishes survival outcomes.

Ssrujana reddy
89% 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
88% match
Loading thumbnail…

Activity6-question3

This interactive scatter plot visualizes the Titanic dataset, showing the relationship between passenger fare and age as individual steelblue circles. The visualization uses D3 v6 with an SVG rendering approach, employing `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` to map the data. Data is loaded via `d3.csv` from a GitHub-hosted CSV file, with the chart sized to the full browser window and axes labeled "Age" and "Fare". The plot provides a straightforward view of fare versus age distribution across all passengers.

Mmeenam1106@gmail.com
88% match
Loading thumbnail…

task3

This scatter plot visualizes the Titanic dataset, plotting passenger age against survival status (0 or 1) with steelblue circles. The code uses D3 v6 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load the data, map the values, and render the axes in an SVG. Data is fetched from a remote gist URL, and the visualization fills the full browser window with labeled axes for Age and Survived.

Kkeerthanachinthalapally@gmail.com
85% match
Loading thumbnail…

reusable scatter plot

This reusable scatter plot visualizes the relationship between passenger age and fare from the Titanic dataset, colored by gender. Built with D3.js v6, it uses an SVG-based rendering approach with scales that adapt to the data domain. The x-axis represents age in years, the y-axis displays fare in dollars, and each circle is colored according to the passenger's gender using a categorical color scale. The code follows a modular, reusable function pattern, allowing the chart to be easily configured with different dimensions, data, and accessor functions. Axis labels clearly identify the variables, and the plot updates dynamically based on the data provided.

Vvishnupriya eupuri
83% match
Loading thumbnail…

Fork of ICE-7

This reusable scatter plot visualizes the Titanic dataset, mapping age against fare while encoding survival status through symbol shapes (diamonds for deceased, triangles for survivors) and sex through color. Built with D3 v7, the chart employs d3.scaleOrdinal, d3.symbol, and d3.axis functions within a reusable component pattern, rendering SVG paths with animated hover tooltips. The visualization includes gridlines, axis labels, and a legend, with color scales distinguishing male and female passengers.

MMuraliMohanMekala@my.unt.edu
81% 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
81% match
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
80% match