anilnairxyz/.about+license.md

## .about+license.md

      
    Raw
  

              .about+license.md
            
          
    Choropleth map of India
Copyright © 2016-20, Sandhya Pillai - MIT License

  
## .block
height:700
license:mit

## README.md

      
    Raw
  

              README.md
            
          
    Choropleth map showing districtwise male and female literacy. Based on similar maps by Mike Bostock. The district map of India is from DIVA GIS while the disputed areas of Jammu and Kashmir have been merged from Natural Earth. The district-wise literacy data is that of the 2011 Census.

  
## districtMap.js
function districtMap(districts, disputed) {

    var width  = 800, height = 700, scale = 1200;
    var propTag = 'Literacy', ttName = 'Literacy Rate', unit = '%';

    function render(selection) {
      selection.each(function() {

        d3.select(this).select("svg").remove();
        var svg = d3.select(this).append("svg")
                    .attr("width", width)
                    .attr("height", height);

        d3.select(this).select("#tooltip").remove();
        d3.select(this).append("div").attr("id", "tooltip").style("opacity", 0);

        var projection = d3.geo.mercator()
            .center([83, 23])
            .scale(scale)
            .translate([width / 2, height / 2]);

        var path = d3.geo.path().projection(projection);

        svg.selectAll(".district")
            .data(districts.features)
          .enter().append("path")
            .attr("class", "district")
            .style("fill", function(d) { return d.color; })
            .attr("d", path)
          .on("mouseover", function(d) {
                 d3.select("#tooltip").transition()
                    .duration(200)
                    .style("opacity", .9);
                 d3.select("#tooltip").html("<h3>"+(d.id)+"</h3><h4>("+(d.properties.NAME_1)+")</h4><table>"+
                          "<tr><td>"+ttName+"</td><td>"+(d.properties[propTag])+unit+"</td></tr>"+
                          "</table>")
                    .style("left", (d3.event.pageX-document.getElementById('map').offsetLeft + 20) + "px")
                    .style("top", (d3.event.pageY-document.getElementById('map').offsetTop - 60) + "px");
          })
          .on("mouseout", function(d) {
                 d3.select("#tooltip").transition()
                    .duration(500)
                    .style("opacity", 0);
          });

        svg.selectAll(".disputed")
            .data(disputed.features)
          .enter().append("path")
            .attr("class", "disputed")
            .style("fill", function(d) { return d.color; })
            .attr("d", path);

      });
    } // render
    render.height = function(value) {
            	if (!arguments.length) return height;
            	height = value;
            	return render;
        	};
    render.width = function(value) {
            	if (!arguments.length) return width;
            	width = value;
            	return render;
        	};
    render.scale = function(value) {
            	if (!arguments.length) return scale;
            	scale = value;
            	return render;
        	};
    render.propTag = function(value) {
            	if (!arguments.length) return propTag;
            	propTag = value;
            	return render;
        	};
    render.ttName = function(value) {
            	if (!arguments.length) return ttName;
            	ttName = value;
            	return render;
        	};
    render.unit = function(value) {
            	if (!arguments.length) return unit;
            	unit = value;
            	return render;
        	};

return render;
} // districtMap

## IND_adm2_Literacy.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              IND_adm2_Literacy.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="literacyMap.css">
</head>
<body>
    <div id="demobox">
        <div id="map">
            <div id="select"></div>
        </div>
    </div> <!-- demobox -->
    <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="//d3js.org/d3-queue.v3.min.js"></script>
    <script src="//d3js.org/topojson.v1.min.js"></script>
    <script src="districtMap.js"></script>
    <script src="literacyMap.js"></script>
</body>
</html>

## literacyMap.css
#map    { position: relative; min-height: 500px; }

.district, .disputed, .state rect, .state path { stroke: #a9a9a9; stroke-width: 1px; }

.district:hover { stroke: #777777; stroke-width: 1px; fill-opacity: .7; }
.state:hover rect { stroke: #777777; stroke-width: 2px; fill-opacity: .7; }
.state:hover path { fill-opacity: .7; }

#select {
	position:absolute;
	left: 500px;
	top: 100px;
        font: 12px sans-serif;
        color: #333;
}

#tooltip h3 {
        margin:2px;
        font-size:14px;
}
#tooltip h4 {
        margin:2px;
        font-size:10px;
}
#tooltip {
        position: absolute;
        background:rgba(0,0,0,0.8);
        text-align: left;
        border:1px;
        border-radius:5px;
        font: 12px sans-serif;
        width:auto;
        padding:4px;
        color:white;
        opacity:0;
        pointer-events: none;
}
#tooltip table{
        table-layout:fixed;
}
#tooltip tr td{
        padding:2px;
        margin:0;
}

