Skip to content

Instantly share code, notes, and snippets.

@dongtong
dongtong / data.csv
Created December 5, 2016 03:01 — forked from d3noob/data.csv
Simple graph with filled area in v4
date close
1-May-12 58.13
30-Apr-12 53.98
27-Apr-12 67.00
26-Apr-12 89.70
25-Apr-12 99.00
24-Apr-12 130.28
23-Apr-12 166.70
20-Apr-12 234.98
19-Apr-12 345.44
@dongtong
dongtong / data.csv
Created December 4, 2016 15:27 — forked from d3noob/data.csv
Simple graph with grid lines in v4
1-May-12 58.13
30-Apr-12 53.98
27-Apr-12 67.00
26-Apr-12 89.70
25-Apr-12 99.00
24-Apr-12 130.28
23-Apr-12 166.70
20-Apr-12 234.98
19-Apr-12 345.44
@dongtong
dongtong / data2.csv
Created December 4, 2016 15:27 — forked from d3noob/data2.csv
Labels on multiple lines v4
date close open
1-May-12 68.13 34.12
30-Apr-12 63.98 45.56
27-Apr-12 67.00 67.89
26-Apr-12 89.70 78.54
25-Apr-12 99.00 89.23
24-Apr-12 130.28 99.23
23-Apr-12 166.70 101.34
20-Apr-12 234.98 122.34
19-Apr-12 345.44 134.56
@dongtong
dongtong / .block
Created December 4, 2016 15:26 — forked from d3noob/.block
Dual axes in v4
license: gpl-3.0
@dongtong
dongtong / index.html
Created December 4, 2016 15:25 — forked from d3noob/.block
Simple bar graph in v4
<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */
.bar { fill: steelblue; }
</style>
<body>
<!-- load the d3.js library -->
@dongtong
dongtong / index.html
Created December 4, 2016 15:24 — forked from d3noob/.block
Tree diagram using flat data with v4
<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */
.node circle {
fill: #fff;
stroke: steelblue;
stroke-width: 3px;
}
@dongtong
dongtong / index.html
Created December 4, 2016 15:24 — forked from d3noob/.block
Tree diagram loading external json with v4
<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */
.node circle {
fill: #fff;
stroke: steelblue;
stroke-width: 3px;
}
@dongtong
dongtong / index.html
Created December 4, 2016 15:24 — forked from d3noob/index.html
Drag Group Test v4
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.active {
stroke: #000;
stroke-width: 2px;
}
.rect {
@dongtong
dongtong / index.html
Created December 4, 2016 15:23 — forked from d3noob/index.html
d3.drag with grouped elements in v4
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.active {
stroke: #000;
stroke-width: 2px;
}
.rect {
@dongtong
dongtong / data.csv
Created December 4, 2016 15:23 — forked from d3noob/data.csv
Simple scatter plot in v4
date close
1-May-12 58.13
30-Apr-12 53.98
27-Apr-12 67.00
26-Apr-12 89.70
25-Apr-12 99.00
24-Apr-12 130.28
23-Apr-12 166.70
20-Apr-12 234.98
19-Apr-12 345.44