Skip to content

Instantly share code, notes, and snippets.

@kbtz

kbtz/.block

Forked from mbostock/.block
Last active February 19, 2017 01:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kbtz/7f0f31173597af4c3ae12bc707af225d to your computer and use it in GitHub Desktop.
Save kbtz/7f0f31173597af4c3ae12bc707af225d to your computer and use it in GitHub Desktop.
Download ZIP
Scatterplot
Raw
.block
license: gpl-3.0
Raw
README.md

Scatterplot sample.

Raw
data.csv
id transporter ended punctuality
1 Transporter4 10/1/2016 23:39:00 1.2
2 Transporter4 10/4/2016 7:10:00 -3.35
3 Transporter4 10/4/2016 3:18:00 -3.11
4 Transporter5 10/3/2016 11:19:00 -1.2
5 Transporter1 10/3/2016 21:34:00 -1.92
6 Transporter1 10/2/2016 3:21:00 0
7 Transporter2 10/3/2016 15:20:00 0.24
8 Transporter1 10/4/2016 9:30:00 -2.64
9 Transporter5 10/4/2016 15:47:00 -3.36
10 Transporter1 10/4/2016 1:50:00 -5.03
11 Transporter5 10/4/2016 14:30:00 9.11
12 Transporter1 10/4/2016 21:30:00 1.2
13 Transporter5 10/4/2016 18:00:00 -0.72
14 Transporter1 10/5/2016 20:00:00 -0.95
15 Transporter5 10/5/2016 11:30:00 0.48
16 Transporter4 10/5/2016 22:05:00 1.2
17 Transporter5 10/6/2016 22:30:00 -1.68
18 Transporter2 10/6/2016 8:30:00 0.97
19 Transporter3 10/6/2016 2:30:00 -6.48
20 Transporter2 10/6/2016 2:30:00 -4.31
21 Transporter3 10/7/2016 18:00:00 0
22 Transporter5 10/7/2016 12:20:00 7.2
23 Transporter1 10/7/2016 23:20:00 -4.79
24 Transporter3 10/6/2016 22:05:00 -7.2
25 Transporter1 10/7/2016 2:00:00 -2.64
26 Transporter3 10/7/2016 22:00:00 -2.39
27 Transporter5 10/8/2016 11:21:00 -2.4
28 Transporter3 10/8/2016 11:31:00 0.25
29 Transporter3 10/8/2016 3:00:00 9.35
30 Transporter1 10/8/2016 3:00:00 0.71
31 Transporter1 10/8/2016 17:28:00 -3.11
32 Transporter4 10/9/2016 20:57:00 0.97
33 Transporter3 10/8/2016 19:20:00 -6.25
34 Transporter5 10/9/2016 12:08:00 0.48
36 Transporter4 10/10/2016 11:50:00 -5.04
37 Transporter1 10/10/2016 2:00:00 -5.75
38 Transporter2 10/9/2016 22:00:00 -2.65
39 Transporter1 10/10/2016 12:00:00 -0.48
40 Transporter2 10/11/2016 23:15:00 10.06
41 Transporter2 10/11/2016 20:49:00 -4.08
42 Transporter3 10/10/2016 20:27:00 7.91
43 Transporter4 10/10/2016 20:31:00 0
44 Transporter3 10/12/2016 7:00:00 -5.53
45 Transporter4 10/13/2016 1:00:00 -4.32
46 Transporter3 10/10/2016 19:15:00 -0.72
47 Transporter1 10/11/2016 6:12:00 2.65
48 Transporter5 10/13/2016 13:59:00 4.57
49 Transporter5 10/13/2016 20:13:00 2.16
50 Transporter1 10/12/2016 18:18:00 -2.88
52 Transporter4 10/14/2016 14:40:00 7.92
53 Transporter4 10/14/2016 1:00:00 0
54 Transporter1 10/14/2016 1:48:00 0
55 Transporter5 10/14/2016 20:53:00 -5.05
56 Transporter1 10/15/2016 17:00:00 -3.6
57 Transporter2 10/14/2016 17:17:00 7.68
58 Transporter3 10/15/2016 13:25:00 0
59 Transporter5 10/15/2016 21:03:00 0.25
60 Transporter5 10/16/2016 2:44:00 1.68
61 Transporter4 10/15/2016 7:00:00 -1.44
62 Transporter2 10/16/2016 14:18:00 0.95
63 Transporter5 10/16/2016 22:10:00 -0.97
64 Transporter1 10/17/2016 17:05:00 4.08
65 Transporter3 10/16/2016 23:45:00 0.48
66 Transporter3 10/17/2016 20:42:00 6.47
67 Transporter2 10/18/2016 22:13:00 1.68
68 Transporter3 10/18/2016 13:12:00 -2.65
69 Transporter4 10/18/2016 21:30:00 1.92
70 Transporter3 10/19/2016 1:36:00 -1.68
71 Transporter1 10/19/2016 6:12:00 0
72 Transporter2 10/18/2016 22:08:00 -2.88
73 Transporter4 10/19/2016 6:00:00 -0.72
74 Transporter1 10/20/2016 17:09:00 -6.95
75 Transporter2 10/20/2016 15:12:00 5.74
76 Transporter5 10/20/2016 4:09:00 6.48
77 Transporter3 12/20/2016 20:24:00 0
78 Transporter5 10/19/2016 19:55:00 -3.6
79 Transporter3 10/21/2016 14:02:00 -2.4
80 Transporter2 10/21/2016 19:37:00 -3.35
81 Transporter2 10/21/2016 7:13:00 2.65
82 Transporter4 10/20/2016 20:45:00 4.8
83 Transporter5 10/22/2016 13:42:00 -1.43
84 Transporter3 10/21/2016 19:56:00 1.68
85 Transporter3 10/22/2016 9:05:00 0.23
86 Transporter4 10/23/2016 13:07:00 -0.48
87 Transporter2 10/23/2016 17:18:00 -3.11
88 Transporter1 10/22/2016 22:25:00 3.85
89 Transporter1 10/24/2016 14:31:00 6.71
90 Transporter3 10/25/2016 9:23:00 -1.2
91 Transporter5 10/23/2016 19:00:00 -7.91
92 Transporter1 10/25/2016 14:19:00 5.52
94 Transporter4 10/24/2016 20:22:00 0
95 Transporter2 10/25/2016 19:35:00 -4.08
96 Transporter1 10/26/2016 12:45:00 8.63
97 Transporter4 10/26/2016 20:30:00 0
98 Transporter3 10/25/2016 21:44:00 6.49
99 Transporter1 10/26/2016 10:19:00 2.4
100 Transporter2 10/27/2016 12:43:00 -5.52
101 Transporter3 10/27/2016 20:25:00 -1.46
102 Transporter5 10/27/2016 16:48:00 1.2
103 Transporter5 10/26/2016 20:14:00 4.8
104 Transporter3 10/28/2016 20:48:00 4.32
105 Transporter4 10/27/2016 20:30:00 3.84
106 Transporter1 10/28/2016 12:50:00 0
107 Transporter4 10/29/2016 12:42:00 2.16
108 Transporter2 10/28/2016 20:58:00 1.93
109 Transporter4 10/28/2016 21:44:00 1.2
110 Transporter5 10/29/2016 18:28:00 8.15
111 Transporter3 10/31/2016 9:34:00 6
112 Transporter2 10/31/2016 9:57:00 -1.69
113 Transporter5 10/29/2016 20:30:00 -3.12
114 Transporter1 10/31/2016 12:11:00 6.48
115 Transporter2 10/31/2016 4:18:00 4.57
116 Transporter1 11/1/2016 22:06:00 6.47
117 Transporter4 11/2/2016 4:35:00 -0.97
118 Transporter1 11/2/2016 16:00:00 1.2
119 Transporter1 11/2/2016 4:00:00 -2.16
120 Transporter3 11/2/2016 20:40:00 -6.95
121 Transporter5 11/2/2016 20:12:00 1.69
122 Transporter4 11/3/2016 16:41:00 -1.92
123 Transporter1 11/2/2016 20:35:00 6.73
124 Transporter4 11/3/2016 22:06:00 0.49
125 Transporter1 11/3/2016 22:47:00 -5.76
126 Transporter4 11/4/2016 7:40:00 3.35
127 Transporter2 11/5/2016 21:28:00 -0.24
128 Transporter4 11/5/2016 2:06:00 3.11
129 Transporter5 11/6/2016 2:00:00 3.11
130 Transporter2 11/7/2016 14:00:00 2.63
131 Transporter1 11/7/2016 4:49:00 -1.21
132 Transporter3 11/8/2016 8:34:00 -5.03
133 Transporter3 11/10/2016 2:26:00 -0.48
134 Transporter2 11/12/2016 13:00:00 -3.11
135 Transporter1 11/12/2016 2:06:00 1.45
136 Transporter2 11/14/2016 2:54:00 -0.24
137 Transporter5 11/16/2016 1:04:00 -2.65
138 Transporter5 11/18/2016 1:34:00 -1.2
139 Transporter2 11/20/2016 12:40:00 -2.65
140 Transporter1 11/22/2016 2:00:00 -6.49
141 Transporter2 11/24/2016 4:11:00 -5.28
142 Transporter3 11/26/2016 3:00:00 1.2
143 Transporter3 11/28/2016 2:19:00 4.32
144 Transporter2 11/30/2016 3:28:00 -6.97
145 Transporter1 12/2/2016 4:17:00 -0.73
146 Transporter3 12/4/2016 3:05:00 -4.08
147 Transporter3 12/6/2016 4:17:00 0.24
148 Transporter2 12/8/2016 5:19:00 -2.88
149 Transporter4 12/10/2016 3:15:00 -0.23
150 Transporter2 12/12/2016 4:05:00 4.8
151 Transporter4 12/12/2016 7:30:00 -1.43
152 Transporter4 12/14/2016 4:33:00 -0.96
153 Transporter4 12/16/2016 5:30:00 3.12
154 Transporter5 12/18/2016 5:00:00 0.48
155 Transporter5 12/21/2016 2:30:00 -4.08
156 Transporter4 12/20/2016 7:00:00 0.72
157 Transporter4 12/20/2016 6:05:00 5.77
158 Transporter3 12/20/2016 9:45:00 0.72
159 Transporter5 12/22/2016 11:50:00 2.66
160 Transporter1 12/22/2016 23:55:00 0
161 Transporter1 12/22/2016 7:00:00 -4.32
162 Transporter3 12/22/2016 5:00:00 4.31
163 Transporter2 12/22/2016 7:00:00 -3.14
164 Transporter2 12/23/2016 17:30:00 -3.61
165 Transporter5 12/24/2016 1:01:00 1.44
166 Transporter1 12/25/2016 2:00:00 6.95
167 Transporter4 12/24/2016 4:50:00 -7.21
168 Transporter1 12/25/2016 23:30:00 -4.31
169 Transporter2 12/25/2016 5:00:00 -0.25
170 Transporter5 12/26/2016 21:32:00 -1.69
172 Transporter1 12/28/2016 6:00:00 -0.72
173 Transporter1 12/28/2016 5:00:00 -0.97
174 Transporter2 12/30/2016 9:00:00 -0.95
175 Transporter1 12/30/2016 7:20:00 -3.59
176 Transporter4 1/1/2017 5:00:00 6.95
177 Transporter5 1/2/2017 17:00:00 -0.95
178 Transporter5 1/2/2017 5:10:00 2.65
179 Transporter3 1/4/2017 5:00:00 -6.48
180 Transporter5 1/7/2017 4:00:00 -2.63
181 Transporter4 1/7/2017 4:00:00 -0.71
182 Transporter2 1/6/2017 4:00:00 -3.13
183 Transporter5 1/8/2017 4:00:00 3.12
184 Transporter3 1/10/2017 4:20:00 -3.6
184 Transporter4 1/12/2017 5:00:00 3.11
185 Transporter2 1/14/2017 4:50:00 6
186 Transporter1 1/16/2017 5:12:00 3.6
187 Transporter5 1/18/2017 4:50:00 -1.19
188 Transporter1 1/20/2017 4:45:00 -2.63
189 Transporter2 1/22/2017 4:10:00 15.86
190 Transporter2 1/23/2017 9:05:00 -4.31
191 Transporter4 1/23/2017 4:12:00 -1.69
192 Transporter1 1/24/2017 5:02:00 -2.4
193 Transporter2 1/25/2017 23:30:00 7.45
191 Transporter3 1/26/2017 21:45:00 9.36
192 Transporter2 1/27/2017 4:45:00 -5.76
193 Transporter4 1/28/2017 21:30:00 -0.97
194 Transporter2 1/28/2017 9:00:00 10.57
195 Transporter1 1/28/2017 5:00:00 -7.46
196 Transporter1 1/29/2017 10:30:00 1.67
197 Transporter4 1/30/2017 5:02:00 2.63
199 Transporter2 1/31/2017 5:02:00 2.63
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.dot {
stroke: #000;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 20, right: 20, bottom: 30, left: 60},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var formater = d3.time.format("%b %d")
var x = d3.time
.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var color = d3.scale.category10();
var xAxis = d3.svg.axis()
.scale(x)
.tickFormat(formater)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.tickFormat(d => `${d} hours`)
.orient("left");
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.csv("data.csv", function(error, data) {
if (error) throw error;
data.forEach(function(d) {
d.punctuality = +d.punctuality;
var dt = d.ended = new Date(d.ended);
d.day = new Date(dt.getFullYear() + "/" + (dt.getMonth() + 1) + "/" + dt.getDate());
});
x.domain(d3.extent(data, function(d) { return d.day; })).nice();
y.domain(d3.extent(data, function(d) { return d.punctuality; })).nice();
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + y(0) + ")")
.call(xAxis)
.append("text")
.attr("class", "label")
.attr("x", width)
.attr("y", -6)
.style("text-anchor", "end")
.text("Day of arrival");
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("class", "label")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Punctuality")
var dot = svg
.selectAll("g.dotg")
.data(data)
.enter()
.append("g")
.attr("class", "dotg")
dot.append("circle")
.attr("class", "dot")
.attr("r", 3.5)
.attr("cx", function(d) { return x(d.day); })
.attr("cy", function(d) { return y(d.punctuality); })
.style("fill", function(d) { return color(d.transporter); });
dot.append("title")
.html(d => d.ended.toLocaleString())
var legend = svg.selectAll(".legend")
.data(color.domain())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
legend.append("rect")
.attr("x", width - 18)
.attr("width", 18)
.attr("height", 18)
.style("fill", color);
legend.append("text")
.attr("x", width - 24)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) { return d; });
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment