Skip to main content
SimilarExport ZIP
100%

ICE7-SCATTERPLOT

✓ Published0🌍 Public
Kkpavithrasai@gmail.com
Last edited Mar 29, 2026
Created on Mar 29, 2026

This scatterplot visualizes Seattle weather data, plotting daily maximum temperature against precipitation and encoding weather type by color. Built with D3 v7 and React, it uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `schemeTableau10` for categorical colors, and `d3.axisBottom`/`d3.axisLeft` for labeled scales. The SVG renders circles with fixed radius and opacity, includes a weather legend, and loads data from a CSV file.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE6-Visualizations

This visualization presents three interactive weather charts for Seattle, displaying weekly maximum temperatures across the first 100 days, a scatter plot of temperature versus wind speed, and a combined line chart of daily temperature ranges with precipitation bars. Built with React and D3 v5, the example uses `scaleBand`, `scaleLinear`, and `line` with `curveMonotoneX` to render SVG elements from CSV data. The code processes the weather dataset into weekly aggregates and daily records, with responsive axes, gridlines, and labeled scales.

Kkpavithrasai@gmail.com
88% match
Loading thumbnail…

ice_7

This animated scatter plot visualizes daily weather measurements from Seattle, cycling through different quantitative variables on the x-axis every two seconds to reveal relationships between temperature, precipitation, and wind. Built with D3.js version 6.7.0, the visualization uses `scaleLinear`, `extent`, and `axisBottom` to render axes and smooth transitions via `transition().duration(1000)` to animate points as they reposition. Data is loaded from a CSV file using `d3.csv` with row parsing that converts string values to numbers. The reusable `scatterPlot` component pattern demonstrates how accessor functions can dynamically update axis mappings.

Kkpavithrasai@gmail.com
87% match
Loading thumbnail…

ICE7-PIECHART

This visualization shows the distribution of weather conditions in Seattle across a multi-year period, displaying the count of each weather type as pie slices with a legend annotating each category's total days. Built with React and D3 v7, it loads the CSV dataset via `d3.csv`, and the `pieChart` function uses D3's `pie`, `arc`, `scaleOrdinal`, `schemeTableau10`, and `rollup` APIs to aggregate counts, render SVG paths, and generate colored slices with labels. The chart is rendered as an SVG canvas sized to the browser window.

Kkpavithrasai@gmail.com
87% 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
83% match
Loading thumbnail…

ice7-linechart

This visualization shows the average maximum temperature in Seattle from 2012 to 2015, with a single line connecting yearly data points and value labels above each dot. The chart aggregates daily temperature records from a CSV file, calculating yearly means and plotting them against a linear year scale. Built with React and D3 v7, it uses `d3.rollup` for data aggregation, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.line` for rendering, with the SVG output filling the browser window.

Kkpavithrasai@gmail.com
83% 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
82% match
Loading thumbnail…

ICE-7 (Part-1)

This reusable scatter plot visualizes the relationship between temperature and humidity from weather data loaded via a CSV file. It uses D3 v7’s `d3.csv`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to render an SVG chart with steelblue circles that turn orange on hover. Axis labels are appended directly to the tick groups, and margins define the plot area within a 600x400 pixel container styled by external CSS.

Ppavankrishna441@gmail.com
82% match
Loading thumbnail…

Fork of Fork of Fork of ICE-6 Scatter Plot

This scatter plot visualizes average rainfall against average temperature, with each point colored by year (2010-2018) using a color mapping function. The visualization uses D3 v6’s `csv` loader to fetch data from a GitHub gist, `scaleLinear` for x and y axes, and `axisLeft`/`axisBottom` to render the axes. Points are drawn as SVG circles with a fixed radius of 5, positioned via the `scaleLinear` ranges, and the chart includes labeled axes for both variables. The rendering is done through direct SVG manipulation in a React environment.

Nnavyasrimeka9@gmail.com
82% match