Skip to main content
SimilarExport ZIP
100%

ice 7 reusable scatter plot

✓ Published2🌍 Public
Uuguggila@gitam.in
Last edited Oct 27, 2025
Created on Oct 27, 2025

This reusable scatter plot shows the relationship between elevation and average temperature for mountain peaks, with points colored by continent and hover tooltips revealing additional rainfall data. Built with D3 v7, the visualization uses a custom `scatterPlot()` function with getter/setter methods that allow the chart's width, height, and other properties to be configured externally. Axes, gridlines, and a color legend are generated using `d3.axisBottom`, `d3.axisLeft`, and `d3.scaleOrdinal`, while circles are positioned with `d3.scaleLinear` scales. The SVG rendering includes an interactive `<title>` element for each point showing mountain details.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE 7 AREA chart by umesh

This area chart visualizes the relationship between solar radiation and elevation for global mountain climate data. The chart uses a blue filled area with a monotone curve to connect data points, which are also marked by individual dots that display tooltips with mountain names and values. Built with D3 v7, the visualization loads CSV data from a Gist URL, uses linear scales for both axes, and includes gridlines, axis labels, and a title. The code leverages D3's `scaleLinear`, `axisBottom`, `axisLeft`, `extent`, and `area` APIs to render the SVG output.

Uuguggila@gitam.in
78% match
Loading thumbnail…

ice 7 line chart by umesh

This line chart visualizes solar radiation against elevation for global mountain climate data. The blue line and circular markers show the relationship between two continuous variables, sorted by elevation to create a smooth monotone curve using `d3.curveMonotoneX`. The chart uses D3 v7 with `d3.csv` loading, `d3.scaleLinear` for both axes, and `d3.axisBottom`/`d3.axisLeft` for labeled axes with gridlines. Hover tooltips appear through SVG `<title>` elements, displaying each mountain's name, elevation, and radiation value. The data comes from a remote CSV file containing Global Mountain Climate measurements.

Uuguggila@gitam.in
78% match
Loading thumbnail…

ICE 7 Q1

This example presents a reusable scatter plot that explores the relationship between tree height and circumference, with points colored and shaped by species. Built with D3 v7, it renders SVG symbols and includes interactive tooltips that display species, height, and circumference values on hover. The chart leverages a custom `scatterPlot` function with getter/setter methods for configurability, and uses `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.axisBottom`, and `d3.axisLeft` to construct the visualization. Data is loaded asynchronously from a remote CSV file.

Aanirudhrao345@gmail.com
77% 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
76% match
Loading thumbnail…

Reusable Scatter Plot

This reusable scatter plot displays population versus area for geographic data, with points colored by continent. The visualization uses D3.js v7 to load data via `d3.tsv`, applying a custom chart module that defines scales, axes, and tooltips. It renders circles positioned with `scaleLinear` and colored via `scaleOrdinal`, while interactive mouseover events trigger tooltips showing the point's label and values.

AAnurup Reddy
76% match
Loading thumbnail…

Reusable Scatter Plot for ICE-7

A reusable scatter plot displays three numeric attributes—weight, height, and price—from a CSV dataset, letting users switch axes via dropdown menus. Built with D3 v6, it uses `d3.scaleLinear` and `d3.axisBottom`/`d3.axisLeft` to render SVG axes, while `d3.selectAll('circle')` binds data points as steelblue circles. The chart updates by removing and reappending axes and circles on dropdown changes.

NNagasharan Sai Nandyala
76% 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
75% match
Loading thumbnail…

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

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.

DDhanusree Kodali
75% match