Skip to content

Instantly share code, notes, and snippets.

View danharr's full-sized avatar

@danjharrington danharr

3 followers · 0 following
View GitHub Profile
@danharr
danharr / index.html
Last active August 29, 2015 13:57
Misleading Quotes
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Misleading quotes</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
@danharr
danharr / data.csv
Last active August 29, 2015 13:57
Make an axis
name age
jack 2
tim 22
john 30
mary 58
pauline 24
@danharr
danharr / index.html
Created March 29, 2014 22:30
Circles clipped in a circle
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>show an axis from loaded CSV</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
<style>
.axis path,
.axis line {
@danharr
danharr / index.html
Last active August 29, 2015 13:57
Bond chained transition
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>show an axis from loaded CSV</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
<style>
body {
@danharr
danharr / index.html
Last active August 29, 2015 13:57
Path transition
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>basic line example</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
<style>
path {
@danharr
danharr / index.html
Last active August 29, 2015 13:58
Introduce chart left to right demo
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg {
font: 10px sans-serif;
}
.line {
fill: none;
@danharr
danharr / index.html
Last active August 29, 2015 13:58
Line transition
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>line growing example d3js</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
<style>
@danharr
danharr / index.html
Last active August 29, 2015 13:59
Using angular to make reusable circles
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body ng-app="myApp">
<my-circle data="[[20,'red']]"></my-circle>
<my-circle data="[[5,'blue']]"></my-circle>
<my-circle data="[[40,'green']]"></my-circle>
@danharr
danharr / index.html
Last active August 29, 2015 13:59
slider to control a circle size
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style>
input {
position:absolute;
left:200px;
top:20px;
@danharr
danharr / data.json
Created April 12, 2014 15:12
json working
[{"name":"alan" , "age":8},
{"name":"alan2" , "age":18}]