Skip to content

Instantly share code, notes, and snippets.

View billdwhite's full-sized avatar

Bill White billdwhite

13 followers · 8 following
View GitHub Profile
@billdwhite
billdwhite / dabblet.css
Created October 17, 2012 04:05
The first commented line is your dabblet’s title
/**
* The first commented line is your dabblet’s title
*/
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;
@billdwhite
billdwhite / USA_data.js
Created November 25, 2012 01:02 — forked from paulirish/USA_data.js
d3 SVG treemap
USA =
{'name': 'data', 'children': [
{'name':'A', 'desc':"Communicable, maternal, perinatal and nutritional conditions", 'children':[
{'name':'A01', 'desc':"Tuberculosis", '90FE':0, '90FL':0, '90FP':.000484, '90F1':.000857, '90F5':.000954, '90F10':.000915, '90F15':.000679, '90F20':.001865, '90F25':.002201, '90F30':.002423, '90F35':.001872, '90F40':.001363, '90F45':.001124, '90F50':.000934, '90F55':.000866, '90F60':.000818, '90F65':.000846, '90F70':.00086, '90F75':.000809, '90F80':.000549, '00FE':0, '00FL':0, '00FP':.000539, '00F1':.001017, '00F5':.000981, '00F10':.000816, '00F15':.000609, '00F20':.001216, '00F25':.001175, '00F30':.001267, '00F35':.000935, '00F40':.000713, '00F45':.000735, '00F50':.000596, '00F55':.000584, '00F60':.000544, '00F65':.000565, '00F70':.000608, '00F75':.000603, '00F80':.000399},
{'name':'A02', 'desc':"HIV/AIDS", '90FE':.023124, '90FL':.002457, '90FP':.023525, '90F1':.098902, '90F5':.103213, '90F10':.06633, '90F15':.078107, '90F20':.142801, '90F25':.114696, '90F30':.122893, '90F35'
@billdwhite
billdwhite / index.html
Last active January 30, 2016 05:21
D3 Treemap with Headers - DIV Labels
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Treemap - Neat Zoom Effect</title>
<script type="text/javascript" src="./browserdetect/browserdetect.js"></script>
<script type="text/javascript" src="./d3/d3.js"></script>
<style type="text/css">
body {
overflow: hidden;
@billdwhite
billdwhite / index.html
Last active December 9, 2015 20:39
D3 Treemap with Headers - SVG Labels
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Treemap - Neat Zoom Effect</title>
<script type="text/javascript" src="./d3/d3.js"></script>
<style type="text/css">
body {
overflow: hidden;
margin: 0;
@billdwhite
billdwhite / index.html
Created June 5, 2013 23:20
Tree Graph with Phases Below Leaf Nodes
<html>
<meta charset="utf-8">
<style>
text {
font-size: 12px;
font-family: san-serif;
}
.phase text {
font-size: 5px;
font-family: san-serif;
@billdwhite
billdwhite / demo_treemap_04_wrappinglabels.html
Last active November 20, 2020 21:25
treemap with truncating labels
<html>
<head>
<title>Treemap with Wrapping and Truncated Labels</title>
<meta charset="utf-8">
<!-- poor man's browser detection -->
<!--[if IE]><script type="text/javascript">window['isIE'] = true;</script><![endif]-->
<script type="text/javascript" src="./d3/d3.js" charset="utf-8"></script>
<style type="text/css">
html, body {
@billdwhite
billdwhite / chart.js
Last active March 7, 2016 20:42
d3 flow tree layout
d3.custom.chart.flow = function() {
// public variables with default settings
var margin = {top:10, right:10, bottom:10, left:10}, // defaults
padding = {top:20, right:10, bottom:10, left:10},
transitionDuration = 300,
chartGroup,
container,
svg,
width,
@billdwhite
billdwhite / chart.js
Last active December 25, 2015 06:09
d3 flow tree layout 2
d3.custom.chart.flow = function() {
// public variables with default settings
var margin = {top:10, right:10, bottom:10, left:10}, // defaults
padding = {top:20, right:10, bottom:10, left:10},
transitionDuration = 300,
chartGroup,
container,
svg,
width,
@billdwhite
billdwhite / index.html
Last active February 7, 2023 05:49
d3 treemap with child highlighting
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Treemap - Neat Zoom Effect</title>
<script type="text/javascript" src="http://www.billdwhite.com/wordpress/wp-content/js/browserdetect/browserdetect.js"></script>
<script type="text/javascript" src="http://www.billdwhite.com/wordpress/wp-content/js/d3/d3.js"></script>
<style type="text/css">
body {
overflow: hidden;
@billdwhite
billdwhite / index.html
Last active December 26, 2015 20:19
Circle Pack Label Truncation
<!DOCTYPE HTML>
<html>
<head>
<title>Circle Pack with Truncated Labels</title>
<meta charset="utf-8">
<!-- poor man's browser detection -->
<!--[if IE]><script type="text/javascript">window['isIE'] = true;</script><![endif]-->
<script type="text/javascript" src="http://www.billdwhite.com/wordpress/wp-content/js/d3/d3.js"></script>
<style type="text/css">