Colm Lang A8 | Interaction

100%

Colm Lang A8 | Interaction

✓ Published0🌍 Public

Last edited Oct 13, 2022

Created on Apr 4, 2022

This interactive multi-line chart displays daily average temperatures for New York, San Francisco, and Austin over six months. Users can hover over city names to dim the other lines, click to toggle individual lines on or off, and cross out labels. The visualization uses D3 v7 with d3-voronoi.v1, rendering SVG paths with animated transitions. It loads temperature data from a TSV file using d3.tsv, applies d3.axisBottom and d3.axisLeft for scales, and colors city lines via d3.schemeCategory10.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Lab 7 - Interactivity

This line chart displays daily average temperatures for New York, San Francisco, and Austin over one year, using data loaded from a TSV file. The visualization employs conventional margins and a multi-series line layout, with color encoding via a categorical scale to distinguish cities. It uses D3 v4 features such as time and linear scales, axes, and line generators, while parsing the date column with time formatting. The chart is rendered in SVG, showing temperature trends across the year with three colored lines, and includes interactive hover effects that highlight the nearest data point and display its value in a tooltip.

CConorAspell

89% match

Loading thumbnail…

Lab 7 - Interactivity

This line chart displays the daily average temperatures of New York, San Francisco, and Austin over one year, with three colored lines representing each city. Built with D3 v4 and rendered as SVG, it uses conventional margins, time and linear scales, and categorical color encoding. The visualization leverages d3.tsv for data loading, d3.time.format for date parsing, and d3.svg.line for path generation, with axes and legends from D3's SVG utilities.

CConorAspell

89% match

Loading thumbnail…

Untitled

This interactive multi-line chart displays daily temperature trends for New York, San Francisco, and Austin, with each city represented by a colored curve on a shared time axis. Hovering over a line highlights it in its original color while graying out the others, and clicking a line toggles its visibility. Built with D3 v6, the visualization uses SVG rendering with animated transitions, d3.axisBottom and d3.axisLeft for axes, and d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal for scaling. Data is loaded via d3.tsv from a remote source.

Hhollyjpotter

88% match

Loading thumbnail…

Line Chart Visualization

A multi-line chart displays daily temperature readings for New York, San Francisco, and Austin from October 2011 through April 2012, with each city represented by a colored line. Built with D3 v7, the visualization supports interactive filtering: hovering over a city name highlights its line while dimming others, and clicking toggles a line's visibility. Users can also brush or zoom along the time axis. The SVG-based rendering uses d3.line with curveBasis, d3.scaleTime, d3.scaleLinear, and d3.zoom, with data loaded from a TSV file.

GGoogs

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

86% match

Loading thumbnail…

CS 360 A8: Interaction in D3

This interactive line chart displays daily temperature readings for New York, San Francisco, and Austin, with each city represented by a colored line. Users can hover over a line to highlight it while greying out the others, or click a line to toggle its visibility. The visualization uses D3 v7 with SVG rendering, d3.line with curveBasis for smooth paths, and d3.scaleTime and d3.scaleLinear for axes. Interactions are implemented through mouseover, mouseout, and click event handlers that manipulate stroke colors and visibility attributes.

SSean Sanchez

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

85% match

Loading thumbnail…

A7 - Interaction in D3

This example shows daily average temperatures for New York, San Francisco, and Austin plotted as smooth line charts over time. Users can hover over lines to reduce their opacity, click a line or label to remove that city from the chart, and zoom the time axis using the mouse wheel. The visualization is built with D3 v7, loading data from a TSV file, using `d3.line` with `curveBasis`, `d3.scaleTime`, and `d3.zoom`, and rendering to SVG with animated transitions.

SSimon Hackbert

85% match