ScatterPlotData

100%

ScatterPlotData

✓ Published0🌍 Public

Last edited Apr 27, 2024

Created on Apr 27, 2024

This scatter plot displays the relationship between the year and the number of aboard passengers for five major airlines, with each operator distinguished by color from a category20 scheme. The visualization is built using Vega-Lite and D3 v5, loading data from a CSV file via D3's `csv` function. The chart renders as SVG, with tooltips displaying the operator name. Configurations customize axis tick colors and guide label styles.

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…

Fork of Crop_Yield Data

A scatter plot displays annual airline passenger counts for five operators—Aeroflot, United Air Lines, Pan American World Airways, American Airlines, and Northwest Orient Airlines—filtered from a remote CSV dataset. Each circle encodes the year on the x-axis, passenger volume on the y-axis, and operator via color. Built with Vega-Lite and rendered through the vega-lite-api, the visualization loads data using d3.csv, applies custom axis styling from config.js, and includes interactive tooltips.

Nnavyasrimeka9@gmail.com

84% match

Loading thumbnail…

A4 - Scatter Plot in D3

This example visualizes the total number of flights per year from 2003 to 2016 as a scatter plot, where each point represents the total flights for a particular year. The visualization uses D3.js version 7 to render circles on an SVG canvas, with the x-axis mapping years using `d3.scaleBand()` and the y-axis using a linear scale via `d3.scaleLinear()`. Data is loaded from a CSV file using `d3.csv()`, with axes and labels created through `d3.axisBottom()` and `d3.axisLeft()`. The code originates from a VizHub v3 project that supports interactive widgets and continuous hot reloading.

Rronnieferrufino4908@gmail.com

78% match

Loading thumbnail…

Name,Gender, Total Flights

This example visualizes airline passenger data by country, gender, and total flights. A scatterplot encodes country on the x-axis, total flights on the y-axis, and uses circle size to represent flight counts, with gender distinguishing color and tooltips revealing passenger names. The visualization uses vega-lite-api to construct the specification, with vega and vega-lite rendering the chart, while d3.csv loads the dataset from a GitHub repository. The config module customizes axis and label styling for improved readability.

Mm1k3yp

78% match

Loading thumbnail…

Line Chart

This line chart shows the number of passengers using different airlines from 2005 to 2019, with each airline’s trend encoded by a distinct color. The vertical axis represents passenger counts, the horizontal axis indicates the year, and it includes both domestic and international flights. It uses d3.v4 with SVG rendering, where the `line()` generator creates the paths and `d3.scaleTime` maps the time data. The design includes axis labels, a legend to identify airlines, and smooth animated transitions via `transition.attrTween` to update the lines.

Pphemmati

77% match

Loading thumbnail…

Airlines Safety VegaLite

The visualization plots airline safety incidents from 1985–1999 against incidents from 2000–2014, with each point’s color and tooltip encoding available seat-kilometers per week. It uses the Vega-Lite API (vl) to define a circle mark, with D3 v6 for CSV loading via d3.csv, and renders through Vega’s SVG view. The chart config customizes axis and label styles, while the tooltip handler is provided by vega-tooltip. Data comes from FiveThirtyEight’s airline-safety dataset.

Ddvinubius

76% match

Loading thumbnail…

line chart

This line chart displays monthly airline passenger load factors for six major airports, with each airport represented by a distinct colored line and a matching legend. The data, loaded from a CSV file, is parsed and grouped by airport using D3 v7’s data join and scales. The visualization uses `d3.scaleLinear` for axes, `d3.line` to generate SVG paths, `d3.scaleOrdinal` with `d3.schemeCategory10` for colors, and `d3.axisBottom` and `d3.axisLeft` for the axes. The SVG rendering approach is used throughout.

AArbie Hsu

76% match

Loading thumbnail…

2 dimensional Scatter Plot

A two-dimensional scatter plot displays the relationship between aircraft price and year of manufacture, with each data point representing a specific aircraft model. The visualization uses D3 v5 with SVG rendering, plotting seven aircraft types across a linear scale for both axes. The chart includes labeled axes, gridlines, and a title, with interactive hover effects that enlarge data points using D3 transitions. Data is loaded from a CSV file using the `csv` function, and the code employs `scaleLinear`, `axisLeft`, `axisBottom`, and `extent` to construct the visualization.

FFhouston17

75% match

Loading thumbnail…

Untitled

This interactive line chart displays the number of passengers for seven U.S. airlines from 2000 to 2015, with each airline represented by a colored line. Users can hover over a line to highlight it and dim the others, while moving the mouse over a line reveals the airline’s name at the top of the chart. The visualization uses d3.nest to group the data by airline, d3.scaleTime and d3.scaleLinear for axes, and d3.line for path generation. SVG rendering with CSS transitions animates opacity and stroke-width changes during hover interactions.

Pphemmati

75% match