Skip to main content
SimilarExport ZIP
100%

Time Series with Interaction

✓ Published0🌍 Public
CChandana Srinivas
Last edited Apr 22, 2024
Created on Apr 20, 2024
Forked from HTML Starter

This example presents monthly housing data from January 1991 to April 2013, displaying two time series: the Housing Price Index (HPI) and the number of homes sold. The visualization uses D3.js v7 with SVG rendering and an animated, interactive line chart. Users can hover over a line to highlight it while dimming others to light grey, or click a series to toggle its visibility. The implementation leverages `d3.line`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.axisBottom` within a React framework.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

rvasp2

This example visualizes two time series of housing affordability indices—new and used asking prices—as separate line charts overlaid on a shared time axis. The data spans 2013 to 2016, sourced from a small CSV file. The visualization uses D3.js v4 to parse the dates, scale the x- and y-axes with `d3.scaleTime` and `d3.scaleLinear`, and draw smooth lines with `d3.line` and `d3.curveBasis`. Two independent y-scales (left and right) are defined, with gridlines and axis ticks generated via `d3.axisBottom`, `d3.axisLeft`, and `d3.axisRight`. The rendering is done in SVG, with line strokes colored MidnightBlue and Orange.

335degrees
75% 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
74% match
Loading thumbnail…

Interaction

This example demonstrates interactive multi-series time-series data visualization, showing temperature trends for New York, San Francisco, and Austin. Users can hover to highlight a specific line, click to toggle its visibility, and zoom along the x-axis using d3.zoom with rescaleX. Rendering uses SVG with d3.line and curveBasis, while the data loads from a TSV file parsed via d3.tsv and d3.timeParse. Styling applies CSS stroke properties, and the React framework supports the interaction handling.

PPranay Matalia
73% match
Loading thumbnail…

ICE-7

This visualization shows the change in house prices over time, plotting yearly data points connected by a line to reveal the overall price trend. Using D3 v5, the code imports specific modules like `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to construct the chart. Data is loaded from an external CSV file, with cost values converted to numbers and years to JavaScript Date objects. The SVG output includes labeled axes with gridlines, a rotated y-axis label, and a bold title, all styled through external CSS.

KKovvuri Supraj
73% match
Loading thumbnail…

HTML Starter

This example shows a time series of monthly stock price data with a focus and context view. The main chart displays the price trend as an area chart, while a smaller brushable overview allows users to select a date range. The selection is reflected in the main chart through a coordinated zoom and pan interaction. The visualization is built with D3 v5, using `d3.brushX` for the range selection and `d3.zoom` for pan and zoom transforms. The SVG rendering uses `d3.area` with a monotone curve, and the data is loaded from a CSV file containing date and price pairs.

RRostyslav
73% match
Loading thumbnail…

The housing market was greatly impacted in March and April. However, the impact was reversed quickly since June.

Three overlaid line charts compare average new housing listings across 2018, 2019, and 2020, highlighting a sharp decline in March and April 2020 followed by a rapid recovery by June. The visualization uses React with D3 v5 scales and line generators with curveBasis, rendering to SVG. Red, blue, and black paths represent each year, while dropdown menus allow switching between x-axis attributes like day of year and y-axis metrics such as average listings. Data comes from Redfin’s data center.

Yyeezhu112
73% match
Loading thumbnail…

ICE-7 Line Chart

This example visualizes house prices over time using a line chart with a filled area beneath the curve, rendered as SVG in a React-based VizHub project. The chart uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `line`, `area`, and `curveBasis` to draw the smoothed trend, with axes from `axisBottom` and `axisLeft`. Data is loaded via `csv` from a remote GitHub Gist, parsed into `Date` and numeric cost values, and styled with CSS classes for bold black lines and a blue fill.

Aachyutanandmishra17@gmail.com
73% match
Loading thumbnail…

Fork of activity 7.2

This example shows an annual house price index from 2000 to 2010, highlighting a sharp rise in prices through 2006 followed by a decline. A blue-to-cyan linear gradient fills the area under the line, created with `d3.area()`. The visualization uses `d3.scalePoint()` for the year axis and `d3.scaleLinear()` for the price axis, with axes generated by `d3.axisBottom()` and `d3.axisLeft()`. The SVG chart is rendered with D3 v7.

Jjayakrishnanallani5@gmail.com
72% match