## literacyMap.js
(function() {
    d3.queue()
        .defer(d3.json, "IND_adm2_Literacy.json")
        .defer(d3.json, "ne_10m_admin_0_Kashmir_Occupied.json")
        .await(function(error, topoMain, topoKashmir) {
            var districts, disputed;
            if (error) throw error;

            // Features for districts and disputed areas
            districts   = topojson.feature(topoMain, topoMain.objects.IND_adm2);
            disputed    = topojson.feature(topoKashmir, topoKashmir.objects.ne_10m_admin_0_Kashmir_Occupied);

            // Radio HTML
            d3.select("#select").call(selectFilter());
            var filter  = d3.select('#select input[name="gender"]:checked').node().value;

            // Color codes for districts based on Literacy Rates
            colorCode(districts.features, filter);
            colorDisputed(disputed.features);

            // Map render
            var map     = districtMap(districts, disputed).width(800).height(700).scale(1200).propTag(filter);
            d3.select("#map").call(map);

            // On change of selection re-render
            d3.selectAll("#select input[name=gender]").on("change", function() {
                filter  = d3.select('#select input[name="gender"]:checked').node().value;
                colorCode(districts.features, filter);
                map     = districtMap(districts, disputed).width(800).height(700).scale(1200).propTag(filter);
                d3.select("#map").call(map);
            });
        });
}());

function selectFilter() {
    function render(selection) {
      selection.each(function() {
        d3.select(this).html("<form>"+
                             "<input type='radio' name='gender' value='Literacy' checked> ALL<br>"+
                             "<input type='radio' name='gender' value='FemaleLiteracy'> FEMALE<br>"+
                             "<input type='radio' name='gender' value='MaleLiteracy'> MALE"+
                             "</form>");
      });
    } // render
return render;
} // selectFilter

function colorCode(data, filter) {
    var color = d3.scale.threshold()
                  .domain([65, 72, 78, 85])
                  .range(["#dadaeb", "#bcbddc", "#9e9ac8", "#807dba", "#6a51a3"]);
    data.forEach(function(d) {
        if (isNaN(d.properties[filter])) { d.properties[filter] = 77; }
        d.color       = color(d.properties[filter]);
    });
}

function colorDisputed(data) {
    var color         = "#eaeafa";
    data.forEach(function(d) {
        d.color       = color;
    });
}

