Skip to main content
SimilarExport ZIP
100%

area chart

✓ Published1🌍 Public
Ssriram.official9@gmail.com
Last edited Mar 27, 2024
Created on Mar 27, 2024

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.

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…

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
85% 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
84% 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
81% 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
81% match
Loading thumbnail…

ICE-7_Priyanka

This visualization presents a scatter plot of the Titanic dataset, depicting the relationship between passenger age and fare price. Built as a reusable D3.js component, the chart uses color to encode passenger sex, with circles positioned along the axes for Age (years) and Fare ($). The visualization dynamically splits the dataset into two halves and toggles between them every five seconds, offering an animated comparison of different passenger subsets. The plot includes labeled axes and a categorical color scale, and the animation alternates between the two data halves to highlight patterns in the data.

Jjammigumpula.priyanka193@gmail.com
79% 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
77% 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
77% match
Loading thumbnail…

area chart

This area chart visualizes the relationship between age and weight, with age on the x-axis and weight on the y-axis, using a steelblue filled path. The D3.js v7 code loads a CSV dataset from a remote GitHub gist, parses it with `d3.csvParse`, and sorts the data by age. It then applies `d3.scaleLinear` for both axes and an `d3.area` generator to create the smooth region, rendering the chart as an SVG with labeled axes and a title.

RRakesh Kumar Chekuri
76% match