Skip to content

Instantly share code, notes, and snippets.

View flunky's full-sized avatar

John C. Hart flunky

2 followers · 0 following
View GitHub Profile
@flunky
flunky / index.html
Created May 5, 2017 02:09
D3 Force Directed Graph Layout
<!DOCTYPE html>
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
.link line {stroke: black;}
.node circle {stroke: black; fill: white;}
.node text {text-anchor: middle; font-size: 20px}
</style>
<svg width="300" height="300"></svg>
@flunky
flunky / .block
Last active April 24, 2017 05:06
The Grammar of Narrative Visualization
license: gpl-3.0
@flunky
flunky / index.html
Created April 22, 2017 16:00
D3 Tooltip Example
<!DOCTYPE html>
<script src="http://d3js.org/d3.v4.min.js"></script>
<style>
.chart rect { fill: steelblue; }
#tooltip {
opacity: 0;
position: absolute;
text-align: center;
width: 60px; height: 40px;
@flunky
flunky / .block
Last active April 22, 2017 15:42
The Vega-Lite Grammar of Interaction
license: gpl-3.0
@flunky
flunky / .block
Last active April 24, 2017 02:52
The Vega-Lite Grammar of Charts
license: gpl-3.0
@flunky
flunky / index.html
Last active April 15, 2017 04:08
D3 (v4) Bar Chart With Axes
<!DOCTYPE html>
<script src="http://d3js.org/d3.v4.min.js"></script>
<style> .chart rect { fill: steelblue } </style>
<html><body>
<p>Here are the magic numbers from Lost: <span id="data"></span></p>
<svg class="chart"></svg>
@flunky
flunky / index.html
Last active March 26, 2017 05:16
How much I'm impressed with my daughter Hannah
<!DOCTYPE html>
<script src="//d3js.org/d3.v3.min.js"></script>
<style>
.chart rect { fill: steelblue }
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
@flunky
flunky / .block
Last active March 26, 2017 04:37
D3 SVG Bar Chart With Axes
height: 450
@flunky
flunky / .block
Last active March 26, 2017 03:12
D3 SVG Bar Chart Using Scale
height: 350
@flunky
flunky / index.html
Last active April 8, 2017 19:03
D3 SVG Bar Chart Creating Rect Per Datum
<!DOCTYPE html>
<script src="http://d3js.org/d3.v3.min.js"></script>
<style> .chart rect { fill: steelblue } </style>
<html><body>
<p>Here are the magic numbers from Lost: <span id="data"></span></p>
<svg class="chart" width="120" height="500">
</svg>