Skip to content

Instantly share code, notes, and snippets.

@stevenwmarks

stevenwmarks/.block

Last active April 7, 2018 02:50
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 stevenwmarks/406b9ea21aa94b0a609523059e189882 to your computer and use it in GitHub Desktop.
Save stevenwmarks/406b9ea21aa94b0a609523059e189882 to your computer and use it in GitHub Desktop.
Download ZIP
music scatterplot
Raw
.block
license: mit
border: no
height: 600
Raw
README.md

Built with blockbuilder.org Based on choral music written by Patricia Van Ness. For more on the music, go to patriciavanness.com.

Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Sofia' rel='stylesheet'>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
svg {
background-color: black;
}
.axis path,
.axis line {
stroke: white;
stroke-width: 2px;
}
.axisLabel {
font-family: "Sofia", sans-serif;
font-size: 30px;
fill: white;
}
.quotedLine {
font-family: "Sofia", sans-serif;
font-size: 14px;
fill: white;
}
</style>
</head>
<body>
<script>
// width, height, margins and padding
var margin = {top: 20, right: 15, bottom: 80, left: 100},
width = 900 - margin.left - margin.right,
height = 480 - margin.top - margin.bottom;
// create scales
var xScale = d3.scaleLinear()
.range([0, width]);
var yScale = d3.scaleLinear()
.range([height, 0]);
// create svg
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 + ")");
// load data
d3.csv("psalm17.csv", function(error, data) {
if (error) throw error;
data.forEach(function(d) {
d.note = +d.note;
d.voice = +d.voice;
});
// console.log(data);
xScale.domain(d3.extent(data, function(d) { return d.note; })).nice()
yScale.domain(d3.extent(data, function(d) { return d.voice; })).nice()
// create circles
svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("id", "circle")
.attr("cx", function(d) { return xScale(d.note); })
.attr("cy", function(d) { return yScale(d.voice); })
.attr("r", 3)
.attr("fill", function(d) {
if (d.voice <= 10) {
return "#c56505";
} else if (d.voice > 10 && d.voice <= 23) {
return "#00cd00";
} else if (d.voice > 23 && d.voice <= 31){
return "#cd00cd";
} else if (d.voice > 31 && d.voice <= 41){
return "#ff4500";
} else {
return "#5ecafe";
}
})
.style("opacity", 0)
.transition()
.delay(function(d,i) {return i * 20})
.style("opacity", 1);
// add x axis
svg.append("g")
.attr("transform", "translate(-5," + (height + 25) + ")")
.attr("class", "axis")
.call(d3.axisTop(xScale))
.selectAll(".tick")
.attr("visibility","hidden");
// text label for x axis
svg.append("text")
.attr("transform", "translate(" + (width/2) + " ," + (height + 60) + ")")
.attr("class", "axisLabel")
.style("text-anchor", "middle")
.text("notes");
// add y axis
svg.append("g")
.attr("transform", "translate(-25, " + (height - 380) + ")")
.attr("class", "axis")
.call(d3.axisRight(yScale))
.selectAll(".tick")
.attr("visibility","hidden");
// text label for y axis
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 - 80)
.attr("x",0 - (height / 2))
.attr("dy", "1em")
.attr("class", "axisLabel")
.style("text-anchor", "middle")
.text("voices");
// text label for chart
svg.append("text")
.attr("transform", "translate(" + (width/4) + " ," + (height - 350) + ")")
.attr("class", "axisLabel")
.style("text-anchor", "middle")
.style("font-size", "24")
.text("Psalm 17: music by Patricia Van Ness");
// text label for chart
svg.append("text")
.attr("transform", "translate(" + (width/5) + " ," + (height - 330) + ")")
.attr("class", "quotedLine")
.style("text-anchor", "middle")
.text("Keep me as the appple of your eye;");
// text label for chart
svg.append("text")
.attr("transform", "translate(" + (width/5) + " ," + (height - 310) + ")")
.attr("class", "quotedLine")
.style("text-anchor", "middle")
.text("hide me under the shadow of your wings.");
}); // end csv data load
</script>
</body>
Raw
psalm17.csv
note voice measure
1 26 1
1 19
1 6
7 26 2
7 17
7 9
13 24 3
13 27
14 26
14 24
15 24
15 25
13 17
13 5
19 25 4
20 25
19 19
20 19
19 6
25 25 5
25 18
25 6
31 26 6
32 27
33 29
31 16
32 17
33 19
31 2
32 5
37 29 7
38 28
39 28
40 28
41 27
37 19
38 21
37 5
38 2
43 29 8
44 28
45 27
46 26
43 22
44 22
43 9
44 7
49 25 9
49 19
49 6
55 25 10
55 18
55 6
61 26 11
62 27
63 29
61 16
62 17
63 19
61 2
62 5
67 29 12
68 28
69 28
70 28
71 27
67 19
68 21
67 5
68 2
73 29 13
74 28
75 27
76 26
73 22
74 22
73 9
74 7
75 9
79 25 14
79 19
79 6
85 25 15
85 18
85 6
91 28 16
92 29
93 30
94 30
94 28
94 21
95 19
96 20
97 21
98 20
91 9
92 6
97 30 17
97 26
98 29
99 28
100 29
100 27
97 7
98 5
103 28 18
103 26
104 27
105 28
103 19
104 20
103 6
104 9
109 28 19
109 21
110 22
111 23
109 6
109 9
115 28 20
116 29
117 30
118 30
118 28
115 21
116 19
117 20
118 21
119 20
115 9
116 6
121 30 21
121 26
122 29
123 28
124 27
121 19
122 18
123 17
121 7
122 5
127 28 22
127 26
128 27
129 28
127 19
128 19
129 20
127 6
128 9
129 9
133 28 23
133 21
134 22
135 23
133 9
133 6
139 27 24
139 15
140 17
141 19
139 5
140 5
141 6
142 7
143 8
145 29 25
146 29
146 30
145 19
146 15
147 17
145 5
151 26 26
151 24
152 24
153 26
154 28
151 19
152 21
153 19
151 7
152 7
153 9
157 28 27
158 28
159 29
160 30
157 19
158 21
159 21
160 21
161 22
157 7
163 48 28
163 46
163 34
163 28
163 16
163 6
163 2
164 4
165 6
169 49 29
169 46
169 34
169 29
169 17
169 2
170 4
171 7
175 49 30
175 47
176 49
176 46
177 49
177 47
177 36
177 29
177 19
177 17
177 5
181 48 31
182 48
181 35
182 35
181 19
181 2
187 48 32
187 35
187 28
187 19
187 2
193 48 33
193 46
194 49
194 47
195 49
193 31
194 34
195 37
193 21
194 22
195 24
193 12
194 15
193 2
194 5
199 49 34
200 48
201 48
202 48
203 47
199 37
200 36
200 34
199 24
200 26
199 15
199 5
200 2
205 49 35
206 48
207 47
208 46
205 37
205 27
206 27
205 19
206 17
205 7
211 45 36
211 34
211 24
211 12
212 16
211 2
212 6
217 45 37
217 33
217 23
217 16
217 6
223 48 38
223 46
224 49
224 47
225 49
223 31
224 34
225 37
223 21
224 22
225 24
223 12
224 15
223 2
224 5
229 49 39
230 48
231 48
232 48
233 47
229 37
230 36
230 34
229 24
230 26
231 26
229 15
229 5
230 2
235 49 40
236 48
237 47
238 46
235 37
235 27
236 27
235 19
236 17
235 7
241 45 41
241 34
241 24
241 12
242 16
241 2
242 6
247 45 42
247 33
247 23
247 16
247 6
253 48 43
254 49
255 50
256 48
256 50
253 34
253 26
254 24
255 25
256 26
257 25
253 19
254 16
253 9
254 6
259 50 44
259 46
260 49
261 48
262 49
262 47
259 34
259 24
260 23
261 22
259 17
260 15
259 7
260 5
265 48 45
265 46
266 47
267 48
265 36
266 35
267 34
265 24
266 25
265 14
266 14
265 2
266 9
267 10
271 48 46
271 31
271 26
271 24
272 27
273 28
271 16
271 14
271 11
272 12
273 13
277 48 47
278 49
279 50
280 50
280 48
277 34
277 26
278 24
279 25
280 26
281 25
277 21
278 19
279 20
280 21
281 20
277 9
278 6
283 50 48
283 46
284 49
285 48
286 47
283 34
283 24
284 23
285 22
283 19
284 18
285 17
283 7
284 5
289 46 49
289 36
290 35
291 34
289 26
290 27
291 28
289 21
290 22
291 23
289 6
295 46 50
296 47
297 48
295 31
295 28
295 19
295 9
301 27 51
301 15
302 17
303 19
301 5
301 5
302 6
303 7
304 8
307 29 52
308 30
308 29
309 30
309 29
307 19
308 15
309 17
307 5
313 46 53
313 44
314 44
315 46
316 48
313 28
313 24
313 19
314 21
315 19
313 6
314 6
315 8
319 34 54
320 36
321 36
322 36
323 35
319 28
319 19
319 6
320 2
321 3
322 4
323 5
325 47 55
326 47
327 48
328 49
329 50
325 32
325 27
325 15
326 17
327 19
325 5
326 5
327 5
328 6
331 51 56
332 51
332 49
331 32
332 33
332 32
331 29
332 30
332 29
331 19
332 15
333 17
331 7
332 5
337 51 57
337 48
337 31
337 26
337 24
338 24
339 26
340 28
337 19
338 21
339 19
337 6
338 6
339 8
343 51 58
343 34
344 35
345 36
346 37
347 38
348 39
343 28
343 21
344 21
345 21
343 6
344 2
345 3
346 4
347 5
349 51 59
349 38
349 26
349 19
349 2
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment