Polished Scatter Plot with Menus

100%

Polished Scatter Plot with Menus

✓ Published0🌍 Public

Last edited Oct 28, 2019

Created on Oct 3, 2019

Forked from Polished Scatter Plot with Menus

This interactive scatter plot visualizes USA flights on-time performance, showing relationships between days of the month and delay metrics. Users can select different y-axis attributes (DEP_DELAY, DEP_DEL15, ARR_DELAY, ARR_DEL15) via dropdown menus built with ReactDropdown. The visualization uses React with D3 scales (scaleTime, scaleLinear) to map data into SVG marks, with custom axis components rendering tick marks. Data is loaded from a CSV file using d3.csv, with each point rendered as a circle containing a title tooltip.

AI-generated description

A Scatter Plot for USA Flights on-time Performance Analysis.

This visualization is about USA flights on-time performance.

MIT Licensed

Similar vizzes

Loading thumbnail…

Bar Chart for USA Flights Delay _ React & D3

This interactive bar chart visualizes the average departure delay for USA flights by month. Each horizontal purple bar represents a month, with its length proportionally reflecting the mean delay in minutes. The visualization is built using React and D3.js (with `scaleBand` for the y-axis and `scaleLinear` for the x-axis), rendering as an SVG. Data is loaded from a remote CSV file, pre-processed to calculate monthly averages, and displayed with axis ticks and labels.

XXinting Yao

81% match

Loading thumbnail…

Pie Chart for USA Flights On-time Performance

This interactive pie chart visualizes USA flight on-time performance by showing departure delay hours for each day of the year. Each slice represents a single day, with the radial length of the slice encoding the delay value. Built with React and D3 v5, the visualization uses D3’s `arc` function to generate the SVG paths, with input data from a CSV file fetched via D3’s `csv` method. The chart is rendered entirely as SVG elements, where each slice’s outer radius is proportional to its corresponding delay metric.

XXinting Yao

80% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes daily temperature readings from Logan Airport weather data collected between 2016 and 2018. Built with React and D3 v5, the visualization renders an SVG chart where users can switch between TMAX and TMIN values for the y-axis using ReactDropdown menus, while the x-axis displays dates scaled with d3.scaleTime. The d3.csv loading pipeline parses the raw data, and d3.extent determines the domain for both linear and time scales. Circle marks include native SVG title tooltips showing formatted dates.

Rrohame

80% match

Loading thumbnail…

Pie Chart for USA Flights On-time Performance

A pie chart visualizes USA flight on-time performance by mapping each month to a slice, with the radial extent of each slice sized by the average departure delay. The chart uses a donut layout with an inner radius, rendering data loaded from a CSV file via `d3.csv`. Built with React and D3 v5, it employs the `d3.arc` generator to create SVG paths, with each slice’s outer radius scaled by the delay value. The visualization highlights monthly delay patterns in a simple, interactive-free format.

XXinting Yao

79% match

Loading thumbnail…

Fork of Pie Chart for USA Flights On-time Performance

This pie chart visualizes USA flight on-time performance by depicting monthly departure delays as radial segments. Each slice’s length corresponds to the delay value, with all slices rendered in light blue against a white stroke. The visualization uses React for component management and D3’s `arc` generator to compute the SVG paths, with data loaded via D3’s `csv` parser. The chart reads from a CSV file sourced from a GitHub gist on flight delay data.

RRevanthGrreddy

78% match

Loading thumbnail…

customized Scatter plot with menus

Two dropdown menus allow the viewer to select which airplane attributes to plot on the x and y axes. The interactive scatter plot uses a dataset of airplanes, showing each plane as a circle with a tooltip displaying its x-axis value. Built with React and D3 v5, the code uses `scaleLinear`, `extent`, and `csv` for data processing, while the custom `Dropdown` component and `Marks` map the selected attributes to the axes and circles within an SVG canvas.

Rrsulli4

78% match

Loading thumbnail…

Scatter Plot with Menus

A scatter plot displays air quality measurements, with dropdown menus allowing users to select which pollutant attribute (pollutant, PM10, ozone, or PM2.5) drives the x- and y-axes. Built with React and D3 v5, the visualization uses `scaleLinear`, `extent`, and `max` from d3 to map data to SVG coordinates. Axes are rendered by custom React components, and circles include native SVG `<title>` tooltips. Data loads asynchronously from a CSV using d3's `csv` method.

CChase Hall

77% match

Loading thumbnail…

IMPROVED Scatterplot using react and D3 with DropDown Menu

This interactive scatterplot displays the number of wait-time days from when a defensive asylum case entered the system to its exit, plotted against the entry date, with decision codes encoded by color. A dropdown menu filters the data by year, and hovering over the color legend fades unselected decision codes while tooltips show exact wait times. Built with React and D3 (v5), the visualization uses SVG elements, a time-scale x-axis that switches from year to month/day formatting depending on the selected range, and filters the dataset to show a "no data" message when a year has no entries. The dataset is loaded from a CSV URL.

GGeri D.

77% match