[ Launch: INFO 247 - Lab 6 - #5 ] 5054889 by poezn
[ Launch: INFO 247 - Lab 6 - #4 ] 5054883 by poezn
[ Launch: INFO 247 - Lab 6 - #3 ] 5054877 by poezn
[ Launch: INFO 247 - Lab 6 - #1 ] 5054749 by poezn
[ Launch: INFO 247 - Lab 6 - #1 ] 5054734 by poezn
-
-
Save poezn/5054889 to your computer and use it in GitHub Desktop.
INFO 247 - Lab 7 - #3 - Putting it together (full code)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"description":"INFO 247 - Lab 7 - #3 - Putting it together (full code)","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":15},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":15},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":15},"matrix-data.json":{"default":true,"vim":false,"emacs":false,"fontSize":15}},"fullscreen":true,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// School of Information, UC Berkeley | |
// INFO 247 Lab 7: D3.js | |
// http://blogs.ischool.berkeley.edu/i247s13/lab-7-d3-js-part-2/ | |
// get the data from the 'matrix-data.json' data file | |
var data = tb['matrix-data']; | |
// default settings | |
var squareWidth = 41, | |
legendSquareWidth = 24, | |
min = 17, | |
max = 39, | |
median = 25; | |
// Create a color scale that has the following colors: | |
// minimum: 15; red | |
// maximum: 40; green | |
// center: 23; yellow | |
var colorScale = d3.scale.linear() | |
.domain([min, median, max]) | |
.range(['#F8696B', '#FFEF94', '#8dca7e']); | |
// for each race, let's add a COLUMN that will eventually | |
// contain all squares for that particular race. | |
// We're using the SVG <g> element for this. <g> elements | |
// are invisible but can be moved around on the screen | |
var rows = g.selectAll("g.row") | |
.data(data) | |
.enter().append("g") | |
.attr({ | |
"class": "row", | |
"transform": function(d, i) { | |
var tx = 170 + i * squareWidth; | |
var ty = 150; | |
return "translate(" + [tx, ty] + ")" | |
} | |
}); | |
// within each of these COLUMN, let's add 9 squares (one for | |
// each data point) | |
rows.selectAll("rect") | |
.data(function(d, i) { return d.values; }) | |
.enter().append("rect") | |
.attr({ | |
"transform": function(d, i) { | |
var tx = 0; | |
var ty = i * squareWidth; | |
return "translate(" + [tx, ty] + ")" | |
}, | |
"width": squareWidth, | |
"height": squareWidth | |
}) | |
.style({ | |
"fill": function(d, i) { | |
return colorScale(d); | |
}, | |
"stroke": "#FFFFFF" | |
}); | |
// add labels | |
g.selectAll("labels.female") | |
.data(data) | |
.enter().append("text") | |
.attr({ | |
"class": "female", | |
"x": 20, | |
"y": function(d, i) { | |
return 173 + i * squareWidth; | |
} | |
}) | |
.style({ | |
"font-size": 12 | |
}) | |
.text(function(d, i) { | |
return d.race + " - Female"; | |
}); | |
g.selectAll("labels.male") | |
.data(data) | |
.enter().append("text") | |
.attr({ | |
"class": "male", | |
"transform": function(d, i) { | |
var tx = 193 + i * squareWidth; | |
var ty = 125; | |
var rotate = -61; | |
return "translate(" + [tx, ty] + ") rotate(" + rotate + ")" | |
} | |
}) | |
.style({ | |
"font-size": 12 | |
}) | |
.text(function(d, i) { | |
return d.race + " - Male"; | |
}); | |
// finally, let's draw a legend | |
g.selectAll("rect.legend") | |
.data(d3.range(min, max)) | |
.enter().append("rect") | |
.attr({ | |
"class": "legend", | |
"width": legendSquareWidth, | |
"height": legendSquareWidth, | |
"transform": function(d, i) { | |
var tx = 20 + legendSquareWidth * i; | |
var ty = 150 + squareWidth * 9 + 60; | |
return "translate(" + [tx, ty ] + ")"; | |
} | |
}) | |
.style({ | |
"fill": function(d, i) { | |
return colorScale(d); | |
} | |
}); | |
g.selectAll("text.legend") | |
.data(d3.range(min, max, 2)) | |
.enter().append("text") | |
.attr({ | |
"class": "legend", | |
"text-anchor": "middle", | |
"transform": function(d, i) { | |
var tx = 20 + 0.5 * legendSquareWidth | |
+ 2 * legendSquareWidth * i; | |
var ty = 150 + squareWidth * 9 + 78; | |
return "translate(" + [tx, ty ] + ")"; | |
} | |
}) | |
.style({ | |
"font-size": 12 + "px", | |
"fill": "white" | |
}) | |
.text(function(d, i) { | |
return d; | |
}); | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
[ | |
{"race": "Asian", "values": [22,17,20,20,26,26,25,21,29] }, | |
{"race": "Black", "values": [34,28,31,34,37,34,32,39,38] }, | |
{"race": "Hispanic / Latin", "values": [22,19,24,19,23,26,26,21,30] }, | |
{"race": "Indian", "values": [18,21,25,18,24,27,21,33,30] }, | |
{"race": "Middle Eastern", "values": [27,21,25,23,23,32,23,32,28] }, | |
{"race": "Native American", "values": [31,27,29,27,36,35,34,32,34] }, | |
{"race": "Other", "values": [30,24,27,28,29,32,32,35,33] }, | |
{"race": "Pacific Islander", "values": [23,25,24,24,28,29,22,30,29] }, | |
{"race": "White", "values": [21,21,22,20,25,27,26,23,29] } | |
] |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment