A sunburst is similar to the treemap, except it uses a radial layout. The root node of the tree is at the center, with leaves on the circumference. The area (or angle, depending on implementation) of each arc corresponds to its value. Sunburst design by John Stasko. Data courtesy Jeff Heer.
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
key | value | date | |
---|---|---|---|
Group1 | 37 | 04/23/12 | |
Group2 | 12 | 04/23/12 | |
Group3 | 46 | 04/23/12 | |
Group1 | 32 | 04/24/12 | |
Group2 | 19 | 04/24/12 | |
Group3 | 42 | 04/24/12 | |
Group1 | 45 | 04/25/12 | |
Group2 | 16 | 04/25/12 | |
Group3 | 44 | 04/25/12 |
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> | |
<html> | |
<head> | |
<title>Chernoff Smileys</title> | |
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.5.0"></script> | |
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?2.5.0"></script> | |
<style type="text/css"> | |
</style> | |
</head> |
This is a D3.js Heatmap example showing how the highest sun position of the day (which directly correlates with average temperature) changes over the year depending on the latitude of the place. The actual temperature chart would be shifted to the right a bit beacuse of thermal lag.
The data for the chart is calculated using SunCalc.
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
var Routes = (function() { | |
var _ = {}, ctor = function(){}; | |
_.bind = function bind(func, context) { | |
var bound, args, slice = Array.prototype.slice; | |
args = slice.call(arguments, 2); | |
return bound = function() { | |
if (!(this instanceof bound)) return func.apply(context, args.concat(slice.call(arguments))); | |
ctor.prototype = func.prototype; | |
var self = new ctor; | |
var result = func.apply(self, args.concat(slice.call(arguments))); |
This simple script will take a picture of a whiteboard and use parts of the ImageMagick library with sane defaults to clean it up tremendously.
The script is here:
#!/bin/bash
convert $1 -morphology Convolve DoG:15,100,0 -negate -normalize -blur 0x1 -channel RBG -level 60%,91%,0.1 $2
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
<html> | |
<head> | |
<title>Cyclic Sankeys</title> | |
<style type="text/css"> | |
#chart { | |
height: 500px; | |
} | |
.node rect { | |
cursor: move; |
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> | |
<html> | |
<head> | |
<script type="text/javascript" src="http://d3js.org/d3.v2.js"></script> | |
<script type="text/javascript" src="https://rawgithub.com/cfergus/d3-plugins/master/sankey/sankey.js"></script> | |
<title>Sankey Diagram</title> | |
<style> |
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> | |
<html> | |
<head> | |
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> | |
</head> | |
<body> | |
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.6.0"></script> | |
<script type="text/javascript"> | |
var svg = d3.select("body").append("svg") |
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-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
margin: auto; | |
position: relative; | |
width: 960px; | |
} |
OlderNewer