Skip to main content
SimilarExport ZIP
100%

ICE-7 Reusable Scatter Plot with Menu (Dhanusree Kodali)

✓ Published1🌍 Public
DDhanusree Kodali
Last edited Jul 3, 2022
Created on Jul 2, 2022
Forked from HTML Starter

This interactive scatter plot visualizes daily climate data, allowing users to explore relationships between date and various wind measurements (such as average, peak, and sustained wind speed/direction) through a dropdown menu that changes the y-axis attribute. The plot uses SVG rendering with React components and D3 scales (including `scaleTime`, `scaleLinear`, and `scaleOrdinal`), displaying colored circles that represent different weather stations. A color legend provides interactive filtering, where hovering over a station name highlights only that station's data points while fading others, using D3's `scaleOrdinal` for categorical color mapping and custom React components for axes and marks. The visualization demonstrates a reusable architecture by separating axis, legend, mark, and dropdown functionality into modular JavaScript files.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-7 Reusable Scatter Plot with Menu

This interactive scatter plot displays daily wind measurements from multiple weather stations over time, with each station represented by a distinct color in an ordinal color scale. A dropdown menu lets viewers switch the y-axis among five different wind attributes, including sustained wind speed and peak wind direction. Hovering over a color legend item triggers React’s state management to fade non-selected stations by 80%, isolating their data points for comparison. Built with React and SVG, the visualization uses D3 v6 utilities like `scaleLinear`, `scaleTime`, and `scaleOrdinal` for axes and coloring, while the `react-dropdown` library powers the menu, all rendered from CSV data fetched via D3’s `csv` function.

Bbharathsivakumar07
93% match
Loading thumbnail…

ICE7 - Reusable Scatter Plot

This interactive scatter plot, built with D3.js, visualizes weather data from a CSV file, mapping variables like Visibility, Temperature, and Humidity to the x- and y-axes. The chart is reusable, designed with a modular `scatterPlot` function that configures scales, axes, and circle radii. It animates by cycling through different x-axis variables every two seconds, using `setInterval` to update the plot. The SVG rendering includes clear axis labels and a custom font, drawing from the Iris Dataset for demonstration.

Ttrivikramcheluri@gmail.com
86% match
Loading thumbnail…

ICE7 Reusable Scatter

This interactive scatter plot uses D3 v6 to visualize restaurant menu data, showing Total Sales against Orders Count with points colored by Menu Category. The visualization animates the X-axis, periodically toggling between Orders Count and Stock Availability using setInterval. Built with React-compatible reusable chart components, the example imports scatterPlot.js and the d3 csv, scaleLinear, axisLeft, and axisBottom APIs. SVG circles render with custom colors for Main Course, Beverages, Desserts, and Appetizers, alongside a manually constructed legend and axis labels.

MMahendraGullinkala
84% match
Loading thumbnail…

ICE-6 Scatter Plot

This interactive scatter plot compares two variables, with dropdown menus above the chart allowing the user to switch which data columns are plotted on the x- and y-axes. The visualization is built with React and renders as an SVG using D3.js v5, leveraging D3’s selection and axis-generation methods to draw the points and tick marks. The source data is loaded from a local `v3` dataset, and the menus are populated dynamically from its column names.

RRevanthGrreddy
84% match
Loading thumbnail…

ICE7 - Reusable Scatter

This example presents a reusable scatter plot built with D3 that visualizes weather observations from a CSV dataset. The plot maps visibility, temperature, humidity, and wind speed onto x and y axes, with each point rendered as a distinct SVG path shape according to the weather summary. The scatter plot uses D3's `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct the axes and map data values. A `setInterval` function dynamically cycles the x-axis variable every two seconds, demonstrating the chart's reusability. The data loads asynchronously via `d3.csv` and the plot itself is defined as a reusable function following the Towards Reusable Charts pattern.

Ttrivikramcheluri@gmail.com
83% match
Loading thumbnail…

ICE 7 Reusable Scatter Plot.

This example demonstrates a reusable scatter plot component built with D3.js and React, visualizing the Iris dataset. The plot cycles through different feature combinations on the x-axis (petal width, sepal width, petal length, sepal length) every few seconds, with animated transitions updating the axes and circles. Points are colored by species (setosa, versicolor, virginica) using a custom color mapping, and a legend displays the species labels alongside their corresponding colors. The visualization uses D3 scales, axes, and SVG rendering, with the reusable `scatterPlot` function managing the plot structure and update logic.

NNikitha123171
82% match
Loading thumbnail…

Fork of ICE7 - Reusable Scatter Plotsdffxgch

This reusable D3 scatter plot visualizes weather data from a CSV file, mapping visibility, temperature, humidity, and wind speed onto x/y axes. It uses a chainable scatterPlot function with configurable accessors, scales, and margins, rendering SVG shapes that change (square, triangle, circle) based on the Summary column. The plot dynamically cycles through x-axis columns every two seconds, updating the visualization through d3’s scaleLinear, axisLeft, axisBottom, and join operations for seamless redraws.

Aakshitha.rapala@gmail.com
82% match
Loading thumbnail…

ICE 7 Reusable D3 Scatter Plot Divya

This reusable scatter plot visualizes room measurements from the Iris dataset, with each point’s shape encoding species and axes dynamically cycling through four numeric columns every 15 seconds. Built with D3 v6, it uses `scaleLinear`, `scaleOrdinal`, `symbol`, `axisLeft`, `axisBottom`, and `join` for SVG rendering. The chart animates by resetting its x-value accessor and re-invoking the chart function, demonstrating the reusable chart pattern.

Ddivyakota99
81% match