block by curran 19d42e98ce25291eb45d

Data Canvas Part 8 - Zooming

Full Screen

This program makes a scatter plot (with lines) and line chart from data in the Data Canvas - Sense Your City API and makes use of the Chiasm visualization runtime engine.

The line chart shows the temperature for all cities with available data. The program constantly fetches more data going back in time, in invervals of 24 hours with a resolution of 10 minutes.

You can use the bottom line chart to zoom in with the top line chart. This approach is inspired by the D3 Focus+Context Via Brushing example. Brushing in the top line chart causes data for only the brushed region to be shown in the scatter plot. This allows you to focus on specific regions of time.

Draws from

index.html

lineChart.js

main.js

requireJSConfig.js

scatterPlotWithLines.js

senseYourCityData.js

styles.css

visConfig.json