xxxxxxxxxx<meta name="robots" content="noindex"><html><head> <script src="https://d3js.org/d3.v3.min.js"></script> <script src="https://d3js.org/d3.v4.min.js"></script> <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script> <script type="text/javascript" src="https://d3js.org/topojson.v2.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.25.0/d3-legend.js"></script> <meta charset="utf-8"> <title>"Skilled ANC Coverage" (PHS II)</title> <style id="jsbin-css"> .whole-strip { align-items: center; } body { width: 50%; margin: 0 auto; } #title { text-align: center; font-weight: 600; } /*#map_strip { width: 18%; margin: 0 auto; margin-top: 20px; }*/ .dissagg_type { font-family: sans-serif; align-items: center; font-size: 14px; padding-top: 7px; padding-bottom: 7px; text-align: left; width: 313px; margin: 0 auto; font-weight: 600; } .parent-block.AREA { display: flex; align-items: center; justify-content: center; } .woman-icon { fill: #2980b9; } #Punjab_map { fill: #2ecc71; } .label { font-family: sans-serif; font-size: 9px; } .legend-svg { display: block; margin: 0 auto; } .map_box_div { display: block; margin: 0 auto; } .map_in_a_box { margin: 0 auto; display: block; margin-top: 20px; background: none; } @media only screen and (max-width: 650px) { /*Restyling for every block to be stacked on top of one another*/ } </style></head><body><script id="jsbin-javascript"> // defining the chart/ title div var title_text = "Skilled Antenatal Care Coverage" var title = d3.select("body") .append("div") .attr("id", "title") title.append("text") .text(title_text) .style("font-family", "sans-serif") .style("font-size", "17px"); // defining the map div with the id "map_strip" var map_block = d3.select("body") .append("div") .attr("id", "map_strip") .style("position","relative") // defining the width and height of the map var width = 145, height = 175; // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! // min max has been hard coded, get this from the data itself // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! d3.csv('data_dist.csv', function(d){ d.forEach(function(d){ // converting full immunization rates to numeric values in JS d.Skilled_ANC = +d.Skilled_ANC; }); var Indic = d.map(function(d){ return d.Skilled_ANC; }) var min_ind = d3.min(Indic); var max_ind = d3.max(Indic); console.log(min_ind); console.log(max_ind); // var min_ind = 40 // var max_ind = 95 // interval length var min_max_interval = (max_ind - min_ind)/3; // color scale for the choropleth map (just three gradations) var colorScale = d3.scaleThreshold() .domain(d3.range(min_ind, max_ind, min_max_interval)) .range(d3.schemeGreens[4]); // checking teh cut points for the color scale console.log(d3.range(min_ind, max_ind, min_max_interval)); // defining the projection for map (change center and scale to get desired size for the map) var projection = d3.geoMercator() .center([89.70, 24.80]) .scale([150 * 9]); // defining the paths for the maps var path = d3.geoPath().projection(projection); // bring legend here // getting the cut points for the legend var lowest_int_text = "(" + Math.round(min_ind) + "%-" + Math.round((min_ind + min_max_interval)) +"%)" ; var mid_int_text = "(" + Math.round((min_ind + min_max_interval)) + "%-" + Math.round((min_ind + (2*min_max_interval))) +"%)"; var highest_int_text = "(" + Math.round((min_ind + (2*min_max_interval))) + "%-" + Math.round((min_ind + (3*min_max_interval))) +"%)"; // defining the ordinal scale for drawing the legend var ordinal = d3.scaleOrdinal() .domain(["Low " + lowest_int_text , "Mid " + mid_int_text, "High " + highest_int_text]) .range([ colorScale(min_ind), colorScale(min_ind + min_max_interval) , colorScale(min_ind + (2*min_max_interval))]); // svg that contains the legend as well as the map var legend_svg = map_block.append("div") .classed("legend-svg-div", true) .style("position","absolute") .style("width","100%") .append("svg") .classed("legend-svg", "true") //.attr("width", ) .attr("height", height); // a group within the svg that contains the legend elements legend_svg.append("g") .attr("class", "legendOrdinal") .attr("transform", "translate(0, 0)"); // defining the color/ ordinal legend var legendOrdinal = d3.legendColor() .shapePadding(5) .scale(ordinal) .shapeWidth(15) .shapeHeight(10); // defining the map svg with the class "map_in_a_box" var svg = map_block //.select(".legend-svg") .append("div") .classed("map_box_div", true) .append("svg") .attr("width", width) .attr("height", height) .style("opacity", .95) .classed("map_in_a_box", "true"); d3.json("Punjab_dist.topojson", function (error, topology) { // <-A svg.selectAll("path") .data(topojson.feature(topology, topology.objects.Punjab_dist_corr).features) .enter().append("path") .attr("d", path) //.style("fill", "#2f4f4f") .style("opacity", 0.85) .style("stroke", "white") .style("stroke-width", 0.125) .style("fill", function(d) {//Get data value var value = d.properties.Skilled_ANC; if (value) { //If value exists… return colorScale(value); } else { // If value is undefined… return "#ccc"; } }); //console.log(topology.objects.Punjab_immun.geometries); d3.select(".legendOrdinal").call(legendOrdinal); svg.append("text") .text("79%") .attr("x", svg.attr("width")/ 2) .attr("y", svg.attr("height")/ 2) .style("font-family", "sans-serif") .style("font-size", "20px") .style("font-weight", "bold") .style("text-anchor", "middle") .style("fill", "white") .style("stroke", "black") .style("stroke-width", 0.9) .style("fill-opacity", 0.80); //.style("fill-opacity", 0.00); }); // add the external Punjab map svg into the div by id // document.getElementById("map_strip").appendChild(xml.documentElement); // var map_svg = d3.select("svg") // .attr("id", "Punjab_map"); // // map_svg.attr("transform", "translate(0, 0)scale(0.90)"); // // // console.log(map_svg.attr("width")); var sizeScale = d3.scale.linear() .domain([50, 100]) .range([0.375, 0.75]) strip1 = d3.select("body") .append("div") .classed("whole-strip", true) strip2 = d3.select("body") .append("div") .classed("whole-strip", true) strip3 = d3.select("body") .append("div") .classed("whole-strip", true) // defining dissagg type function plot(data, category_label, class_name){ this.classed(class_name, true); var disagg_type = this.append("div") .classed("dissagg-type", true) .style("font-family", "sans-serif") .classed(class_name, true) //.style("display", "flex") .style("align-items", "center") .style("font-size", "14px") .style("font-weight", "600") .style("padding", "7px") .style("padding-top", "12px") .style("width","313px") .style("margin", "0 auto"); // adding text to the disagg type disagg_type.append("text") .text(category_label); // parent block within div (contains the pictograms and associated data) var parent = this.append("div") .classed("parent-block", true) .classed(class_name, true) .style("display", "flex") .style("align-items","center") .style("justify-content","center"); var icons = parent.selectAll(".icon-data") .data(data) .enter() .append("div") .attr("class", "icon-data") icons.append("div") .classed("label-contain", true) //.style("text-align", "center") //.style("padding-top", "2px") .style("text-align", "center") .append("text") .text(function(d, i){ return d.category; }) .style("font-family", "sans-serif") .style("font-size", "0.8em") icons.append("div") .attr("class", "svg-contain") .append("svg") .attr("class", "woman-icon") .attr("width", 64) .attr("height", 64) .attr("viewBox", function(d, i ){ // "0 0 64 64" return 0 + " " + 0 + " " + 31.5 + " " + 31.5; }) //d3.select("body") this.selectAll(".woman-icon") .append("path") // .attr("d", "M53.402 52.363c-1.757 0.504-3.553-0.383-4.020-1.991l-6.006-20.976-2.931-0.004 9.604 33.468h-35.78l9.604-33.468-2.935 0.004-6.009 20.976c-0.46 1.609-2.258 2.495-4.013 1.991-1.759-0.504-2.868-2.042-2.278-4.051l6.181-21.52c2.469-8.603 9.668-8.333 9.668-8.333h15.344c0 0 7.2-0.27 9.671 8.333l6.176 21.52c0.589 2.009-0.52 3.547-2.277 4.051zM32.206 33.291c-5.319 0-9.63 4.309-9.63 9.627 0 4.832 3.56 8.835 8.203 9.524v2.641h-2.897v2.883h2.897v2.894h2.882v-2.894h2.895v-2.883h-2.895v-2.645c4.632-0.7 8.172-4.698 8.172-9.52 0-5.318-4.307-9.627-9.626-9.627zM32.157 49.506c-3.71 0-6.716-3.008-6.716-6.718 0-3.708 3.006-6.718 6.716-6.718 3.713 0 6.717 3.010 6.717 6.718 0.001 3.71-3.005 6.718-6.717 6.718z") .attr("d", "M25.784,3.452c-0.159,0.233-0.293,0.476-0.393,0.723c-0.271,0.695-0.236,1.323,0.104,1.864 c0.63,0.998,1.584,2.934,0.865,4.672c-0.468,1.137-1.527,1.901-3.15,2.272c-0.263,0.06-0.5,0.13-0.709,0.209 c-0.224,0.083-0.373,0.292-0.384,0.528c-0.011,0.237,0.123,0.458,0.337,0.56c0.588,0.281,1.13,0.598,1.601,0.938 c0.629,0.015,1.277,0.162,1.878,0.534c1.476,0.915,2.112,2.813,1.896,5.647c-0.059,0.758-0.691,1.333-1.439,1.333 c-0.038,0-0.076-0.001-0.114-0.004c-0.796-0.061-1.39-0.756-1.328-1.551c0.018-0.25,0.028-0.482,0.032-0.698 c0.003-0.163-0.096-0.31-0.247-0.37c-0.15-0.059-0.323-0.02-0.434,0.102c-1.915,2.104-4.379,3.817-9.312,3.513 c-5.144-0.319-8.333-4.221-7.417-7.464c0-0.001,0-0.002,0-0.003c0.072-0.263-0.046-0.539-0.284-0.668 c-1.527-0.837-2.548-2.471-2.515-4.332c0.05-2.672,2.255-4.798,4.927-4.75c2.673,0.048,3.899,3.04,3.849,5.711 c-0.007,0.308-0.029,0.598-0.068,0.87c-0.032,0.223,0.061,0.444,0.243,0.577c0.182,0.132,0.422,0.153,0.624,0.054 c0.085-0.042,0.172-0.085,0.26-0.131c0.09-0.045,0.18-0.087,0.274-0.127c0.325-0.891,0.48-1.79,0.197-2.316 c-0.38-0.703-0.118-1.579,0.586-1.958c0.699-0.38,1.579-0.117,1.958,0.584c0.401,0.749,0.523,1.57,0.479,2.383 c-0.025,0.5,0.327,0.941,0.821,1.022c0.258,0.042,0.517,0.093,0.773,0.151c0.235,0.053,0.478-0.047,0.606-0.25 c0.447-0.707,1.315-1.21,2.587-1.5c1.14-0.261,1.857-0.737,2.138-1.415c0.343-0.831,0.068-2.053-0.752-3.35 c-0.584-0.926-0.665-2.05-0.228-3.164c0.142-0.359,0.336-0.711,0.569-1.043c-2.426-1.593-5.312-2.543-8.431-2.602 C7.409-0.156,0.166,6.828,0.003,15.605c-0.159,8.777,6.824,16.022,15.601,16.184c8.777,0.16,16.023-6.825,16.184-15.602 C31.883,11.043,29.521,6.426,25.784,3.452z") //d3.select("body") this.selectAll(".icon-data") .selectAll(".woman-icon") .attr("transform", function(d, i){ //return "translate(" + 64*i + "," + (64 - sizeScale(d.value) * 64)/2 + ")" + "scale(" + sizeScale(d.value) + ")" ; return "translate(" + 64*i + ",0)" + "scale(" + sizeScale(d.value) + ")" ; }); //d3.select("body") this.selectAll(".icon-data") .append("div") .classed("text-contain", true) .style("text-align", "center") .style("padding-top", "2px") .append("text") .text(function(d, i){ return d.value + "%"; }) //.attr("dy", 69) .style("font-family", "sans-serif") } plot.call(strip1, [{category: "Lowest", value: 67.6}, {category: "Second", value: 78.3}, {category: "Middle", value: 81.6}, {category: "Fourth", value: 86.3}, {category: "Highest", value: 89.3}], "Across Wealth Quintile", "WQTL"); plot.call(strip2, [{category: "Preschool", value: 73.2}, {category: "Primary", value: 83.0}, {category: "Middle", value: 86.3}, {category: "Matric", value: 87.9}, {category: "Higher", value: 91.4}], "Across Mother's education", "MOTH_EDUC"); plot.call(strip3, [{category: "Rural", value: 78.0}, {category: "Urban", value: 85.8}], "Across Area", "AREA"); })</script></body></html> Modified http://d3js.org/d3.v3.min.js to a secure url
Modified http://d3js.org/d3.v4.min.js to a secure url
https://d3js.org/d3.v3.min.js
https://d3js.org/d3.v4.min.js
https://d3js.org/d3-scale-chromatic.v1.min.js
https://d3js.org/topojson.v2.min.js
https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.25.0/d3-legend.js