Skip to content

Instantly share code, notes, and snippets.

View marcdhansen's full-sized avatar

Marc Hansen marcdhansen

  • United States
View GitHub Profile
@marcdhansen
marcdhansen / fiddle.css
Last active December 23, 2018 01:36
Example of getting gist to work with jsfiddle
body {
font: 12px Arial;
}
path {
stroke: steelblue;
stroke-width: 2;
fill: none;
}
.axis path, .axis line {
fill: none;
@marcdhansen
marcdhansen / README.md
Last active March 6, 2017 19:20
Dancing Histograms

Click on bar chart or legend to change which group moves to the y=0 baseline.

D3 version of Alan Dix's dancing histograms at http://www.meandeviation.com/dancing-histograms/

The problem

A stacked histogram allows three judgements: (i) the trends on the total height of the columns, (ii) the proportion of each category within each column and (iii) the trends in the lowest category. The trends, or even inter-column comparisons for any other category is very difficult as the blocks are at different heights.

The interactive stacked histogram solves this problem by allowing different trends to be analysed using the same dynamic graph. It is an example of a general princple of adding interactivity to existing paper visualisations.

@marcdhansen
marcdhansen / README.md
Last active August 29, 2015 14:05
grapsing hand cursor

Example showing how to switch between an open and closed hand cursor during mouse up and down events.

Modified from http://jsfiddle.net/uZ377/21/ for use with d3.

@marcdhansen
marcdhansen / README.md
Last active August 29, 2015 14:04
Dancing Histograms in a Div

Click on bar chart or legend to change which group moves to the y=0 baseline.

This version lets you set the chart's container div, for sizing.

D3 version of Alan Dix's dancing histograms at http://www.meandeviation.com/dancing-histograms/

The problem

A stacked histogram allows three judgements: (i) the trends on the total height of the columns, (ii) the proportion of each category within each column and (iii) the trends in the lowest category. The trends, or even inter-column comparisons for any other category is very difficult as the blocks are at different heights.

@marcdhansen
marcdhansen / index.html
Created August 6, 2014 03:01
D3 in a div
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
</head>
<body>
<div id="viz" style="position:absolute;width:100%;height:100%"></div>
<script type="text/javascript">
var div = d3.select("#viz");
var divWidth = parseInt(div.style("width"));
@marcdhansen
marcdhansen / index.html
Last active August 29, 2015 14:04
Simplified Margin Convention Example
<!DOCTYPE html>
<html>
<head>
<style>
.axis line, .axis path {
shape-rendering: crispEdges;
stroke: black;
fill: none;
}
</style>
@marcdhansen
marcdhansen / README.md
Last active August 29, 2015 14:04
Responsive Chart

To see the chart in action, open it in a new window. When you resize the new window, the chart will update to reflect its new size.

@marcdhansen
marcdhansen / README.md
Last active August 29, 2015 14:04
Yet another example of append/update/exit

Click to add elements.

Hit any key to remove an element.

Appended elements appear in red.

Note: We begin with two <p> tags and this data array: [0, 1, 2]. So the first time through, the '2' element is not initially bound to a <p> tag. The first click will add a '3' element and append <p>'s for all the unbound elements. In this case, two new `` tags will be added (for the '2'

@marcdhansen
marcdhansen / README.md
Last active August 29, 2015 14:04
Yet another example of append/update/exit (this one with animated transition)

Click to add elements.

Hit any key to remove an element.

Appended elements appear in red.

Note: We begin with two <p> tags and this data array: [0, 1, 2]. So the first time through, the '2' element is not initially bound to a <p> tag. The first click will add a '3' element and append <p>'s for all the unbound elements. In this case, two new `` tags will be added (for the '2'