Skip to content

Instantly share code, notes, and snippets.

View curran's full-sized avatar

Curran Kelleher curran

View GitHub Profile
@curran
curran / README.md
Last active August 29, 2015 14:16
Data Canvas Part 1 - Data
@curran
curran / README.md
Last active August 29, 2015 14:16
Data Canvas Part 2 - Line Chart
@curran
curran / README.md
Last active August 29, 2015 14:16
Data Canvas Part 3 - Bar Chart
@curran
curran / README.md
Last active August 29, 2015 14:16
Picking N Colors Automatically

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.

@curran
curran / README.md
Last active August 29, 2015 14:16
Data Canvas Part 4 - Colors
@curran
curran / README.md
Last active August 29, 2015 14:17
Scatter Plot Zooming

This program makes a scatter plot from Iris data set. Brushing in one plot zooms in the other.

@curran
curran / README.md
Last active August 29, 2015 14:17
Data Canvas Part 5 - More Data

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.

@curran
curran / README.md
Last active August 29, 2015 14:17
Chiasm Bar Chart and Line Chart

A demo of the Chiasm visualization runtime engine.

Click on numbers and colors in the configuration editor for interactive widgets that let you configure the visualizations.

@curran
curran / README.md
Last active August 29, 2015 14:17
Chiasm Layout Example

A demo of the Chiasm visualization runtime engine. Demonstrates the nested box layout and basic setup.

Click on numbers and colors in the configuration editor for interactive widgets that let you configure the visualizations. Also, click and drag the X lines in the dummy visualizations to see the changes propagate to the configuration.

@curran
curran / README.md
Last active August 29, 2015 14:17
Data Canvas Part 7 - Scatter Lines

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 5 minutes.

Draws from