Skip to content

Instantly share code, notes, and snippets.

@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 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 / 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
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 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
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
Last active January 10, 2024 18:18
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