Assignment 6

100%

✓ Published0🌍 Public

Last edited Oct 8, 2026

Created on Oct 8, 2026

This interactive D3.js visualization compares the effectiveness of animated transitions versus small multiples for exploring Texas monthly weather data. It plots 44 places across five months, using a scatterplot with high temperature on the x-axis and precipitation on the y-axis, while encoding wet days as point size and geographic region as color. Users can switch between an animated view, which cycles through months using a race timer, and a static small-multiples panel. The SVG rendering includes selection, hover tooltips, and axis gridlines, with data sourced from NOAA 1991-2020 normals.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Interaction Visualization

This visualization displays daily temperature trends for New York, San Francisco, and Austin over several months, using colored multi-series line charts rendered with SVG and animation. The code employs D3 v7’s `d3.line`, `d3.scaleTime`, and `d3.scaleOrdinal` to map the tab-separated dataset, while hover and click interactions—implemented via mouse event handlers—temporarily gray out or hide individual city lines. Axes are generated with `d3.axisBottom` and `d3.axisLeft` to show dates and temperatures in Fahrenheit.

DDuc Pham

77% match

Loading thumbnail…

Fork of Ice6_Question 3

This interactive D3.js visualization presents daily weather data across five months, using two complementary charts. The first chart is a multi-series line chart showing maximum and minimum temperature trends with red and blue lines, revealing a seasonal warming pattern from January to May. The second combines bar and line glyphs to compare rainfall with average temperature, using dual y-axes to display both measurements. The visualization is rendered as SVG using d3.v7, with gridlines, hover effects, and annotations that highlight the inverse relationship between precipitation and temperature as the seasons transition.

Ssrujana reddy

77% match

Loading thumbnail…

Fork of React & D3 Starter

This interactive React and D3.js visualization compares five encoding strategies for Texas weather data, from a simple position-only scatterplot to a fully repaired multivariate view. It demonstrates how hue, area, and shape channels alter readability, including a deliberately broken version that misuses sequential blues for categorical regions and maps a quantitative axis to symbol shapes. Built with React 19 and d3.v7, the chart uses `scaleLinear`, `scaleOrdinal`, `scaleSqrt`, and `scaleQuantize` APIs to render SVG marks, with tooltips and legend support. The interface lets users switch versions to inspect design choices and their consequences.

Rrifatfahmida00@gmail.com

76% match

Loading thumbnail…

Assignment 5

This interactive multi-line chart displays daily average temperatures for New York, San Francisco, and Austin from October 2011 to April 2012, with each city represented by a colored line that users can click to toggle visibility or hover to highlight. The visualization uses d3.tsv to load the data, d3.scaleTime and d3.scaleLinear for axes, d3.line with curveBasis, and d3.zoom for panning and scaling the time axis. City labels are clickable, and hovering dims other lines while moving the selected line to the front.

SShayRomayo

76% match

Loading thumbnail…

Texas NOAA Summary of the Month 1946-2020 with Menus & Legend

This interactive scatterplot displays Texas NOAA monthly climate summaries from 1946–2020, letting users switch which weather attribute is mapped to the y-axis via a dropdown menu. A color legend for weather stations highlights and fades data points on hover. Built with React and D3 v6, it uses `scaleTime`, `scaleLinear`, `scaleOrdinal`, and SVG circles for rendering, pulling CSV data from a GitHub gist.

AAndre J Denais

75% match

Loading thumbnail…

Fork of Texas NOAA Summary of the Month 1946-2020 with Menus & Legend

This interactive scatterplot displays monthly NOAA climate summaries for Texas from 1946 to 2020, with each point representing a weather station reading. A dropdown menu lets users switch between six meteorological attributes, including average temperature, wind speed, and precipitation metrics. The visualization uses React with D3 v6 scale functions to map temporal and quantitative data, while the ordinal color scale distinguishes three stations. Hovering over the color legend filters the corresponding data points and adjusts their opacity, providing focused comparison across the selected timeline and attribute.

EEngineerRajeev

75% match

Loading thumbnail…

Assignment3.2

This example visualizes monthly average temperature variations from January to December using a smoothed area chart. It renders an SVG graphic with red-filled areas and styled axes, drawing data from a CSV file hosted on GitHub. The visualization is built with D3 v5, using functions like `scalePoint`, `scaleLinear`, `area`, `curveBasis`, `axisBottom`, and `axisLeft` to create scales, the area path, and labeled axes. Axis ticks and labels are styled via CSS classes applied in the SVG output.

Ssiddhubhupathi@gmail.com

75% match

Loading thumbnail…

Assignment 8 -- Multi-Series Line Chart V7

This example shows a multi-series line chart comparing daily average temperatures in New York, San Francisco, and Austin over a period of several months. The visualization uses D3 v7 with SVG rendering to draw three smooth lines, one per city, with interactive features that dim unrelated lines on hover and allow users to toggle each city’s visibility by clicking its legend label. Zooming is supported via `d3.zoom` with a time-scaled x-axis, and the line geometry is generated using `d3.line` with `curveBasis`. Data is loaded from a TSV file.

Vvishusikka

75% match