Skip to main content
SimilarExport ZIP
100%

Activity 6 Q2

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

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.

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

area chart

This area chart visualizes the relationship between passenger age and fare from a Titanic dataset, using a subset of eight data points. The chart employs D3.js v7 to create an SVG-based area graph, with age on the x-axis and fare on the y-axis. The area is filled in steelblue beneath a path generated by `d3.area()`, while `d3.axisBottom` and `d3.axisLeft` provide labeled axes. Data is loaded asynchronously via `fetch` and parsed with `d3.csvParse` from a remote CSV source.

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

Activity 6 Q2

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.

Ssaitejakaranam10@gmail.com
84% 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
81% match
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
80% match
Loading thumbnail…

Activity7_Que1

This pie chart visualizes the fares of the first ten passengers from a Titanic dataset, labeling each slice with its dollar amount and listing passenger names in a color-coded legend. Built with D3 v6, it loads CSV data via `d3.csv`, converts fares to numbers, and uses `d3.pie` and `d3.arc` to generate SVG paths. A sequential `d3.scaleOrdinal` with `d3.schemeCategory10` assigns colors, while labels and legends are positioned using arc centroids and SVG text elements.

MMannava Priyanka Chowdary
80% 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
80% match
Loading thumbnail…

question 6

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.

Vvinaykollapudi@my.unt.edu
79% match