Skip to content

Instantly share code, notes, and snippets.

View curran's full-sized avatar

Curran Kelleher curran

1.9k followers · 32 following
View GitHub Profile
@curran
curran / README.md
Last active January 26, 2016 19:32
Religions Bar Chart

A bar chart showing population of World religions in 2010. Data shown is from the Pew-Templeton Global Religious Futures Project.

This data is taken exactly as-is from the Pew-Templeton Web site, including labels for religions, and does not represent my opinions. This data may not be 100% accurate, I'm not sure. I'd be curious to see results from others sources that show a similar comparison of World religions.

The code for this chart is derived from example 105 of the screencast Introduction to D3.js. Also, the tool tip approach draws from d3noob’s Simple d3.js tooltips block

@curran
curran / README.md
Last active August 29, 2015 14:20
Axis Styles via JavaScript

This is a scatter plot of the Iris data set.

The purpose of this example is to show how to dynamically style D3 axes through JavaScript. This is a first step toward interactively configurable axis styles, and paves the way for creating fully stylized visualization modules that are purely JavaScript and require no addition of CSS tags on the page that will contain the visualization.

The code for this is derived from example 106 of the screencast Introduction to D3.js.

@curran
curran / README.md
Last active June 8, 2019 00:26
Unemployment in San Mateo County
@curran
curran / index.html
Last active December 7, 2019 19:28
D3 & Font-Awesome
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
</head>
<body>
<script src="script.js"></script>
</body>
</html>
@curran
curran / README.md
Last active August 29, 2015 14:21
Reusable Scatter Plot with Model.js

This is a scatter plot of the Iris data set.

The purpose of this example is to show one approach for using Model.js to make reusable visualization modules. This also introduces a way to isolate reusable reactive flows that are reusable between visualizations.

Notice that if you open this in a new window, it responds when you resize the browser window. This is coded in such a way that the visualization size can be controlled via CSS.

This example is a lead-in to The Reactivis Concept, which takes generalization of D3 patterns further.

The code for this is derived from example 106 of the screencast Introduction to D3.js.

@curran
curran / README.md
Last active August 29, 2015 14:21
The Reactivis Concept

This is a scatter plot of the Iris data set.

The purpose of this example is to show one approach to isolate reusable reactive flows that are reusable between visualizations, in an API called Reactivis, which stands for "reactive visualizations". This approach allows one to generalize D3 patterns ad infinitum.

Notice that if you open this in a new window, it responds when you resize the browser window. This is coded in such a way that the visualization size can be controlled via CSS.

The code for this is derived from example 106 of the screencast Introduction to D3.js.

@curran
curran / README.md
Last active August 29, 2015 14:21
Standalone Bar Chart
@curran
curran / README.md
Last active September 19, 2017 22:47
Standalone Scatter Plot
@curran
curran / README.md
Last active September 6, 2015 22:32
Standalone Line Chart
@curran
curran / README.md
Last active August 29, 2015 14:21
Generalizing D3 patterns ad infinitum

This is a scatter plot of the Iris data set.

This is an experiment to see how far one can go in generalizing D3 visualization patterns. The main file of interest here is reactivis.js. For example, a single code path creates all scales (x, y, size, color) and sets up their reactive dependencies. This is a proof-of-concept for a larger scale project that aims to provide a base layer for many different D3 visualizations.

Notice that if you open this in a new window, it responds when you resize the browser window. This is coded in such a way that the visualization size can be controlled via CSS.

The code for this is derived from example 106 of the screencast Introduction to D3.js.