Assignment 8: Filtering

100%

Assignment 8: Filtering

✓ Published1🌍 Public

Last edited Apr 4, 2022

Created on Apr 4, 2022

This visualization plots daily temperature readings for New York, San Francisco, and Austin as smooth, colored lines over time using D3.js v7 with an SVG renderer. Users can click on a city label to toggle the visibility of its corresponding line, effectively filtering which data series are displayed. The chart includes a time-based x-axis, a temperature y-axis, and a zoom interaction (d3.zoom) for panning and scaling. Data comes from a TSV file loaded with d3.tsv.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Assignment 8: Brushing (with filtering)

This visualization displays daily temperature records for New York, San Francisco, and Austin from October 2011 to April 2012. Three colored lines represent each city, with a legend and hover interactions that highlight individual series while dimming others. Users can click a city label to hide or show its corresponding line, filtering the display. Built with D3 v7 and React, the code uses d3.tsv for data loading, d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal for scales, d3.line with curveBasis for path generation, and d3.axisBottom for the time axis.

Aamrubal

93% match

Loading thumbnail…

Assignment 8: Zoom and Pan (with filter and brushing)

This interactive visualization displays daily temperature readings for New York, San Francisco, and Austin across two years, rendered as multi-colored lines on a time-series chart. Users can zoom and pan along the time axis via mouse interactions, while clicking a city’s label toggles its line’s visibility and hovering temporarily grays out non-targeted lines. The code uses D3 v7’s `d3.zoom`, `d3.axisBottom`, and `d3.line` with basis curves, extracting data from a TSV file. React and SVG provide the framework and rendering, with CSS styling for lines and axes.

Aamrubal

90% 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…

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

86% match

Loading thumbnail…

Filtering and Brushing - Multi-Series Line Chart

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. Users can click a city’s line to isolate it by fading others, or hover to gray out the remaining lines. Built with D3 v4, it uses `d3.tsv`, `d3.timeParse`, scales like `d3.scaleTime` and `d3.scaleLinear`, and `d3.line` for SVG paths. Color encoding relies on `d3.scaleOrdinal` with `d3.schemeCategory10`, while transitions animate opacity and stroke changes.

115Dkatz

86% match

Loading thumbnail…

Assignment11 Interactions

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.

Aahuynh8@dons.usfca.edu

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

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

85% match