D3 Examples - Institutional Delivery (PHS II)

xxxxxxxxxx
 
<!DOCTYPE html>
​
<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>Institutional Delivery (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 = "Institutional Delivery for Pregnant Women"
​
  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.Total = +d.Total;
    });
​
    var Indic = d.map(function(d){
      return d.Total;
    })
​
    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.Total;
                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("77.5%")
              .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.90)
              .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.45, 0.9])
​
    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 + " " + 64 + " " + 64;
          })
          .append("path")
          .attr("d", "M32.168 16.068c-4.331 0-7.847-3.485-7.847-7.785 0-4.298 3.516-7.783 7.847-7.783 4.331 0 7.847 3.485 7.847 7.783 0 4.301-3.515 7.785-7.847 7.785z")
​
      //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", "M53.853 52.949c-1.798 0.516-3.637-0.389-4.109-2.037l-6.148-21.463-2.998-0.004 9.825 34.246h-36.612l9.827-34.246-3.003 0.004-6.146 21.463c-0.473 1.648-2.313 2.553-4.107 2.037-1.799-0.516-2.935-2.087-2.331-4.145l6.323-22.022c2.526-8.801 9.894-8.526 9.894-8.526h15.701c0 0 7.366-0.275 9.895 8.526l6.321 22.022c0.605 2.058-0.532 3.629-2.33 4.145zM32.119 37.915c-6.559 0-11.874 5.311-11.874 11.871 0 6.555 5.315 11.872 11.874 11.872 6.552 0 11.868-5.316 11.868-11.872 0-6.56-5.314-11.871-11.868-11.871zM34.67 46.896c-1.426-0.671-2.033-2.371-1.358-3.799 0.675-1.42 2.375-2.028 3.797-1.354 1.425 0.676 2.028 2.377 1.355 3.801-0.676 1.42-2.373 2.028-3.795 1.352zM37.327 50.869c-0.281 0.597-1.783 3.762-2.088 4.398-0.843 1.779-2.972 2.539-4.755 1.698-0.578-0.278-1.021-0.705-1.393-1.174-0.564-0.712-0.942-2.612-0.942-2.612-0.592 0.418-2.107 1.373-2.734 1.818-0.57 0.398-1.358 0.262-1.76-0.308-0.405-0.57-0.265-1.357 0.302-1.759 0.902-0.631 3.403-2.331 3.403-2.331 0.761-0.534 1.809-0.36 2.343 0.405l1.062 2.157 1.688-3.412-1.475-0.432c-0.324-0.093-0.591-0.316-0.749-0.615l-1.447-2.779c-0.314-0.602-0.081-1.345 0.523-1.658 0.6-0.316 1.343-0.079 1.658 0.52 0 0 0.87 1.673 1.205 2.318 0.795 0.233 4.028 1.173 4.028 1.173 0.175 0.055 0.322 0.154 0.455 0.269 0.768 0.489 1.074 1.479 0.675 2.323z")
​
      //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: 53.8},
                      {category: "Second", value: 70.6},
                      {category: "Middle", value: 81.0},
                      {category: "Fourth", value: 87.7},
                      {category: "Highest", value: 93.8}], "Across Wealth Quintile", "WQTL");
​
    plot.call(strip2, [{category: "Preschool", value: 73.2},
                      {category: "Primary", value: 80.4},
                      {category: "Middle", value: 86.7},
                      {category: "Matric", value: 91.9},
                      {category: "Higher", value: 96.2}], "Across Mother's education", "MOTH_EDUC");
​
    plot.call(strip3, [{category: "Rural", value: 73.6},
                       {category: "Urban", value: 84.9}], "Across Area", "AREA");
​
  })
​
​
​
​
</script>
</body>
</html>
​
    