Skip to main content
SimilarExport ZIP
100%

Lab 7 - Interactivity

✓ Published0🌍 Public
TThanaporn-sk
Last edited Apr 1, 2017
Created on Apr 1, 2017

This interactive multi-line chart displays daily average temperatures for New York, San Francisco, and Austin over a year, sourced from a TSV file. The SVG visualization uses d3.tsv for data loading, d3.scaleTime and d3.scaleLinear for positioning, and d3.schemeCategory10 for color encoding. It incorporates a Voronoi overlay for hover detection, d3.zoom with clip paths for panning and scaling, and click interactions on city labels that maintain state, all rendered with d3.line and d3.axis components.

AI-generated description

This line chart is constructed from a TSV file storing the daily average temperatures of New York, San Francisco and Austin over the last year. The chart employs conventional margins and a number of D3 features:

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/3884955'>Lab 7 - Interactivity</a>

forked from <a href='http://bl.ocks.org/ngchwanlii/'>ngchwanlii</a>'s block: <a href='http://bl.ocks.org/ngchwanlii/74508bd80399640bd470e361474364c4'>Lab 7 - Interactivity</a>

gpl-3.0 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
94% 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
94% match
Loading thumbnail…

Multi-Series Line Chart-8/29

This interactive multi-series line chart displays daily average temperatures for New York, San Francisco, and Austin over a year from a TSV file. Users can zoom by scrolling or dragging, with three colored temperature trends drawn as SVG paths using a basis curve. The code uses d3.tsv for data parsing, d3.scaleTime and d3.scaleLinear for axes, and d3.scaleOrdinal for color encoding. A d3.voronoi overlay enables hover interactions, while d3.zoom handles the pan-and-zoom functionality on the SVG.

SShuangjiaoHu
90% 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
90% match
Loading thumbnail…

Lab3 - Multi-Series Line Chart

This multi-series line chart visualizes daily average temperatures for New York, San Francisco, and Austin over a year, using data loaded from a TSV file via d3.tsv. The x-axis employs a time scale with dates parsed by d3.time.format, while the y-axis uses a linear scale for temperature values. Each city’s temperature series is drawn as a separate colored line using d3.svg.line, with colors assigned from the category10 ordinal scale. The chart computes its x- and y-domains dynamically with d3.extent, d3.min, and d3.max, and uses d3.keys to identify the city columns in the dataset. Conventional margins are applied, and axes are rendered with d3.svg.axis. The visualization compares daily average temperatures across New York, San Francisco, and Austin over one year, highlighting seasonal differences among the three cities.

115Dkatz
90% match
Loading thumbnail…

Multi-Series Line Chart-8/29-4

This interactive multi-series line chart displays daily average temperatures for New York, San Francisco, and Austin over a year, loaded from a TSV file. Three colored lines represent each city, with a legend label at the end of each line. Clicking a label toggles the opacity of its corresponding line, while hovering over a label temporarily highlights that line and dims the others. The chart uses d3.tsv for data parsing, d3.timeParse and d3.scaleTime for the x-axis, d3.scaleLinear for the y-axis, d3.schemeCategory10 for colors, and d3.line with d3.curveBasis for smooth line rendering.

SShuangjiaoHu
90% match
Loading thumbnail…

Interactivity - MultiSeries Line Chart

This example shows daily average temperatures for New York, San Francisco, and Austin over a year, with each city as a colored line. The chart uses zooming and panning to explore the time axis, and users can click city labels to show or hide lines or hover to highlight one city. It loads data from a TSV file, parses dates with `d3.timeParse`, and renders SVG with `d3.line`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.schemeCategory10`. Interactivity relies on `d3.zoom` with custom event handlers for brushing and selection.

PPragyagarg
89% match
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