Skip to content

Instantly share code, notes, and snippets.

@biovisualize
biovisualize / index.html
Created June 9, 2011 14:42
Simple D3 tooltip
<!DOCTYPE html>
<html >
<head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
</head>
<body>
<div class="example_div"></div>
<script type="text/javascript">
var tooltip = d3.select("body")
.append("div")
@biovisualize
biovisualize / index.html
Created August 22, 2011 23:05
Basic template
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
</head>
<body>
<div class="viz"></div>
<script type="text/javascript">
var sampleSVG = d3.select(".viz")
@biovisualize
biovisualize / index.html
Created September 5, 2011 14:03
Custom drag and drop with D3
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<title>Drag And Drop</title>
</head>
<body>
<div id="viz"></div>
@biovisualize
biovisualize / index.html
Created September 6, 2011 14:44
Drag and drop with D3
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<title>Drag And Drop</title>
</head>
<body>
<div id="viz"></div>
@biovisualize
biovisualize / index.html
Created September 10, 2011 15:18
Radial 24H scale (from ff)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></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.time.js"></script>
<style type="text/css">
svg path{
stroke: none;
@biovisualize
biovisualize / index.html
Created September 11, 2011 12:07
Download generated SVG with preview (from mbostock)
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<title>Download SVG</title>
<style type="text/css">
a{
cursor: pointer;
text-decoration: underline;
color: black;
@biovisualize
biovisualize / index.html
Created September 17, 2011 01:38
Brush selection on a table
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<style type="text/css">
#table{
position: absolute;
}
#viz{
position: absolute;
@biovisualize
biovisualize / index.html
Created September 19, 2011 15:10
Table sorting (from Oliver Rolle)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Table sort example in D3</title>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
</head>
<body onLoad="transform('name')">
<h1>Sortable Table</h1>
<table>
@biovisualize
biovisualize / index.html
Created September 23, 2011 20:29 — forked from mbostock/.block
External SVG
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
</head>
<body>
<script type="text/javascript">
d3.xml("rect01.svg", "image/svg+xml", function(xml) {
var importedNode = document.importNode(xml.documentElement, true);
@biovisualize
biovisualize / index.html
Created October 3, 2011 02:31 — forked from ZJONSSON/index.html
Simple transitioning slides with SVG and D3 (from ZJONSSON)
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<script type="text/javascript" src="svg_slides.js"></script>
<script type="text/javascript">
// There are probably better ways of loading the SVG, but this is one example I found