d3-viz.js
var chems = JSONSelect.match(".chem",rawdata).sort();
chems.splice(chems.indexOf("All"),1)
var opt = document.createElement('option');
opt.value='All';
opt.innerHTML='All';
document.getElementById("drug_drop").options.add(opt)
chems.forEach(function(d){
var opt = document.createElement('option');
opt.value=d;
opt.innerHTML=d;
document.getElementById("drug_drop").options.add(opt)
});
var margin = {top: 20, right: 20, bottom: 50, left: 75},
width = 500 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .4,.6);
var y = d3.scale.linear()
.range([height, 0]);
var all_max = new Array();
for (var i=0; i<rawdata.length; i++){
if(rawdata[i].chem == "All"){
for (var u=0; u<rawdata[i].data.grouped.length; u++){
all_max.push(rawdata[i].data.grouped[u].value)
};
for (var u=0; u<rawdata[i].data.ungrouped.length; u++){
all_max.push(rawdata[i].data.ungrouped[u].value)
};
};
};
maxs = JSONSelect.match(".value",rawdata)
for(var pop in all_max){
maxs.splice(maxs.indexOf(all_max[pop]),1);
};
sidebar_max = d3.max(maxs);
var sidebar = d3.scale.linear()
.domain([0, sidebar_max])
.range([height,2]);
var xAxis = d3.svg.axis()
.scale(x)
.ticks(0)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var svg = d3.select("#chart").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 + ")");
svg.append('rect')
.attr("class", "graph_back cot_back")
.attr("x",width/3+5)
.attr("y",-5)
.attr("width",width/3-10)
.attr("height",height+5)
.attr("opacity",0);
svg.append('rect')
.attr("class", "graph_back dep_back")
.attr("x",width/4+8)
.attr("y",-5)
.attr("width",width/4-8)
.attr("height",height+5);
svg.append('rect')
.attr("class", "graph_back dep_back")
.attr("x",(width/4)*3-8)
.attr("y",-5)
.attr("width",width/4-8)
.attr("height",height+5);
svg.append('text')
.attr("class","cot_back")
.attr("x",width/4*1)
.attr("y",height+45)
.attr("font-size",15)
.style("font-family","serif")
.attr("fill","#444444")
.attr("transform","rotate(45,"+width/4+" "+155+")")
.text("Most");
svg.append('text')
.attr("class","cot_back")
.attr("x",width/4*1.35)
.attr("y",height+45)
.attr("font-size",15)
.style("font-family","serif")
.attr("fill","#444444")
.attr("transform","rotate(45,"+width/4*1.35+" "+155+")")
.text("More");
svg.append('text')
.attr("class","cot_back")
.attr("x",width/4*1.67)
.attr("y",height+45)
.attr("font-size",15)
.style("font-family","serif")
.attr("fill","#444444")
.attr("transform","rotate(45,"+width/4*1.67+" "+155+")")
.text("Less");
svg.append('text')
.attr("class","cot_back")
.attr("x",width/4*1.98)
.attr("y",height+45)
.attr("font-size",15)
.style("font-family","serif")
.attr("fill","#444444")
.attr("transform","rotate(45,"+width/4*1.98+" "+155+")")
.text("Least");
svg.append('text')
.attr("class","cot_back")
.attr("x",width-10)
.attr("y",height+22)
.attr("font-size",24)
.style("font-family","serif")
.style("font-style","italic")
.attr("fill","#800000")
.style("text-anchor", "end")
.text("GP Local Deprivation");
svg.append('text')
.attr("class","dep_back")
.attr("x",width/4*1)
.attr("y",height+62)
.attr("font-size",100)
.style("font-family","serif")
.attr("fill","#555555")
.attr("transform","rotate(90,"+width/4+" "+225+")")
.text("}");
svg.append('text')
.attr("class","dep_back")
.attr("x",width/4*2)
.attr("y",height+70)
.attr("font-size",100)
.style("font-family","serif")
.attr("fill","#555555")
.attr("transform","rotate(90,"+width/4*2+" "+225+")")
.text("}");
svg.append('text')
.attr("class","dep_back")
.attr("x",width/4*3)
.attr("y",height+78)
.attr("font-size",100)
.style("font-family","serif")
.attr("fill","#555555")
.attr("transform","rotate(90,"+width/4*3+" "+225+")")
.text("}");
svg.append('text')
.attr("class","dep_back")
.attr("x",width/4*4)
.attr("y",height+86)
.attr("font-size",100)
.style("font-family","serif")
.attr("fill","#555555")
.attr("transform","rotate(90,"+width/4*4+" "+225+")")
.text("}");
svg.append('text')
.attr("class","dep_back")
.attr("x",(width/4*1)/1.7)
.attr("y",height+45)
.attr("font-size",14)
.style("font-family","serif")
.attr("fill","#555555")
.style("text-anchor", "middle")
.text("Most Deprived");
svg.append('text')
.attr("class","dep_back")
.attr("x",(width/4*2)/1.3)
.attr("y",height+45)
.attr("font-size",14)
.style("font-family","serif")
.attr("fill","#555555")
.style("text-anchor", "middle")
.text("More Deprived");
svg.append('text')
.attr("class","dep_back")
.attr("x",(width/4*3)/1.22)
.attr("y",height+45)
.attr("font-size",14)
.style("font-family","serif")
.attr("fill","#555555")
.style("text-anchor", "middle")
.text("Less Deprived");
svg.append('text')
.attr("class","dep_back")
.attr("x",(width/4*4)/1.17)
.attr("y",height+45)
.attr("font-size",14)
.style("font-family","serif")
.attr("fill","#555555")
.style("text-anchor", "middle")
.text("Least Deprived");
svg.append('text')
.attr("class","grp_back")
.attr("x",(width/3)-40)
.attr("y",height+20)
.attr("font-size",20)
.style("font-family","serif")
.attr("fill","#555555")
.style("text-anchor", "middle")
.text("NIR");
svg.append('text')
.attr("class","grp_back")
.attr("x",(width/2))
.attr("y",height+20)
.attr("font-size",20)
.style("font-family","serif")
.attr("fill","#555555")
.style("text-anchor", "middle")
.text("ENG");
svg.append('text')
.attr("class","grp_back")
.attr("x",(width-105))
.attr("y",height+20)
.attr("font-size",20)
.style("font-family","serif")
.attr("fill","#555555")
.style("text-anchor", "middle")
.text("WAL");
svg.append("polygon")
.attr("class","range_guide_back ranger")
.attr("points","-40,"+height+" -40,2 -65,2 -65,"+height)
.style("opacity",0);
svg.append("polygon")
.attr("class","range_guide ranger")
.attr("points","-40,"+height+" -40,2 -65,2 -65,"+height)
.style("opacity",0);
svg.append('text')
.attr("class","ranger")
.attr("x",-64)
.attr("y",-9)
.attr("font-size",11)
.style("font-family","sans-serif")
.attr("fill","#555555")
.text("Top")
.style("opacity",0);
svg.append('text')
.attr("class","ranger")
.attr("x",-64)
.attr("y",0)
.attr("font-size",11)
.style("font-family","sans-serif")
.attr("fill","#555555")
.text("Drug")
.style("opacity",0);
function update(rawdata, chem, grouper) {
var sorter = 1;
if(grouper==0){
var selector = '.chem:val("'+chem+'") ~ .data .grouped'
}else{
var selector = '.chem:val("'+chem+'") ~ .data .ungrouped'
};
var data = JSONSelect.match(selector,rawdata)[0];
data.forEach(function(d) {
d.id = d.country + d.deprive;
d.value = +d.value});
var data_max = JSONSelect.match('.chem:val("'+chem+'") ~ .data .ungrouped',rawdata)[0];
data_max.forEach(function(d) {d.value = +d.value});
var sub_max = d3.max(data_max, function(d) { return d.value; });
svg.selectAll(".range_guide")
.transition().duration(1000)
.attr("points","-40,"+height+" -40,"+sidebar(sub_max)+" -65,"+sidebar(sub_max)+" -65,"+height);
d3.selectAll(".cot_back").transition().duration(1000)
.attr("opacity",function(){if(grouper==0){return 0;}else{return 1;} });
d3.select("#sort_button").transition().duration(1000)
.style("opacity",function(){if(grouper==0){return .25;}else{return 1;} })
.style("pointer-events",function(){if(grouper==0){return "none";}else{return "auto";} } );
keycall();
d3.selectAll(".grp_back").transition().duration(700)
.attr("opacity",function(){if(grouper==1){return 0;}else{return 1;} });
d3.selectAll(".dep_back").attr("opacity",0);
x.domain(data.sort(
function(a,b){
return d3.ascending( (a.country + a.deprive), (b.country + b.deprive));
})
.map(function(d) { return d.id; }))
y.domain([0, d3.max(data, function(d) { return d.value; })]);
var bars = svg.selectAll(".bar")
.data(data);
bars.enter().append("rect")
.attr("y",height)
.attr("height",0)
.on("mouseover",function(d){
var selected_bar = this;
svg.select(".pointer."+d.id)
.style("opacity",1);
})
.on("mouseout",function(d){
svg.selectAll(".pointer")
.style("opacity",0);
});
bars
.transition().duration(1000)
.attr("y",height)
.attr("height",0)
.attr("width", x.rangeBand())
.attr("x", function(d) { return x(d.id); })
.transition().duration(1000)
.attr("class", function(d){return "bar "+d.country+" "+d.id;})
.attr("y", function(d) { return y(d.value); })
.attr("height", function(d) { return height - y(d.value); });
bars
.exit().transition().duration(1000)
.attr("y",height)
.attr("height",0).remove();
var pointers = svg.selectAll(".pointer")
.data(data);
pointers.enter().append("polygon")
.attr("class",function(d){return "pointer "+d.id;})
.style("opacity",0);
pointers
.attr("class",function(d){return "pointer "+d.id;})
.transition()
.attr("points",function(d){ return "-15,"+(y(d.value)+5)+" 0,"+(y(d.value))+" -15,"+(y(d.value)-5);});
pointers.exit().remove();
svg.select(".x.axis")
.transition()
.duration(1000)
.call(xAxis);
svg.select(".y.axis")
.transition()
.duration(1000)
.call(yAxis);
d3.select("#sort_button")
.on("click", function(){
change(data=data)
if(sorter==1){
sorter=0
}else{
sorter=1
}
});
function change(data) {
d3.selectAll(".cot_back").transition().duration(1500)
.attr("opacity",function(){
if(grouper==0){ return 0;}else{
if(sorter==1){return 0;}else{return 1;}
}
});
d3.selectAll(".dep_back").transition().duration(1500)
.attr("opacity",function(){
if(grouper==0){ return 0;}else{
if(sorter==0){return 0;}else{return 1;}
}
});
var x0x = x.domain(data.sort(
function(a,b){
if(sorter==0){
return d3.ascending( (a.country + a.deprive), (b.country + b.deprive));
}else{
return d3.ascending( (a.deprive + a.country), (b.deprive + b.country));
}
}
)
.map(function(d) { return d.id; }))
.copy();
var transition = svg.transition().duration(1000),
delay = function(d, i) { return i * 50; };
transition.selectAll(".bar")
.delay(delay)
.attr("x", function(d) { return x0x(d.id); });
transition.select(".x.axis")
.call(xAxis)
.selectAll("g")
.delay(delay);
};
function keycall(){
if(grouper==0){
d3.selectAll(".key")
.transition().duration(700)
.attr("transform","translate(0,0)")
}else{
d3.selectAll(".key")
.transition().duration(700)
.attr("transform","translate(-200,0)")
}
};
};
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Daily Doses per 1,000 Patients");
update(rawdata, chem, grouper)
d3.select("#group_button")
.on("click", function(){
update(rawdata, chem, grouper)
if(grouper==1){grouper=0}else{grouper=1}
});
var grouper = 1;
d3.select("#drug_drop").on("change",
function(){
update(rawdata,chem=this.value,grouper=0)
if(this.value=='All'){
d3.selectAll(".ranger")
.style("opacity",0);
}else{
d3.selectAll(".ranger")
.style("opacity",1);
}
grouper=1
});
var key_bar_x = width+50
key_bar_y = -30
dur = 700;
svg.append("polygon")
.attr("class","key A_NIR")
.transition().duration(dur)
.attr("points",(key_bar_x+0)+","+(key_bar_y+12)+" "+(key_bar_x+15)+","+(key_bar_y+12)+" "+(key_bar_x+15)+","+(key_bar_y+25)+" "+(key_bar_x+0)+","+(key_bar_y+25));
svg.append("text")
.attr("class","key")
.transition().duration(dur)
.attr("x",key_bar_x+17)
.attr("y",key_bar_y+22)
.style("fill", "black")
.text("NIR");
svg.append("polygon")
.attr("class","key B_ENG")
.transition().duration(dur)
.attr("points",(key_bar_x+45)+","+(key_bar_y+12)+" "+(key_bar_x+60)+","+(key_bar_y+12)+" "+(key_bar_x+60)+","+(key_bar_y+25)+" "+(key_bar_x+45)+","+(key_bar_y+25));
svg.append("text")
.attr("class","key")
.transition().duration(dur)
.attr("x",key_bar_x+62)
.attr("y",key_bar_y+22)
.style("fill", "black")
.text("ENG");
svg.append("polygon")
.attr("class","key C_WAL")
.transition().duration(dur)
.attr("points",(key_bar_x+90)+","+(key_bar_y+12)+" "+(key_bar_x+105)+","+(key_bar_y+12)+" "+(key_bar_x+105)+","+(key_bar_y+25)+" "+(key_bar_x+90)+","+(key_bar_y+25));
svg.append("text")
.attr("class","key")
.transition().duration(dur)
.attr("x",key_bar_x+107)
.attr("y",key_bar_y+22)
.style("fill", "black")
.text("WAL");