Skip to content

Instantly share code, notes, and snippets.

View johan's full-sized avatar

Johan Sundström johan

View GitHub Profile
@johan
johan / README.md
Created November 5, 2011 22:21 — forked from jasondavies/.block
Parallel Coordinates

This parallel coordinates visualization of cars from the ‘70s and ‘80s demonstrates one of D3 2.5.0’s new interactive features: the brush component. By clicking and dragging along any axis, you can specify a filter for that dimension. The brush component is also used in the updated scatterplot matrix example.

@johan
johan / index.html
Created November 4, 2011 06:20 — forked from johan/index.html
Recettear item data by total stats
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Recettear Item Data</title>
<script src="http://mbostock.github.com/d3/d3.js?2.0.3"></script>
<script src="http://mbostock.github.com/d3/d3.geom.js?2.0.3"></script>
<script src="http://mbostock.github.com/d3/d3.layout.js?2.0.3"></script>
<link href="styles.css" rel="stylesheet" type="text/css"/>
</head>
@johan
johan / index.html
Created October 30, 2011 06:17 — forked from ZoltanLajosKis/d3jsproblem.html
d3.js force-directed graph dynamic nodes problem
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js"></script>
<style type="text/css">
.link { stroke: #ccc; }
.nodetext { pointer-events: none; font: 10px sans-serif; }
</style>
@johan
johan / README.md
Created October 28, 2011 22:37 — forked from mbostock/.block
Page load time histograms

An example of multiple pie (donut) charts created with D3. The data is represented as a tabular array of objects; each row in the table is mapped to an arc, and rows are grouped into pie charts using d3.nest.

@johan
johan / index.html
Created October 28, 2011 09:09 — forked from mbostock/gist:672899
Fast Pointing
<html>
<head>
<title>Pointing</title>
<script type="text/javascript" src="http://github.com/mbostock/protovis/raw/v3.3.1/protovis.js"></script>
<style type="text/css">
#fig {
width: 450px;
height: 425px;
}
@johan
johan / index.html
Created October 28, 2011 08:43 — forked from johan/index.html
Bl.ocks.org and other gist index by user
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Index of all bl.ocks.org pages owned by a github user</title>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.0.3"></script>
<base target="_top">
<style>
body { padding: 0.5em; margin: 0; }
h1 { padding: 0; margin: 0; }
@johan
johan / index.html
Created October 28, 2011 08:00 — forked from mbostock/.block
Google Maps + D3
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.29.1"></script>
<style type="text/css">
html, body, #map {
width: 100%;
@johan
johan / index.html
Created October 26, 2011 01:37 — forked from mbostock/.block
Point-Along-Path Interpolation
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Point-Along-Path Interpolation</title>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.4.6"></script>
<style type="text/css">
path {
cursor: pointer;
@johan
johan / README.md
Created October 24, 2011 04:53 — forked from mbostock/.block
D3 Show Reel

The first 15 seconds of the D3 show reel. See full video at http://vimeo.com/29862153. Includes seamless transitions between the following visualization types:

  • lines
  • horizons
  • areas
  • stacked areas
  • streamgraph
  • overlapping areas
  • grouped bars
  • stacked bars
@johan
johan / index.html
Created October 23, 2011 18:28 — forked from johan/amo.js
Greasemonkey users by browser version (6 months)
<!DOCTYPE html>
<html>
<head>
<title>Greasemonkey users by browser version</title>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.29.1"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?1.29.1"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.time.js?1.29.1"></script>
<script type="text/javascript" src="load_amo_stats.js"></script>
<style type="text/css">