Skip to content

Instantly share code, notes, and snippets.

@gelicia
Created May 25, 2013 19:01
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 gelicia/5650334 to your computer and use it in GitHub Desktop.
Save gelicia/5650334 to your computer and use it in GitHub Desktop.
two hours lets go
{"description":"two hours lets go","endpoint":"","display":"div","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"school.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"mpls.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"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,"thumbnail":"http://i.imgur.com/wBoRJzO.png"}
var rectSize = {height : 50, width: 300};
var head = {x: 20, y: 20};
var frl = {x: 20, y: 50};
var ayp = {x: 20, y: 247};
var eth = {x: 20, y: 150};
var data = tributary.school;
var map = tributary["mpls"];
var display = d3.select("#display");
var path = d3.geo.path().projection(
d3.geo.mercator().center([-93, 45]).
scale(65995).translate([998 / 2, 778 / 2]));
var select = display.append("select")
.attr("size", 30)
.style("float","left");
select.selectAll("option").data(data).enter()
.append("option")
.text(function(d){return d.schoolname});
select.on("change", function() {
drawSchool(data[this.selectedIndex].schoolname, path);
})
//these are all global variables which is bad but it's prototype time
var svg = display.append("svg")
.attr({
width: "334px",
height: "700px"
});
var mapG = svg.append('g').attr("id", "mapG");
mapG.selectAll('path.shapes')
.data(map.features)
.enter().append('path')
.attr('class', 'shape')
.attr('d', path)
.style('fill', 'lightblue')
.style('stroke', "black");
function drawSchool(schoolName, path){
d3.select("#frl").remove();
d3.select("#ayp").remove();
d3.select("#eth").remove();
d3.select("#head").remove();
d3.select("#schoolPoint").remove();
var schoolInfo = getRow(schoolName);
var popScale = d3.scale.linear().domain([0,100]).range([0, rectSize.width]);
svg.append('text')
.attr({
x: head.x,
y: head.y,
id: 'head'
})
.text(schoolName + " population " + schoolInfo.total);
var frlG = svg.append('g')
.attr({
x : frl.x,
y: frl.y,
id: 'frl'
});
frlG.append('rect')
.attr({
x: frl.x,
y: frl.y,
width: popScale(100),
height: rectSize.height,
fill: 'lightblue'
})
frlG.append('rect')
.attr({
x: frl.x,
y: frl.y,
width: popScale(Number(schoolInfo.frl)),
height: rectSize.height,
fill: 'orange'
})
var frlHead = frlG.append('text')
.attr({
x: frl.x,
y: frl.y
})
.text("Free/Reduced Lunch: ");
frlG.append('text')
.attr({
x: frl.x + frlHead.node().getBBox().width + 5,
y: frl.y
})
.text(schoolInfo.frl + "%");
var ethMin = Number(schoolInfo.nativeAmericanpct) +
Number(schoolInfo.africanamericanpct) +
Number(schoolInfo.asianamericanpct) +
Number(schoolInfo.hispanicamericanpct) +
Number(schoolInfo.pacificislanderpct);
ethMin = Math.round(ethMin*100)/100
var ethG = svg.append('g')
.attr({
x : eth.x,
y: eth.y,
id: 'eth'
});
ethG.append('rect')
.attr({
x: eth.x,
y: eth.y,
width: popScale(100),
height: rectSize.height,
fill: 'lightblue'
})
ethG.append('rect')
.attr({
x: eth.x,
y: eth.y,
width: popScale(Number(ethMin)),
height: rectSize.height,
fill: 'orange'
})
var ethGHead = ethG.append('text')
.attr({
x: eth.x,
y: eth.y
})
.text("Ethnic Minority: ");
frlG.append('text')
.attr({
x: eth.x + ethGHead.node().getBBox().width + 5,
y: eth.y
})
.text(ethMin + "%");
svg.append('text')
.attr({
x: ayp.x,
y: ayp.y,
id: 'ayp'
})
.text(schoolInfo.ayp == 1 ? 'Making Adequate Yearly Progress' : 'Not Making Adequate Yearly Progress');
//cound not figure out path data - I think my projection is messed up
//this randomly finds points in scope of the mpls map
var randX = d3.scale.linear().domain([0,30]).range([120, 251]);
var randY = d3.scale.linear().domain([0,30]).range([300, 560]);
d3.select("#mapG")
.append('circle')
.attr({
cx: randX(Math.random() * 30 ),
cy: randY(Math.random() * 30 ),
// "transform" : function(d) {return "translate(" + path([schoolInfo.long,schoolInfo.lat]) + ")";},
r: 5,
fill:"yellow",
stroke: 'black',
id: "schoolPoint"
});
}
function getRow(schoolName){
for (var i = 0; i < data.length; i++) {
if(data[i].schoolname == schoolName){
return data[i];
}
}
}
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
We can make this file beautiful and searchable if this error is corrected: It looks like row 3 should actually have 19 columns, instead of 17. in line 2.
group,schoolname,nativeAmerican,nativeAmericanpct,africanamerican,africanamericanpct,asianamerican,asianamericanpct,hispanicamerican,hispanicamericanpct,whiteamerican,whiteamericanpct,pacificislander,pacificislanderpct,total,frl,ayp,long,lat
ELM-K_8,ANDERSEN UNITED,58,5.2,234,21.0,23,2.1,748,67.2,50,4.5,0,0.0,1113,98.8,0,44.953,-93.259321
ELM-K_8,ANISHINABE ACAD,277,81.0,34,9.9,2,0.6,19,5.6,9,2.6,1,0.3,342,96.2,0
ELM-K_8,ARMATAGE,3,0.5,110,18.6,33,5.6,31,5.2,413,69.9,1,0.2,591,28.4,1
ELM-K_8,BANCROFT,53,10.0,145,27.5,14,2.7,229,43.4,87,16.5,0,0.0,528,87.8,0
ELM-K_8,BARTON,8,1.1,168,22.4,38,5.1,28,3.7,505,67.4,2,0.3,749,25.9,0
ELM-K_8,BETHUNE,15,4.6,268,82.5,15,4.6,11,3.4,16,4.9,0,0.0,325,99.7,0
ELM-K_8,BRYN MAWR,9,2.2,208,51.1,120,29.5,24,5.9,45,11.1,1,0.2,407,81.7,0
ELM-K_8,BURROUGHS,7,0.9,51,6.4,38,4.8,56,7.1,641,80.7,1,0.1,794,12,0
ELM-K_8,CITY VIEW,0,0.0,64,81.0,7,8.9,2,2.5,6,7.6,0,0.0,79,97.5,0
ELM-K_8,DOWLING,14,2.8,121,24.0,27,5.3,30,5.9,312,61.8,1,0.2,505,38.8,1
ELM-K_8,EMERSON SILC,13,2.9,47,10.3,6,1.3,301,66.2,87,19.1,1,0.2,455,79.4,0
ELM-K_8,FIELD,4,0.8,99,18.9,29,5.5,37,7.1,353,67.4,2,0.4,524,25.5,1
ELM-K_8,GREEN,32,5.2,139,22.5,18,2.9,389,63.0,38,6.2,1,0.2,617,95,0
ELM-K_8,HALE,8,1.3,83,13.1,32,5.0,21,3.3,491,77.2,1,0.2,636,16.5,1
ELM-K_8,HALL,5,1.3,304,78.8,23,6.0,16,4.1,38,9.8,0,0.0,386,88.3,0
ELM-K_8,HIAWATHA,24,7.6,65,20.5,9,2.8,60,18.9,159,50.2,0,0.0,317,54.9,1
ELM-K_8,HMONG INTERNATION,6,1.3,103,22.1,321,68.9,21,4.5,15,3.2,0,0.0,466,90.3,0
ELM-K_8,JEFFERSON,27,4.2,235,36.8,19,3.0,300,46.9,55,8.6,3,0.5,639,94.8,0
ELM-K_8,KENNY,6,1.5,126,32.0,12,3.0,24,6.1,226,57.4,0,0.0,394,37.1,1
ELM-K_8,KENWOOD,10,2.2,80,17.4,32,7.0,27,5.9,309,67.2,2,0.4,460,28.3,0
ELM-K_8,LAKE HARRIET LOWER,0,0.0,15,3.8,16,4.1,11,2.8,347,89.0,1,0.3,390,7.7,1
ELM-K_8,LAKE HARRIET UPPER,2,0.3,51,7.1,42,5.9,26,3.6,594,83.1,0,0.0,715,8.7,1
ELM-K_8,LK NOKOMIS KEEWAYD,20,6.8,76,25.9,9,3.1,50,17.1,138,47.1,0,0.0,293,56.2,1
ELM-K_8,LK NOKOMIS WENONA,9,2.8,69,21.6,11,3.4,48,15.0,182,56.9,1,0.3,320,52.8,1
ELM-K_8,LORING,14,3.5,158,40.0,58,14.7,36,9.1,129,32.7,0,0.0,395,65.4,1
ELM-K_8,LUCY LANEY,18,2.7,586,88.1,17,2.6,10,1.5,33,5.0,1,0.2,665,98.9,1
ELM-K_8,LYNDALE,6,1.1,322,60.5,16,3.0,60,11.3,127,23.9,1,0.2,532,76.1,0
ELM-K_8,MARCY OPEN,20,3.0,190,28.3,36,5.4,51,7.6,368,54.8,7,1.0,672,44.8,0
ELM-K_8,NELLIE STONE JOHNSON,15,2.0,414,55.6,33,4.4,259,34.8,23,3.1,1,0.1,745,95.7,0
ELM-K_8,NORTHROP,24,5.6,77,18.0,19,4.4,89,20.8,218,50.9,1,0.2,428,49,0
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment