Skip to content

Instantly share code, notes, and snippets.

View billdwhite's full-sized avatar

Bill White billdwhite

12 followers · 8 following
View GitHub Profile
@billdwhite
billdwhite / chart-flow.js
Last active August 29, 2015 13:57
Alternative chart-flow.js which does not rely on jQuery and does not create SVG for you; Instead it simple appends flow layout to the provided SVG container, allowing more than one flow layout within an SVG
d3.custom = {};
d3.custom.chart = {};
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,
@billdwhite
billdwhite / index.html
Created November 11, 2014 18:49
A Pen by Bill White.
<html class="no-js">
<head>
<title>d3 Demo CSS Layout 07 - jquery piechart</title>
<script src="https://cdn.rawgit.com/mbostock/d3/master/d3.js"></script>
</head>
<body>
<h5 class="description">Resize each container. Notice the PieChart does not resize.</h5>
<div id="chartContainer"></div>
<button id="addButton">Add Resizable Pie Chart</button>
</body>
@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 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 / 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 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">
@billdwhite
billdwhite / index.html
Last active December 27, 2015 12:29
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="description" content="Drag Demo"/>
<meta charset="utf-8">
<title>Drag Demo</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
</head>
@billdwhite
billdwhite / README
Created November 10, 2013 21:59 — forked from mattbaker/README
This example expects to have d3.min.js and d3.layout.min.js in the same directory as pie.js and pie_serv.js.
Run with node pie_serv.js