Skip to content

Instantly share code, notes, and snippets.

View bunkat's full-sized avatar

bill bunkat

65 followers · 0 following
  • Seattle, WA
View GitHub Profile
@bunkat
bunkat / index.html
Last active September 29, 2024 02:37
Swimlane Chart using d3.js
<!--
The MIT License (MIT)
Copyright (c) 2013 bill@bunkat.com
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
@bunkat
bunkat / index.html
Created April 8, 2012 15:40
Timeline using d3.js
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Chronological Diagram of Asia</title>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.v2.js"></script>
<style type="text/css">
.chart {
shape-rendering: crispEdges;
}
@bunkat
bunkat / index.html
Created May 4, 2012 16:25 — forked from adamgreenhall/index.html
d3 time with custom range (for simple time scatter plot)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang='en'>
<head>
<title>The d3 test</title>
<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.time.js"></script>
</head>
<body>
<script type="text/javascript" src="scatterchart.js"></script>
@bunkat
bunkat / index.html
Last active July 12, 2017 01:04
Simple Scatter Chart Example
<!DOCTYPE html>
<html>
<head>
<title>The d3 test</title>
<style>
.chart {
}
.main text {
@bunkat
bunkat / index.html
Created May 4, 2012 18:04 — forked from stepheneb/index.html
D3 Example: zoom, pan, and axis rescale
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>One Graph</title>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.v2.js"></script>
<script type="text/javascript" src="simple-graph.js"></script>
<style type="text/css">
body { font: 13px sans-serif; }
rect { fill: #fff; }
@bunkat
bunkat / index.html
Created May 4, 2012 20:58 — forked from stepheneb/index.html
D3 Example: zoom, pan, and axis rescale
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>One Graph</title>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.v2.js"></script>
<script type="text/javascript" src="simple-graph.js"></script>
<style type="text/css">
body { font: 13px sans-serif; }
rect { fill: #fff; }
@bunkat
bunkat / grid.js
Created May 5, 2012 19:38
Grid in d3.js
/**
* calendarWeekHour Setup a week-hour grid:
* 7 Rows (days), 24 Columns (hours)
* @param id div id tag starting with #
* @param width width of the grid in pixels
* @param height height of the grid in pixels
* @param square true/false if you want the height to
* match the (calculated first) width
*/
function calendarWeekHour(id, width, height, square)
@bunkat
bunkat / index.html
Created July 17, 2012 05:48
Swimlane with internal data and date axis
<html>
<head>
<title>Swimlane using d3.js</title>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.v2.js"></script>
<script type="text/javascript" src="randomData.js"></script>
@bunkat
bunkat / index.html
Created July 17, 2012 15:07
2 digit date bug in d3.time.day
<html>
<head>
<title>Swimlane using d3.js</title>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.v2.js"></script>
<script type="text/javascript" src="randomData.js"></script>
@bunkat
bunkat / index.html
Created September 22, 2012 19:08 — forked from tomhaymore/index.html
Collapsible Animated Indented Tree with larger root node
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Node-Link Tree</title>
<link href="interactive_tree.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.27.2"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?1.27.2"></script>