Skip to main content
SimilarExport ZIP
100%

Assignment11 Interactions

✓ Published0🌍 Public
Aahuynh8@dons.usfca.edu
Last edited Apr 21, 2024
Created on Apr 21, 2024

This example presents three temperature time-series lines for New York, San Francisco, and Austin, loaded as TSV data and rendered as SVG paths with a basis curve. It uses D3 v7 scales (`d3.scaleTime`, `d3.scaleLinear`, `d3.scaleOrdinal`) and axes (`d3.axisBottom`, `d3.axisLeft`). Users can hover over city labels to dim non-matching lines, click to toggle each line’s visibility, and reorder lines by hovering. The visualization demonstrates interactive selection, filtering, and layering through D3 selections and style manipulation.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

A11 - Interaction in D3

This interactive multi-series line chart shows daily temperature trends for New York, San Francisco, and Austin, rendered as SVG paths with distinct colors. The visualization supports pan and zoom through d3.zoom, with a rescaleX transform that dynamically updates the x-axis and redraws each line using d3.line with curveBasis smoothing. Hovering highlights a city’s label and line via CSS classes that increase stroke width and reduce opacity of other lines. Data is loaded from a TSV file using d3.tsv, with time parsed via d3.timeParse and scales defined by d3.scaleTime and d3.scaleLinear.

RRiya Mathur
89% match
Loading thumbnail…

interactions

This example shows temperature trends for New York, San Francisco, and Austin over several months, rendered as smooth, animated lines using D3.js v7. SVG paths represent each city’s time series, color-coded via a categorical scale. The visualization supports mouse interactions: hovering a city name highlights its line and dims others, while clicking toggles visibility. A zoom feature, powered by `d3.zoom`, rescales the x-axis to focus on date ranges, with brushed panning enabled. Data is loaded from a tab-separated file and parsed with `d3.timeParse`.

AAllen Ho
88% match
Loading thumbnail…

Interactions

This example shows a multi-series line chart of daily temperatures for New York, San Francisco, and Austin, with two interactive features. Hovering over a city’s label highlights its line by increasing stroke width and graying out the others, while clicking the label toggles that city’s line visibility. The visualization uses d3.line with curveBasis to draw smooth paths, d3.scaleTime and d3.scaleLinear for axes, and d3.schemeCategory10 for colors. Data is loaded as a TSV file via d3.tsv, and all rendering is done in SVG.

OOlha
88% match
Loading thumbnail…

D3 Interaction

This example shows an interactive multi-series line chart of average temperatures in New York, San Francisco, and Austin from October 2011 through April 2012, loaded from a TSV file. Using d3.tsv and D3’s time scale, the code renders three colored temperature curves with SVG paths and a basis curve interpolation. Users can hover over the chart to highlight one city’s line while dimming others, or click a line to toggle its visibility. Interactions rely on event handlers and D3 selection methods, with a `d3.axisBottom` and linear y-scale providing the axes.

Mmariahdiaz
88% match
Loading thumbnail…

A11 - Interaction

This example shows a multi-series line chart of daily temperatures for New York, San Francisco, and Austin, rendered as SVG using D3 v7. It demonstrates interaction: hovering over a line highlights it in color while others fade to light grey, and clicking toggles a line’s visibility. The data is loaded from a TSV file and parsed with `d3.timeParse`. The chart uses `d3.scaleTime`, `d3.scaleLinear`, `d3.line` with `d3.curveBasis`, and `d3.axisBottom`/`d3.axisLeft` for axes, with CSS transitions on stroke styling.

CChandana Srinivas
87% match
Loading thumbnail…

A11 Interaction

This example displays interactive multi-line charts of daily temperatures for New York, San Francisco, and Austin, based on a TSV data file. Users can zoom and pan the time axis using d3.zoom, and hover to highlight a city’s line while dimming others. Clicking a legend-like label toggles the visibility of that city’s line. The visualization is built with React, d3.v7, SVG, and animated transitions, using d3.line with curveBasis, d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal.

AAllen Jake Polintan
87% 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
87% match
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
87% match