ICE6-Visualizations

100%

ICE6-Visualizations

✓ Published0🌍 Public

Last edited Mar 11, 2026

Created on Mar 11, 2026

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE7-SCATTERPLOT

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.

Kkpavithrasai@gmail.com

88% 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

85% 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

85% 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

83% match

Loading thumbnail…

ICE-6

This visualization shows the maximum temperature for the first 11 weather stations from a CSV dataset, displayed as horizontal bars ranked by station name. Using React for component structure and D3 v5 for scales and data loading, the bar chart employs `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and renders grid lines and labels via SVG. The bars are colored steelblue, with tick marks and station names annotated directly in the SVG.

SSweetierams

83% match

Loading thumbnail…

Q3_Ice6

This visualization presents daily weather data through two D3.js v7 SVG charts: a multi-series line chart and a combined chart. It uses `d3.csv` to load data, `d3.rollups` with `d3.mean` to aggregate values by date, and `d3.line` with a monotone curve to render temperature, humidity, and rainfall trends over time. The line chart includes gridlines, axes, and a legend, while the second chart combines multiple mark types. Data is sourced from a remote CSV file containing date, temperature, humidity, rainfall, and wind speed columns.

SSaiSriSuryaBandaru@my.unt.edu

81% match

Loading thumbnail…

ice7-area chart

This area chart displays the average maximum temperature in Seattle from 2012 to 2015, with each year plotted as a data point connected by a line and a semi-transparent filled area. The chart includes labeled circles for each year’s value, axes with tick labels, and a title, using data from a CSV file. The visualization is built with D3 v7 within a React application, leveraging the `scaleLinear`, `area`, `line`, `axisBottom`, and `axisLeft` APIs to construct the SVG rendering.

Kkpavithrasai@gmail.com

81% match

Loading thumbnail…

line chart

This line chart visualizes Seattle weather trends in 2016, showing maximum, mean, and minimum temperatures over the first 200 days using three colored lines. The chart combines a multi-series line graph with overlaid bars representing the mean temperature. Built with D3 v7, the code loads CSV data and uses `d3.line()`, `d3.scaleLinear()`, and `d3.axisBottom()` to render the SVG visualization, including axes, labels, and a legend for temperature series.

PP Manisha

80% match