## ne_10m_admin_0_Kashmir_Occupied.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              ne_10m_admin_0_Kashmir_Occupied.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## thumbnail.png

      
    Raw
  

              thumbnail.png
	function districtMap(districts, disputed) {

	var width = 800, height = 700, scale = 1200;
	var propTag = 'Literacy', ttName = 'Literacy Rate', unit = '%';

	function render(selection) {
	selection.each(function() {

	d3.select(this).select("svg").remove();
	var svg = d3.select(this).append("svg")
	.attr("width", width)
	.attr("height", height);

	d3.select(this).select("#tooltip").remove();
	d3.select(this).append("div").attr("id", "tooltip").style("opacity", 0);

	var projection = d3.geo.mercator()
	.center([83, 23])
	.scale(scale)
	.translate([width / 2, height / 2]);

	var path = d3.geo.path().projection(projection);

	svg.selectAll(".district")
	.data(districts.features)
	.enter().append("path")
	.attr("class", "district")
	.style("fill", function(d) { return d.color; })
	.attr("d", path)
	.on("mouseover", function(d) {
	d3.select("#tooltip").transition()
	.duration(200)
	.style("opacity", .9);
	d3.select("#tooltip").html("<h3>"+(d.id)+"</h3><h4>("+(d.properties.NAME_1)+")</h4><table>"+
	"<tr><td>"+ttName+"</td><td>"+(d.properties[propTag])+unit+"</td></tr>"+
	"</table>")
	.style("left", (d3.event.pageX-document.getElementById('map').offsetLeft + 20) + "px")
	.style("top", (d3.event.pageY-document.getElementById('map').offsetTop - 60) + "px");
	})
	.on("mouseout", function(d) {
	d3.select("#tooltip").transition()
	.duration(500)
	.style("opacity", 0);
	});

	svg.selectAll(".disputed")
	.data(disputed.features)
	.enter().append("path")
	.attr("class", "disputed")
	.style("fill", function(d) { return d.color; })
	.attr("d", path);

	});
	} // render
	render.height = function(value) {
	if (!arguments.length) return height;
	height = value;
	return render;
	};
	render.width = function(value) {
	if (!arguments.length) return width;
	width = value;
	return render;
	};
	render.scale = function(value) {
	if (!arguments.length) return scale;
	scale = value;
	return render;
	};
	render.propTag = function(value) {
	if (!arguments.length) return propTag;
	propTag = value;
	return render;
	};
	render.ttName = function(value) {
	if (!arguments.length) return ttName;
	ttName = value;
	return render;
	};
	render.unit = function(value) {
	if (!arguments.length) return unit;
	unit = value;
	return render;
	};

	return render;
	} // districtMap
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="literacyMap.css">
	</head>
	<body>
	<div id="demobox">
	<div id="map">
	<div id="select"></div>
	</div>
	</div> <!-- demobox -->
	<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script src="//d3js.org/d3-queue.v3.min.js"></script>
	<script src="//d3js.org/topojson.v1.min.js"></script>
	<script src="districtMap.js"></script>
	<script src="literacyMap.js"></script>
	</body>
	</html>
	#map { position: relative; min-height: 500px; }

	.district, .disputed, .state rect, .state path { stroke: #a9a9a9; stroke-width: 1px; }

	.district:hover { stroke: #777777; stroke-width: 1px; fill-opacity: .7; }
	.state:hover rect { stroke: #777777; stroke-width: 2px; fill-opacity: .7; }
	.state:hover path { fill-opacity: .7; }

	#select {
	position:absolute;
	left: 500px;
	top: 100px;
	font: 12px sans-serif;
	color: #333;
	}

	#tooltip h3 {
	margin:2px;
	font-size:14px;
	}
	#tooltip h4 {
	margin:2px;
	font-size:10px;
	}
	#tooltip {
	position: absolute;
	background:rgba(0,0,0,0.8);
	text-align: left;
	border:1px;
	border-radius:5px;
	font: 12px sans-serif;
	width:auto;
	padding:4px;
	color:white;
	opacity:0;
	pointer-events: none;
	}
	#tooltip table{
	table-layout:fixed;
	}
	#tooltip tr td{
	padding:2px;
	margin:0;
	}
	(function() {
	d3.queue()
	.defer(d3.json, "IND_adm2_Literacy.json")
	.defer(d3.json, "ne_10m_admin_0_Kashmir_Occupied.json")
	.await(function(error, topoMain, topoKashmir) {
	var districts, disputed;
	if (error) throw error;

	// Features for districts and disputed areas
	districts = topojson.feature(topoMain, topoMain.objects.IND_adm2);
	disputed = topojson.feature(topoKashmir, topoKashmir.objects.ne_10m_admin_0_Kashmir_Occupied);

	// Radio HTML
	d3.select("#select").call(selectFilter());
	var filter = d3.select('#select input[name="gender"]:checked').node().value;

	// Color codes for districts based on Literacy Rates
	colorCode(districts.features, filter);
	colorDisputed(disputed.features);

	// Map render
	var map = districtMap(districts, disputed).width(800).height(700).scale(1200).propTag(filter);
	d3.select("#map").call(map);

	// On change of selection re-render
	d3.selectAll("#select input[name=gender]").on("change", function() {
	filter = d3.select('#select input[name="gender"]:checked').node().value;
	colorCode(districts.features, filter);
	map = districtMap(districts, disputed).width(800).height(700).scale(1200).propTag(filter);
	d3.select("#map").call(map);
	});
	});
	}());

	function selectFilter() {
	function render(selection) {
	selection.each(function() {
	d3.select(this).html("<form>"+
	"<input type='radio' name='gender' value='Literacy' checked> ALL<br>"+
	"<input type='radio' name='gender' value='FemaleLiteracy'> FEMALE<br>"+
	"<input type='radio' name='gender' value='MaleLiteracy'> MALE"+
	"</form>");
	});
	} // render
	return render;
	} // selectFilter

	function colorCode(data, filter) {
	var color = d3.scale.threshold()
	.domain([65, 72, 78, 85])
	.range(["#dadaeb", "#bcbddc", "#9e9ac8", "#807dba", "#6a51a3"]);
	data.forEach(function(d) {
	if (isNaN(d.properties[filter])) { d.properties[filter] = 77; }
	d.color = color(d.properties[filter]);
	});
	}

	function colorDisputed(data) {
	var color = "#eaeafa";
	data.forEach(function(d) {
	d.color = color;
	});
	}