Skip to content

Instantly share code, notes, and snippets.

@cflavs

cflavs/index.html

Created May 14, 2016 13:54
Show Gist options
  • Save cflavs/598cdbae93601077d195d80046eabb65 to your computer and use it in GitHub Desktop.
Save cflavs/598cdbae93601077d195d80046eabb65 to your computer and use it in GitHub Desktop.
Download ZIP
Distorção Idade/Série 1.0
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font-family: "Open Sans", sans-serif;
font-size: 16px;
padding: 40px;
}
h1{
font-size: 3em;
font-weight: 700;
color: #0099FF;
}
a{
color: #333399;
}
a:hover{
color: #FF0099;
}
.states {
stroke: #fff;
stroke-width:1px;
}
.states:hover{
opacity: .6;
}
.legendLinear text {
font-size: 12px;
}
.tooltip{
background-color:rgba(255,255,255,0.8);
margin: 5px;
padding: 5px;
font-size: 13px;
}
.axis path,
.axis line {
fill: none;
stroke: black;
stroke-width: 1px;
}
.line {
fill: none;
stroke-width: 1px;
stroke-opacity: 70%;
}
.line.unfocused{
stroke-opacity: 40%;
stroke: #999999;
}
.line.focused {
fill: none;
stroke-width: 3px;
stroke-opacity: 100%;
stroke: #FF9900;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
.tooltip1 {
position: absolute;
z-index: 10;
}
.tooltip1 p {
background-color: rgba(255,255,255,.8);
border: 2px #d3d3d3 solid;
font-size: 15px;
padding: 4px;
}
.title{
font-size: 20px;
color: #0099ff;
}
.labels{
font-family: sans-serif;
font-size: 11px;
fill: #FF0099;
}
.xlabel{
font-family: sans-serif;
font-size: 15px;
fill: #474747;
}
.ylabel{
font-family: sans-serif;
font-size: 15px;
fill: #474747;
}
.labels{
font-family: sans-serif;
font-size: 11px;
fill: #FF0099;
}
.xlabel{
font-family: sans-serif;
font-size: 15px;
fill: #474747;
}
.ylabel{
font-family: sans-serif;
font-size: 15px;
fill: #474747;
}
.chart rect {
fill: steelblue;
}
.chart text {
fill: white;
font: 10px sans-serif;
text-anchor: end;
}
body {
font: 10px sans-serif;
}
.bar rect {
fill: steelblue;
}
.bar text.value {
fill: white;
}
.axis {
shape-rendering: crispEdges;
}
.axis path {
fill: none;
}
.x.axis line {
stroke: #fff;
stroke-opacity: .8;
}
.y.axis path {
stroke: black;
}
.d3-tip {
line-height: 1;
font-weight: bold;
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 2px;
}
/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
box-sizing: border-box;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: rgba(0, 0, 0, 0.8);
content: "\25BC";
position: absolute;
text-align: center;
}
/* Style northward tooltips differently */
.d3-tip.n:after {
margin: -1px 0 0 0;
top: 100%;
left: 0;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/queue.v1.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<script>
!function a(b,c,d){function e(g,h){if(!c[g]){if(!b[g]){var i="function"==typeof require&&require;if(!h&&i)return i(g,!0);if(f)return f(g,!0);var j=new Error("Cannot find module '"+g+"'");throw j.code="MODULE_NOT_FOUND",j}var k=c[g]={exports:{}};b[g][0].call(k.exports,function(a){var c=b[g][1][a];return e(c?c:a)},k,k.exports,a,b,c,d)}return c[g].exports}for(var f="function"==typeof require&&require,g=0;g<d.length;g++)e(d[g]);return e}({1:[function(a,b,c){var d=a("./legend");b.exports=function(){function a(a){var v=d.d3_calcType(c,t,j,k,o,r),w=a.append("g").attr("class",l+"legendCells"),x=w.selectAll("."+l+"cell").data(v.data),y=x.enter().append("g",".cell").attr("class",l+"cell").style("opacity",1e-6);shapeEnter=y.append(e).attr("class",l+"swatch"),shapes=x.select("g."+l+"cell "+e),d.d3_addEvents(y,u),x.exit().transition().style("opacity",0).remove(),d.d3_drawShapes(e,shapes,g,f,h,b),d.d3_addText(w,y,v.labels,l);var z=x.select("text"),A=shapes[0].map(function(a){return a.getBBox()});m?shapes.attr("class",function(a){return l+"swatch "+v.feature(a)}):"line"==e?shapes.style("stroke",v.feature):shapes.style("fill",v.feature);var B,C,D="start"==q?0:"middle"==q?.5:1;"vertical"===s?(B=function(a,b){return"translate(0, "+b*(A[b].height+i)+")"},C=function(a,b){return"translate("+(A[b].width+A[b].x+p)+","+(A[b].y+A[b].height/2+5)+")"}):"horizontal"===s&&(B=function(a,b){return"translate("+b*(A[b].width+i)+",0)"},C=function(a,b){return"translate("+(A[b].width*D+A[b].x)+","+(A[b].height+A[b].y+p+8)+")"}),d.d3_placement(s,x,B,z,C,q),d.d3_title(a,w,n,l),x.transition().style("opacity",1)}var b,c=d3.scale.linear(),e="rect",f=15,g=15,h=10,i=2,j=[5],k=[],l="",m=!1,n="",o=d3.format(".01f"),p=10,q="middle",r="to",s="vertical",t=!1,u=d3.dispatch("cellover","cellout","cellclick");return a.scale=function(b){return arguments.length?(c=b,a):a},a.cells=function(b){return arguments.length?((b.length>1||b>=2)&&(j=b),a):a},a.shape=function(c,d){return arguments.length?(("rect"==c||"circle"==c||"line"==c||"path"==c&&"string"==typeof d)&&(e=c,b=d),a):a},a.shapeWidth=function(b){return arguments.length?(f=+b,a):a},a.shapeHeight=function(b){return arguments.length?(g=+b,a):a},a.shapeRadius=function(b){return arguments.length?(h=+b,a):a},a.shapePadding=function(b){return arguments.length?(i=+b,a):a},a.labels=function(b){return arguments.length?(k=b,a):a},a.labelAlign=function(b){return arguments.length?(("start"==b||"end"==b||"middle"==b)&&(q=b),a):a},a.labelFormat=function(b){return arguments.length?(o=b,a):a},a.labelOffset=function(b){return arguments.length?(p=+b,a):a},a.labelDelimiter=function(b){return arguments.length?(r=b,a):a},a.useClass=function(b){return arguments.length?((b===!0||b===!1)&&(m=b),a):a},a.orient=function(b){return arguments.length?(b=b.toLowerCase(),("horizontal"==b||"vertical"==b)&&(s=b),a):a},a.ascending=function(b){return arguments.length?(t=!!b,a):a},a.classPrefix=function(b){return arguments.length?(l=b,a):a},a.title=function(b){return arguments.length?(n=b,a):a},d3.rebind(a,u,"on"),a}},{"./legend":2}],2:[function(a,b,c){b.exports={d3_identity:function(a){return a},d3_mergeLabels:function(a,b){if(0===b.length)return a;a=a?a:[];for(var c=b.length;c<a.length;c++)b.push(a[c]);return b},d3_linearLegend:function(a,b,c){var d=[];if(b.length>1)d=b;else for(var e=a.domain(),f=(e[e.length-1]-e[0])/(b-1),g=0;b>g;g++)d.push(e[0]+g*f);var h=d.map(c);return{data:d,labels:h,feature:function(b){return a(b)}}},d3_quantLegend:function(a,b,c){var d=a.range().map(function(d){var e=a.invertExtent(d);b(e[0]),b(e[1]);return b(e[0])+" "+c+" "+b(e[1])});return{data:a.range(),labels:d,feature:this.d3_identity}},d3_ordinalLegend:function(a){return{data:a.domain(),labels:a.domain(),feature:function(b){return a(b)}}},d3_drawShapes:function(a,b,c,d,e,f){"rect"===a?b.attr("height",c).attr("width",d):"circle"===a?b.attr("r",e):"line"===a?b.attr("x1",0).attr("x2",d).attr("y1",0).attr("y2",0):"path"===a&&b.attr("d",f)},d3_addText:function(a,b,c,d){b.append("text").attr("class",d+"label"),a.selectAll("g.cell text").data(c).text(this.d3_identity)},d3_calcType:function(a,b,c,d,e,f){var g=a.ticks?this.d3_linearLegend(a,c,e):a.invertExtent?this.d3_quantLegend(a,e,f):this.d3_ordinalLegend(a);return g.labels=this.d3_mergeLabels(g.labels,d),b&&(g.labels=this.d3_reverse(g.labels),g.data=this.d3_reverse(g.data)),g},d3_reverse:function(a){for(var b=[],c=0,d=a.length;d>c;c++)b[c]=a[d-c-1];return b},d3_placement:function(a,b,c,d,e,f){b.attr("transform",c),d.attr("transform",e),"horizontal"===a&&d.style("text-anchor",f)},d3_addEvents:function(a,b){var c=this;a.on("mouseover.legend",function(a){c.d3_cellOver(b,a,this)}).on("mouseout.legend",function(a){c.d3_cellOut(b,a,this)}).on("click.legend",function(a){c.d3_cellClick(b,a,this)})},d3_cellOver:function(a,b,c){a.cellover.call(c,b)},d3_cellOut:function(a,b,c){a.cellout.call(c,b)},d3_cellClick:function(a,b,c){a.cellclick.call(c,b)},d3_title:function(a,b,c,d){if(""!==c){a.append("text").attr("class",d+"legendTitle").text(c);var e=a.select("."+d+"legendTitle").map(function(a){return a[0].getBBox().height})[0],f=-b.map(function(a){return a[0].getBBox().x})[0];b.attr("transform","translate("+f+","+(e+10)+")")}}}},{}],3:[function(a,b,c){var d=a("./legend");b.exports=function(){function a(a){var s=d.d3_calcType(c,q,h,i,l,o),t=a.append("g").attr("class",j+"legendCells"),u=t.selectAll("."+j+"cell").data(s.data),v=u.enter().append("g",".cell").attr("class",j+"cell").style("opacity",1e-6);shapeEnter=v.append(e).attr("class",j+"swatch"),shapes=u.select("g."+j+"cell "+e),d.d3_addEvents(v,r),u.exit().transition().style("opacity",0).remove(),"line"===e?(d.d3_drawShapes(e,shapes,0,f),shapes.attr("stroke-width",s.feature)):d.d3_drawShapes(e,shapes,s.feature,s.feature,s.feature,b),d.d3_addText(t,v,s.labels,j);var w,x,y=u.select("text"),z=shapes[0].map(function(a,b){var d=a.getBBox(),f=c(s.data[b]);return"line"===e&&"horizontal"===p?d.height=d.height+f:"line"===e&&"vertical"===p&&(d.width=d.width),d}),A=d3.max(z,function(a){return a.height+a.y}),B=d3.max(z,function(a){return a.width+a.x}),C="start"==n?0:"middle"==n?.5:1;"vertical"===p?(w=function(a,b){var c=d3.sum(z.slice(0,b+1),function(a){return a.height});return"translate(0, "+(c+b*g)+")"},x=function(a,b){return"translate("+(B+m)+","+(z[b].y+z[b].height/2+5)+")"}):"horizontal"===p&&(w=function(a,b){var c=d3.sum(z.slice(0,b+1),function(a){return a.width});return"translate("+(c+b*g)+",0)"},x=function(a,b){return"translate("+(z[b].width*C+z[b].x)+","+(A+m)+")"}),d.d3_placement(p,u,w,y,x,n),d.d3_title(a,t,k,j),u.transition().style("opacity",1)}var b,c=d3.scale.linear(),e="rect",f=15,g=2,h=[5],i=[],j="",k="",l=d3.format(".01f"),m=10,n="middle",o="to",p="vertical",q=!1,r=d3.dispatch("cellover","cellout","cellclick");return a.scale=function(b){return arguments.length?(c=b,a):a},a.cells=function(b){return arguments.length?((b.length>1||b>=2)&&(h=b),a):a},a.shape=function(c,d){return arguments.length?(("rect"==c||"circle"==c||"line"==c)&&(e=c,b=d),a):a},a.shapeWidth=function(b){return arguments.length?(f=+b,a):a},a.shapePadding=function(b){return arguments.length?(g=+b,a):a},a.labels=function(b){return arguments.length?(i=b,a):a},a.labelAlign=function(b){return arguments.length?(("start"==b||"end"==b||"middle"==b)&&(n=b),a):a},a.labelFormat=function(b){return arguments.length?(l=b,a):a},a.labelOffset=function(b){return arguments.length?(m=+b,a):a},a.labelDelimiter=function(b){return arguments.length?(o=b,a):a},a.orient=function(b){return arguments.length?(b=b.toLowerCase(),("horizontal"==b||"vertical"==b)&&(p=b),a):a},a.ascending=function(b){return arguments.length?(q=!!b,a):a},a.classPrefix=function(b){return arguments.length?(j=b,a):a},a.title=function(b){return arguments.length?(k=b,a):a},d3.rebind(a,r,"on"),a}},{"./legend":2}],4:[function(a,b,c){var d=a("./legend");b.exports=function(){function a(a){var t=d.d3_calcType(b,r,i,j,m,p),u=a.append("g").attr("class",k+"legendCells"),v=u.selectAll("."+k+"cell").data(t.data),w=v.enter().append("g",".cell").attr("class",k+"cell").style("opacity",1e-6);shapeEnter=w.append(c).attr("class",k+"swatch"),shapes=v.select("g."+k+"cell "+c),d.d3_addEvents(w,s),v.exit().transition().style("opacity",0).remove(),d.d3_drawShapes(c,shapes,f,e,g,t.feature),d.d3_addText(u,w,t.labels,k);var x,y,z=v.select("text"),A=shapes[0].map(function(a){return a.getBBox()}),B=d3.max(A,function(a){return a.height}),C=d3.max(A,function(a){return a.width}),D="start"==n?0:"middle"==n?.5:1;"vertical"===q?(x=function(a,b){return"translate(0, "+b*(B+h)+")"},y=function(a,b){return"translate("+(C+o)+","+(A[b].y+A[b].height/2+5)+")"}):"horizontal"===q&&(x=function(a,b){return"translate("+b*(C+h)+",0)"},y=function(a,b){return"translate("+(A[b].width*D+A[b].x)+","+(B+o)+")"}),d.d3_placement(q,v,x,z,y,n),d.d3_title(a,u,l,k),v.transition().style("opacity",1)}var b=d3.scale.linear(),c="path",e=15,f=15,g=10,h=5,i=[5],j=[],k="",l="",m=d3.format(".01f"),n="middle",o=10,p="to",q="vertical",r=!1,s=d3.dispatch("cellover","cellout","cellclick");return a.scale=function(c){return arguments.length?(b=c,a):a},a.cells=function(b){return arguments.length?((b.length>1||b>=2)&&(i=b),a):a},a.shapePadding=function(b){return arguments.length?(h=+b,a):a},a.labels=function(b){return arguments.length?(j=b,a):a},a.labelAlign=function(b){return arguments.length?(("start"==b||"end"==b||"middle"==b)&&(n=b),a):a},a.labelFormat=function(b){return arguments.length?(m=b,a):a},a.labelOffset=function(b){return arguments.length?(o=+b,a):a},a.labelDelimiter=function(b){return arguments.length?(p=b,a):a},a.orient=function(b){return arguments.length?(b=b.toLowerCase(),("horizontal"==b||"vertical"==b)&&(q=b),a):a},a.ascending=function(b){return arguments.length?(r=!!b,a):a},a.classPrefix=function(b){return arguments.length?(k=b,a):a},a.title=function(b){return arguments.length?(l=b,a):a},d3.rebind(a,s,"on"),a}},{"./legend":2}],5:[function(a,b,c){d3.legend={color:a("./color"),size:a("./size"),symbol:a("./symbol")}},{"./color":1,"./size":3,"./symbol":4}]},{},[5]);
</script>
<script>
//from http://bl.ocks.org/rveciana/5181105
d3.helper = {};
d3.helper.tooltip = function(accessor){
return function(selection){
var tooltipDiv;
var bodyNode = d3.select('body').node();
selection.on("mouseover", function(d, i){
// Clean up lost tooltips
d3.select('body').selectAll('div.tooltip').remove();
// Append tooltip
tooltipDiv = d3.select('body').append('div').attr('class', 'tooltip');
var absoluteMousePos = d3.mouse(bodyNode);
tooltipDiv.style('left', (absoluteMousePos[0] + 10)+'px')
.style('top', (absoluteMousePos[1] - 15)+'px')
.style('position', 'absolute')
.style('z-index', 1001);
// Add text using the accessor function
var tooltipText = accessor(d, i) || '';
// Crop text arbitrarily
//tooltipDiv.style('width', function(d, i){return (tooltipText.length > 80) ? '300px' : null;})
// .html(tooltipText);
})
.on('mousemove', function(d, i) {
// Move tooltip
var absoluteMousePos = d3.mouse(bodyNode);
tooltipDiv.style('left', (absoluteMousePos[0] + 10)+'px')
.style('top', (absoluteMousePos[1] - 15)+'px');
var tooltipText = accessor(d, i) || '';
tooltipDiv.html(tooltipText);
})
.on("mouseout", function(d, i){
// Remove tooltip
tooltipDiv.remove();
});
};
};
</script>
<script>
var width = 1000, height = 640;
var colorScale = d3.scale.linear().range(["#D4EEFF", "#0099FF"]).interpolate(d3.interpolateLab);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var projection = d3.geo.mercator()
.center([-55,-10])
.scale(750);
var format = d3.format("%0");
var path = d3.geo.path()
.projection(projection);
var countryById = d3.map();
queue()
.defer(d3.json, "https://gist.githubusercontent.com/cflavs/275695e32786b92104ab83bef60abb22/raw/ccdf3c67dc206c64346d7bd43d46f7e6d5362ef2/br-states-heavy.json")
.defer(d3.csv, "https://gist.githubusercontent.com/cflavs/275695e32786b92104ab83bef60abb22/raw/4f1b14919c0a98a66a1261870440257f3a75d8ae/mortality.csv", typeAndSet) // process
.await(ready);
function typeAndSet(d) {
d.mortality = +d.mortality;
countryById.set(d.states, d);
return d;
}
function getColor(d) {
var dataRow = countryById.get(d.properties.name);
if (dataRow) {
console.log(dataRow);
return colorScale(dataRow.mortality);
} else {
console.log("no dataRow", d);
return "#ccc";
}
}
function getText(d) {
var dataRow = countryById.get(d.properties.name);
if (dataRow) {
console.log(dataRow);
return "<strong>" + dataRow.states + "</strong>"+ ": A distorção idade/série no <strong> Ensino Fundamental </strong> é de <strong>" + dataRow.mortality + "% </strong>";
} else {
console.log("no dataRow", d);
return d.properties.name + ": No data.";
}
}
function ready(error, br_states, mortality){
console.log(br_states);
console.log(mortality);
colorScale.domain(d3.extent(mortality, function(d) {return d.mortality;}));
var states = topojson.feature(br_states, br_states.objects.states);
svg.selectAll("path")
.data(states.features)
.enter().append("path")
.attr("class", "states")
.attr("d", path)
.style('fill', function(d,i){console.log(d.properties.name);
return getColor(d);})
.call(d3.helper.tooltip(
function(d, i){
return getText(d);
}
)); //tooltip based in an example from Roger Veciana: http://bl.ocks.org/rveciana/5181105
var linear = colorScale;
svg.append("g")
.attr("class", "legendLinear")
.attr("transform", "translate(20,20)");
var legendLinear = d3.legend.color()
.shapeWidth(30)
.orient('horizontal')
.scale(linear);
svg.select(".legendLinear")
.call(legendLinear);
};
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment