Skip to main content
SimilarExport ZIP
100%

CMAPSS Dataset Viz v2.3

✓ Published0🌍 Public
JJun Suzuki
Last edited Jan 1, 2022
Created on Dec 24, 2021

This interactive scatter plot displays the CMAPSS aero-engine dataset, with time on the x-axis and a user-selected variable (altitude, Mach, TRA, or T2) on the y-axis. Users filter the data by unit and cycle via dropdown menus. Built with React and D3 v7, it renders SVG circles for each data point, using D3's scaleLinear for axes and extent for domain calculation, with tooltips showing exact values on hover.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

CMAPSS Dataset Viz v2.2

This interactive scatterplot explores sensor data from NASA’s CMAPSS turbofan engine dataset, plotting a selected y-axis attribute (altitude, Mach, TRA, or T2) against elapsed time for a chosen unit and cycle. Users filter data through three dropdown menus built with React state, while D3 v7’s `scaleLinear` and `extent` handle axes and scaling. The React component renders SVG circles with opacity, axes via custom `AxisBottom` and `AxisLeft` components, and includes tooltips showing raw values. Data is loaded asynchronously from a remote CSV using `d3.csv`.

JJun Suzuki
93% match
Loading thumbnail…

CMAPSS Dataset Sample 2.0

This interactive scatterplot visualizes flight traces from the CMAPSS turbofan engine dataset, plotting sensor readings such as altitude against elapsed time. Users filter the displayed trace by selecting a unit, flight cycle, and y-axis attribute from dropdown menus. The React application uses D3 v7 scales and axes to render SVG circles with opacity, while tooltips reveal exact coordinate values. Data is loaded as CSV files from GitHub gists.

JJun Suzuki
91% match
Loading thumbnail…

CMAPSS Dataset Sample 1.0

This visualization displays a scatter plot of aircraft altitude over time from the CMAPSS dataset, with each point representing a sensor reading. The React component uses D3 v7 scales via `scaleLinear` and `extent` to map data to SVG coordinates, while the axes are rendered as custom React components. The data is loaded asynchronously from a remote CSV file using D3’s `csv` function. Each circle includes a tooltip showing the exact time and altitude values.

JJun Suzuki
86% match
Loading thumbnail…

Test CMAPSS select

This visualization shows flight trace data from the CMAPSS dataset, displaying sensor readings over time for selected aircraft units. Users can switch between y-axis attributes (Altitude or TRA) and select different units via dropdown menus. The scatter plot uses d3.scaleLinear for both axes, with data loaded asynchronously from CSV files via d3.csv. React manages the interactive state for attribute and unit selection, while the SVG rendering is handled entirely through React elements rather than d3 selection methods.

JJun Suzuki
86% match
Loading thumbnail…

MTCARS Scatter Plot with Menus

An interactive scatter plot of the classic mtcars dataset lets viewers compare any two of four car attributes—mpg, cyl, disp, and hp—by selecting each axis from a dropdown menu. Built with React and D3 v5, it renders SVG circles whose positions are calculated with `scaleLinear` and `extent`, and axes are drawn using the custom `AxisBottom` and `AxisLeft` components. The plot displays values with a `siFormat` tick label and includes hover tooltips via SVG `<title>` elements.

BBizmundo
74% match
Loading thumbnail…

MTCARS Scatter Plot with Menus

This interactive scatter plot visualizes the mtcars dataset, letting users select which attribute (mpg, cyl, disp, hp) to plot on each axis. The chart displays circles for each car, with tooltips showing the x-axis value. Using React with D3 v5, the code implements a `Dropdown` component to update state and re-render the SVG. The `scaleLinear` function scales the data, while `AxisBottom`, `AxisLeft`, and `Marks` modules handle the visualization's rendering.

BBizmundo
74% match
Loading thumbnail…

Working stuff out - zz

This interactive scatter plot visualizes the relationship between any two numeric variables from the auto-mpg dataset, with dropdown menus enabling users to select which columns appear on the x and y axes. The visualization uses React for menu state management and d3.v5 for SVG rendering, employing scaleLinear, axisLeft, axisBottom, and transition.attrTween for animated circle resizing. Circles are colored with a gradient based on their x-axis position using d3.rgb, and the axes include gridlines and labels.

SSparkler
72% 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
71% match