Skip to content

Instantly share code, notes, and snippets.

Marc Hansen marcdhansen

  • United States
Block or report user

Report or block marcdhansen

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@marcdhansen
marcdhansen / fiddle.css
Last active Dec 23, 2018
Example of getting gist to work with jsfiddle
View fiddle.css
body {
font: 12px Arial;
}
path {
stroke: steelblue;
stroke-width: 2;
fill: none;
}
.axis path, .axis line {
fill: none;
@marcdhansen
marcdhansen / README.md
Last active Aug 29, 2015
grapsing hand cursor
View README.md

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 Aug 29, 2015
Dancing Histograms in a Div
View README.md

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 / README.md
Last active Aug 29, 2015
Responsive Chart
View README.md

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 / index.html
Last active Aug 29, 2015
Simplified Margin Convention Example
View index.html
<!DOCTYPE html>
<html>
<head>
<style>
.axis line, .axis path {
shape-rendering: crispEdges;
stroke: black;
fill: none;
}
</style>
View index.html
<!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 / README.md
Last active Mar 6, 2017
Dancing Histograms
View README.md

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 Aug 29, 2015
Yet another example of append/update/exit (this one with animated transition)
View README.md

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 <p> tags will be added (for the '2'

@marcdhansen
marcdhansen / README.md
Last active Aug 29, 2015
Yet another example of append/update/exit
View README.md

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 <p> tags will be added (for the '2'

You can’t perform that action at this time.