Skip to content

Instantly share code, notes, and snippets.

<!DOCTYPE html>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<body>
<div>
<script>
var width=500,
height = 500,
margin = 50,
i=0;
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
margin: 0;
background: #111;
min-width: 960px;
}
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.hexagon {
fill: none;
stroke: #000;
stroke-width:.5px;
}
</style>
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.node {
font: 300 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
fill: #333;
}
.node:hover {
<!DOCTYPE html>
<meta charset="utf-8">
<style>
#tooltip {
color: white;
opacity: .8;
background: #333;
padding: 5px;
border: 1px solid lightgrey;
border-radius: 5px;
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<style type="text/css">
body {
text-align: center;
}
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
shape-rendering: crispEdges;
}
.grid-background {
fill: pink;
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.legend circle {
fill: none;
stroke: #000;
}
.legend text {
fill: brown;