Skip to content

Instantly share code, notes, and snippets.

View krish85's full-sized avatar

krish85

View GitHub Profile
@krish85
krish85 / index.html
Last active August 29, 2015 14:27
Bubble Chart
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<style>
.axis path,
.axix line{
fill: none;
stroke: black;
shape-rendering: crispEdges;
@krish85
krish85 / index.html
Last active August 29, 2015 14:27
Animated Bar
<!DOCTYPE htm>
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<meta http-equiv="refresh" content="7">
<style type="text/css">
.text{
font-size: 150%;
}
</style>
@krish85
krish85 / data.tsv
Last active August 29, 2015 14:27
Column Chart
name value
Locke 4
Reyes 8
Ford 15
Jarrah 16
Shephard 23
Kwon 42
Suresh 19
Sanjana 30
Saroja 56
@krish85
krish85 / index.html
Last active August 29, 2015 14:27
Donut Chart
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="chart"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script>
var dataset = [
{ "task": "Work", "hours": 11},
@krish85
krish85 / index.html
Created August 12, 2015 20:53
Folding Rects
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<style>
</style>
<script>
@krish85
krish85 / index.html
Last active August 29, 2015 14:27
Vertical Bar
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
</head>
<body>
<style>
</style>
<script>
@krish85
krish85 / index.html
Last active August 29, 2015 14:27
Axis Scaling
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<style>
.axis path,
.axix line{
fill: none;
stroke: black;
shape-rendering: crispEdges;
@krish85
krish85 / index.html
Created August 13, 2015 13:31
Line Chart
<!DOCTYPE html>
<html>
<head>
<title>Line Chart</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<style type="text/css">
body {
font: 10px sans-serif;
}
@krish85
krish85 / index.html
Last active August 29, 2015 14:27
Circle Color change
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
</head>
<body>
<script type="text/javascript">
var svg = d3.select("body")
.append("svg")
.attr("width", 400)
@krish85
krish85 / index.html
Last active August 29, 2015 14:27
Awesome Circles
<!DOCTYPE html>
<html>
<head></head>
<meta charset="utf-8">
<style>
body {
margin: 0;
background: #222;
min-width: 960px;