Skip to content

Instantly share code, notes, and snippets.

@MNoichl

MNoichl/.block

Last active June 19, 2018 00:19
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 MNoichl/3cdb6f69eb81eb71c82c8eef645fdd9f to your computer and use it in GitHub Desktop.
Save MNoichl/3cdb6f69eb81eb71c82c8eef645fdd9f to your computer and use it in GitHub Desktop.
Download ZIP
Clusterdistances Phil
Raw
.block
license: mit
Raw
README.md
Raw
accidents.js
var accidents=[{day:0, hour:0, hour:1},{day:0, count:0.499360828808073, hour:2},{day:0, count:0.646171462386778, hour:3},{day:0, count:0.724537971482451, hour:4},{day:0, count:0.772915346313415, hour:5},{day:0, count:0.790597450604855, hour:6},{day:0, count:0.605258082408502, hour:7},{day:0, count:0.593994843379318, hour:8},{day:0, count:0.771302823531314, hour:9},{day:0, count:0.898414417801664, hour:10},{day:0, count:0.700507697192271, hour:11},{day:0, count:0.881279129608788, hour:12},{day:0, count:0.814885659133107, hour:13},{day:1, count:0.499360828808073, hour:1},{day:1, hour:0, hour:2},{day:1, count:0.629250564718281, hour:3},{day:1, count:0.483979702863399, hour:4},{day:1, count:0.654017537365611, hour:5},{day:1, count:0.716134375153161, hour:6},{day:1, count:0.489573491886926, hour:7},{day:1, count:0.543687669746093, hour:8},{day:1, count:0.490339290418001, hour:9},{day:1, count:0.844450725810197, hour:10},{day:1, count:0.602767393044145, hour:11},{day:1, count:0.666763914460639, hour:12},{day:1, count:0.772632799560219, hour:13},{day:2, count:0.646171462386778, hour:1},{day:2, count:0.629250564718281, hour:2},{day:2, hour:0, hour:3},{day:2, count:0.752089560063444, hour:4},{day:2, count:0.701066268308364, hour:5},{day:2, count:0.873034222976729, hour:6},{day:2, count:0.696382388454511, hour:7},{day:2, count:0.687659933186817, hour:8},{day:2, count:0.785982799492429, hour:9},{day:2, count:0.951744830846131, hour:10},{day:2, count:0.810798331425467, hour:11},{day:2, count:0.948790278602744, hour:12},{day:2, count:0.877139166869436, hour:13},{day:3, count:0.724537971482451, hour:1},{day:3, count:0.483979702863399, hour:2},{day:3, count:0.752089560063444, hour:3},{day:3, hour:0, hour:4},{day:3, count:0.857787757488206, hour:5},{day:3, count:0.87161267863574, hour:6},{day:3, count:0.778681732947048, hour:7},{day:3, count:0.726511615833749, hour:8},{day:3, count:0.636753841464479, hour:9},{day:3, count:0.949265957685621, hour:10},{day:3, count:0.838461628002143, hour:11},{day:3, count:0.821271301196426, hour:12},{day:3, count:0.903085355136475, hour:13},{day:4, count:0.772915346313415, hour:1},{day:4, count:0.654017537365611, hour:2},{day:4, count:0.701066268308364, hour:3},{day:4, count:0.857787757488206, hour:4},{day:4, hour:0, hour:5},{day:4, count:0.691913492115269, hour:6},{day:4, count:0.684803081088696, hour:7},{day:4, count:0.584001680861031, hour:8},{day:4, count:0.851330722840482, hour:9},{day:4, count:0.910213994679453, hour:10},{day:4, count:0.647466826043069, hour:11},{day:4, count:0.967768149042121, hour:12},{day:4, count:0.796292904486306, hour:13},{day:5, count:0.790597450604855, hour:1},{day:5, count:0.716134375153161, hour:2},{day:5, count:0.873034222976729, hour:3},{day:5, count:0.87161267863574, hour:4},{day:5, count:0.691913492115269, hour:5},{day:5, hour:0, hour:6},{day:5, count:0.770609146311489, hour:7},{day:5, count:0.713571188000068, hour:8},{day:5, count:0.917268762957185, hour:9},{day:5, count:0.875317301858386, hour:10},{day:5, count:0.590161843097976, hour:11},{day:5, count:0.945591079994638, hour:12},{day:5, count:0.904540746864066, hour:13},{day:6, count:0.605258082408502, hour:1},{day:6, count:0.489573491886926, hour:2},{day:6, count:0.696382388454511, hour:3},{day:6, count:0.778681732947048, hour:4},{day:6, count:0.684803081088696, hour:5},{day:6, count:0.770609146311489, hour:6},{day:6, hour:0, hour:7},{day:6, count:0.573847099749542, hour:8},{day:6, count:0.849852236803839, hour:9},{day:6, count:0.692409483963428, hour:10},{day:6, count:0.743941946001007, hour:11},{day:6, count:0.931052642353079, hour:12},{day:6, count:0.627253461895036, hour:13},{day:7, count:0.593994843379318, hour:1},{day:7, count:0.543687669746093, hour:2},{day:7, count:0.687659933186817, hour:3},{day:7, count:0.726511615833749, hour:4},{day:7, count:0.584001680861031, hour:5},{day:7, count:0.713571188000068, hour:6},{day:7, count:0.573847099749542, hour:7},{day:7, hour:0, hour:8},{day:7, count:0.830837782142027, hour:9},{day:7, count:0.917170381203069, hour:10},{day:7, count:0.754288057094977, hour:11},{day:7, count:0.956768214556707, hour:12},{day:7, count:0.793644308874264, hour:13},{day:8, count:0.771302823531314, hour:1},{day:8, count:0.490339290418001, hour:2},{day:8, count:0.785982799492429, hour:3},{day:8, count:0.636753841464479, hour:4},{day:8, count:0.851330722840482, hour:5},{day:8, count:0.917268762957185, hour:6},{day:8, count:0.849852236803839, hour:7},{day:8, count:0.830837782142027, hour:8},{day:8, hour:0, hour:9},{day:8, count:0.968259604544775, hour:10},{day:8, count:0.875220786601587, hour:11},{day:8, count:0.883975095852201, hour:12},{day:8, count:0.936706102546991, hour:13},{day:9, count:0.898414417801664, hour:1},{day:9, count:0.844450725810197, hour:2},{day:9, count:0.951744830846131, hour:3},{day:9, count:0.949265957685621, hour:4},{day:9, count:0.910213994679453, hour:5},{day:9, count:0.875317301858386, hour:6},{day:9, count:0.692409483963428, hour:7},{day:9, count:0.917170381203069, hour:8},{day:9, count:0.968259604544775, hour:9},{day:9, hour:0, hour:10},{day:9, count:0.886354318248595, hour:11},{day:9, count:0.963336912689863, hour:12},{day:9, count:0.897770085188581, hour:13},{day:10, count:0.700507697192271, hour:1},{day:10, count:0.602767393044145, hour:2},{day:10, count:0.810798331425467, hour:3},{day:10, count:0.838461628002143, hour:4},{day:10, count:0.647466826043069, hour:5},{day:10, count:0.590161843097976, hour:6},{day:10, count:0.743941946001007, hour:7},{day:10, count:0.754288057094977, hour:8},{day:10, count:0.875220786601587, hour:9},{day:10, count:0.886354318248595, hour:10},{day:10, hour:0, hour:11},{day:10, count:0.924929831981997, hour:12},{day:10, count:0.895363090812114, hour:13},{day:11, count:0.881279129608788, hour:1},{day:11, count:0.666763914460639, hour:2},{day:11, count:0.948790278602744, hour:3},{day:11, count:0.821271301196426, hour:4},{day:11, count:0.967768149042121, hour:5},{day:11, count:0.945591079994638, hour:6},{day:11, count:0.931052642353079, hour:7},{day:11, count:0.956768214556707, hour:8},{day:11, count:0.883975095852201, hour:9},{day:11, count:0.963336912689863, hour:10},{day:11, count:0.924929831981997, hour:11},{day:11, hour:0, hour:12},{day:11, count:0.971220333741755, hour:13},{day:12, count:0.814885659133107, hour:1},{day:12, count:0.772632799560219, hour:2},{day:12, count:0.877139166869436, hour:3},{day:12, count:0.903085355136475, hour:4},{day:12, count:0.796292904486306, hour:5},{day:12, count:0.904540746864066, hour:6},{day:12, count:0.627253461895036, hour:7},{day:12, count:0.793644308874264, hour:8},{day:12, count:0.936706102546991, hour:9},{day:12, count:0.897770085188581, hour:10},{day:12, count:0.895363090812114, hour:11},{day:12, count:0.971220333741755, hour:12},{day:12, hour:0, hour:13}];
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- D3.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<!-- Google Font -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
<script src="accidents.js"></script>
<style>
html { font-size: 100%; }
body {
font-size: 1rem;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
fill: #8C8C8C;
text-align: center;
}
.timeLabel, .dayLabel {
font-size: 1.6rem;
fill: #AAAAAA;
font-weight: 300;
}
text.axis-workweek, text.axis-worktime {
fill: #404040;
font-weight: 400;
}
.title {
font-size: 2.8rem;
fill: #4F4F4F;
font-weight: 300;
}
.subtitle {
font-size: 1.4rem;
fill: #AAAAAA;
font-weight: 300;
}
.credit {
font-size: 1.2rem;
fill: #AAAAAA;
font-weight: 400;
}
.axis path, .axis tick, .axis line {
fill: none;
stroke: none;
}
text {
font-size: 1.2rem;
fill: #AAAAAA;
font-weight: 400;
}
.legendTitle {
font-size: 1.6rem;
fill: #4F4F4F;
font-weight: 300;
}
</style>
</head>
<body>
<div id="trafficAccidents"></div>
<script src="script.js"></script>
</script>
</body>
</html>
Raw
script.js
///////////////////////////////////////////////////////////////////////////
//////////////////// Set up and initiate svg containers ///////////////////
///////////////////////////////////////////////////////////////////////////
var days = ['Logic','Pract & Polit Ph.','Ph. of Mind','Epistemology','Continental Ph.','Ph. of Physics','General Ph. - ?','Theory of Science','Ph. of Mathematics','Ph. of language, Linguistic','??','Metaphysics','Decision-Theory'],
times = ['Logic','Pract & Polit Ph.','Ph. of Mind','Epistemology','Continental Ph.','Ph. of Physics','General Ph. - ?','Theory of Science','Ph. of Mathematics','Ph. of language, Linguistic','??','Metaphysics','Decision-Theory'];
var margin = {
top: 200,
right: 100,
bottom: 70,
left: 200
};
var width = Math.max(Math.min(window.innerWidth, 600), 500) - margin.left - margin.right - 20,
gridSize = Math.floor(width / times.length),
height = gridSize * (days.length+2);
//SVG container
var svg = d3.select('#trafficAccidents')
.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 + ")");
//Reset the overall font size
var newFontSize = width * 162.5 / 900;
d3.select("html").style("font-size", newFontSize + "%");
///////////////////////////////////////////////////////////////////////////
//////////////////////////// Draw Heatmap /////////////////////////////////
///////////////////////////////////////////////////////////////////////////
//Based on the heatmap example of: http://blockbuilder.org/milroc/7014412
var colorScale = d3.scale.linear()
.domain([0, d3.max(accidents, function(d) {return d.count; })/2, d3.max(accidents, function(d) {return d.count; })])
.range(["#FFFFDD", "#3E9583", "#1F2D86"])
//.interpolate(d3.interpolateHcl);
var dayLabels = svg.selectAll(".dayLabel")
.data(days)
.enter().append("text")
.text(function (d) { return d; })
.attr("x", 0)
.attr("y", function (d, i) { return i * gridSize; })
.style("text-anchor", "end")
.attr("transform", "translate(-6," + gridSize / 1.5 + ")")
.attr("class", function (d, i) { return ((i >= 0 && i <= 4) ? "dayLabel mono axis axis-workweek" : "dayLabel mono axis"); });
var timeLabels = svg.selectAll(".timeLabel")
.data(times)
.enter().append("text")
.text(function(d) { return d; })
.attr("y", function(d, i) { return i * gridSize; } )
.attr("x", "0")
.attr("transform", "rotate(-90 ) translate(" + gridSize / 2 + ", 15)")
//.attr("transform", function(d) {return "rotate(-90)"})
//.attr("transform", "rotate(-40)")
.attr("class", function(d, i) { return ((i >= 0 && i <= 9) ? "timeLabel mono axis axis-worktime" : "timeLabel mono axis"); })
;
var heatMap = svg.selectAll(".hour")
.data(accidents)
.enter().append("rect")
.attr("x", function(d) { return (d.hour -1 ) * gridSize; })
.attr("y", function(d) { return (d.day ) * gridSize; })
.attr("class", "hour bordered")
.attr("width", gridSize)
.attr("height", gridSize)
.style("stroke", "white")
.style("stroke-opacity", 0.6)
.style("fill", function(d) { return colorScale(d.count); });
//Append title to the top
svg.append("text")
.attr("class", "title")
.attr("x", width/2)
.attr("y", -190)
.style("text-anchor", "middle")
.text("");
svg.append("text")
.attr("class", "subtitle")
.attr("x", width/2)
.attr("y", -160)
.style("text-anchor", "middle")
.text("");
//Append credit at bottom
svg.append("text")
.attr("class", "credit")
.attr("x", width/2)
.attr("y", gridSize * (days.length+1) + 80)
.style("text-anchor", "middle")
.text("Based on Miles McCrocklin's Heatmap block");
///////////////////////////////////////////////////////////////////////////
//////////////// Create the gradient for the legend ///////////////////////
///////////////////////////////////////////////////////////////////////////
//Extra scale since the color scale is interpolated
var countScale = d3.scale.linear()
.domain([0, d3.max(accidents, function(d) {return d.count; })])
.range([0, width])
//Calculate the variables for the temp gradient
var numStops = 10;
countRange = countScale.domain();
countRange[2] = countRange[1] - countRange[0];
countPoint = [];
for(var i = 0; i < numStops; i++) {
countPoint.push(i * countRange[2]/(numStops-1) + countRange[0]);
}//for i
//Create the gradient
svg.append("defs")
.append("linearGradient")
.attr("id", "legend-traffic")
.attr("x1", "0%").attr("y1", "0%")
.attr("x2", "100%").attr("y2", "0%")
.selectAll("stop")
.data(d3.range(numStops))
.enter().append("stop")
.attr("offset", function(d,i) {
return countScale( countPoint[i] )/width;
})
.attr("stop-color", function(d,i) {
return colorScale( countPoint[i] );
});
///////////////////////////////////////////////////////////////////////////
////////////////////////// Draw the legend ////////////////////////////////
///////////////////////////////////////////////////////////////////////////
var legendWidth = Math.min(width*0.8, 400);
//Color Legend container
var legendsvg = svg.append("g")
.attr("class", "legendWrapper")
.attr("transform", "translate(" + (width/2) + "," + (gridSize * days.length + 40) + ")");
//Draw the Rectangle
legendsvg.append("rect")
.attr("class", "legendRect")
.attr("x", -legendWidth/2)
.attr("y", 0)
//.attr("rx", hexRadius*1.25/2)
.attr("width", legendWidth)
.attr("height", 10)
.style("fill", "url(#legend-traffic)");
//Append title
legendsvg.append("text")
.attr("class", "legendTitle")
.attr("x", 0)
.attr("y", -10)
.style("text-anchor", "middle")
.text("Number of Accidents");
//Set scale for x-axis
var xScale = d3.scale.linear()
.range([-legendWidth/2, legendWidth/2])
.domain([ 0, d3.max(accidents, function(d) { return d.count; })] );
//Define x-axis
var xAxis = d3.svg.axis()
.orient("bottom")
.ticks(5)
//.tickFormat(formatPercent)
.scale(xScale);
//Set up X axis
legendsvg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + (10) + ")")
.call(xAxis);
Raw
test.tsv
day value hour
0 0 0
0 0.499360828808073 2
0 0.646171462386778 3
0 0.724537971482451 4
0 0.772915346313415 5
0 0.790597450604855 6
0 0.605258082408502 7
0 0.593994843379318 8
0 0.771302823531314 9
0 0.898414417801664 10
0 0.700507697192271 11
0 0.881279129608788 12
0 0.814885659133107 13
1 0.499360828808073 1
1 0 2
1 0.629250564718281 3
1 0.483979702863399 4
1 0.654017537365611 5
1 0.716134375153161 6
1 0.489573491886926 7
1 0.543687669746093 8
1 0.490339290418001 9
1 0.844450725810197 10
1 0.602767393044145 11
1 0.666763914460639 12
1 0.772632799560219 13
2 0.646171462386778 1
2 0.629250564718281 2
2 0 3
2 0.752089560063444 4
2 0.701066268308364 5
2 0.873034222976729 6
2 0.696382388454511 7
2 0.687659933186817 8
2 0.785982799492429 9
2 0.951744830846131 10
2 0.810798331425467 11
2 0.948790278602744 12
2 0.877139166869436 13
3 0.724537971482451 1
3 0.483979702863399 2
3 0.752089560063444 3
3 0 4
3 0.857787757488206 5
3 0.87161267863574 6
3 0.778681732947048 7
3 0.726511615833749 8
3 0.636753841464479 9
3 0.949265957685621 10
3 0.838461628002143 11
3 0.821271301196426 12
3 0.903085355136475 13
4 0.772915346313415 1
4 0.654017537365611 2
4 0.701066268308364 3
4 0.857787757488206 4
4 0 5
4 0.691913492115269 6
4 0.684803081088696 7
4 0.584001680861031 8
4 0.851330722840482 9
4 0.910213994679453 10
4 0.647466826043069 11
4 0.967768149042121 12
4 0.796292904486306 13
5 0.790597450604855 1
5 0.716134375153161 2
5 0.873034222976729 3
5 0.87161267863574 4
5 0.691913492115269 5
5 0 6
5 0.770609146311489 7
5 0.713571188000068 8
5 0.917268762957185 9
5 0.875317301858386 10
5 0.590161843097976 11
5 0.945591079994638 12
5 0.904540746864066 13
6 0.605258082408502 1
6 0.489573491886926 2
6 0.696382388454511 3
6 0.778681732947048 4
6 0.684803081088696 5
6 0.770609146311489 6
6 0 7
6 0.573847099749542 8
6 0.849852236803839 9
6 0.692409483963428 10
6 0.743941946001007 11
6 0.931052642353079 12
6 0.627253461895036 13
7 0.593994843379318 1
7 0.543687669746093 2
7 0.687659933186817 3
7 0.726511615833749 4
7 0.584001680861031 5
7 0.713571188000068 6
7 0.573847099749542 7
7 0 8
7 0.830837782142027 9
7 0.917170381203069 10
7 0.754288057094977 11
7 0.956768214556707 12
7 0.793644308874264 13
8 0.771302823531314 1
8 0.490339290418001 2
8 0.785982799492429 3
8 0.636753841464479 4
8 0.851330722840482 5
8 0.917268762957185 6
8 0.849852236803839 7
8 0.830837782142027 8
8 0 9
8 0.968259604544775 10
8 0.875220786601587 11
8 0.883975095852201 12
8 0.936706102546991 13
9 0.898414417801664 1
9 0.844450725810197 2
9 0.951744830846131 3
9 0.949265957685621 4
9 0.910213994679453 5
9 0.875317301858386 6
9 0.692409483963428 7
9 0.917170381203069 8
9 0.968259604544775 9
9 0 10
9 0.886354318248595 11
9 0.963336912689863 12
9 0.897770085188581 13
10 0.700507697192271 1
10 0.602767393044145 2
10 0.810798331425467 3
10 0.838461628002143 4
10 0.647466826043069 5
10 0.590161843097976 6
10 0.743941946001007 7
10 0.754288057094977 8
10 0.875220786601587 9
10 0.886354318248595 10
10 0 11
10 0.924929831981997 12
10 0.895363090812114 13
11 0.881279129608788 1
11 0.666763914460639 2
11 0.948790278602744 3
11 0.821271301196426 4
11 0.967768149042121 5
11 0.945591079994638 6
11 0.931052642353079 7
11 0.956768214556707 8
11 0.883975095852201 9
11 0.963336912689863 10
11 0.924929831981997 11
11 0 12
11 0.971220333741755 13
12 0.814885659133107 1
12 0.772632799560219 2
12 0.877139166869436 3
12 0.903085355136475 4
12 0.796292904486306 5
12 0.904540746864066 6
12 0.627253461895036 7
12 0.793644308874264 8
12 0.936706102546991 9
12 0.897770085188581 10
12 0.895363090812114 11
12 0.971220333741755 12
12 0 13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment