This program fetches data from the Data Canvas - Sense Your City API.
Curran Kelleher curran
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| font: 10px sans-serif; | |
| } | |
| .bar rect { | |
| fill: steelblue; |
This program makes a line chart from data in the Data Canvas - Sense Your City API.
It updates to the latest data automatically every 5 minutes.
Based on Data Canvas Part 1 - Data
This program makes a bar chart from data in the Data Canvas - Sense Your City API.
This shows the temperature for all cities with available data. The data is up to date, and updates every 5 minutes.
Based on Data Canvas Part 2 - Line Chart
An experiment in automatically picking N distinct colors for visualizing N distinct categories.
The LAB Color Space was designed with perception in mind. This program has a background that has a fixed L (lightness), and varies the A and B opposing color components along X and Y.
LAB is supposed to be perceptually uniform, meaning that distances in LAB space should correspond to perceptual distances. The idea with this experiment is that in order to pick a set of colors that are distinct and perceptually equidistant, we can pick colors that are equidistant in LAB space. A simple approach to doing this is to select colors along a circle in (A, B) space with a fixed L. This is what the program is doing, varying the number of colors from 1 to 20.
If you want to try this out in your visualizations, copy and paste the generateColors function.
This program makes a bar chart and line chart from data in the Data Canvas - Sense Your City API.
The line chart shows the temperature for all cities with available data for the past 24 hours, while the bar chart shows the current temperature of each city. The data is up to date, and updates every 5 minutes. Colors code the lines to the city.
Based on
This program renders a network diagram for a ModelJS reactive flow.
The input data is generated by an experimental ModelJS branch that computes the reactive flow graph at runtime.
Based on a previous implementation from July 2014
This program makes a scatter plot from Iris data set, showcasing how a single reusable visualization module can gracefully support optional visualization configuration properties like size and color.
Based on Data Canvas Part 3 - Bar Chart.
This program makes a scatter plot from Iris data set. Brushing in one plot zooms in the other.
This program fetches data from the Data Canvas - Sense Your City API.
It shows how the API can be accessed using async.js for asynchronous control flow. Data is fetched for each city separately, then combined, then output as CSV.
The API has a limitation of returning at most 1000 rows.
OlderNewer