anilnairxyz/.block

## .block
height:700
license:mit

## README.md

      
    Raw
  

              README.md
            
          
    Mercator projection of Indian states with the state of Jammu and Kashmir conforming to official guidelines. The state map of India is from Natural Earth while the disputed areas of Jammu and Kashmir have been merged from other maps at the same site.

  
## index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="stateMap.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="stateMap.js"></script>
</body>
</html>

## ne_10m_admin_1_India_Official.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              ne_10m_admin_1_India_Official.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.
      
    
## stateMap.css
#map    { position: relative; min-height: 500px; }

.state path { stroke: #a9a9a9; stroke-width: 1px; }

.state:hover path { fill-opacity: .7; }

.label {
        fill: #3a003a;
        font-size: 12px;
        font-weight: 300;
        text-anchor: middle;
        pointer-events: none;
}

.label.IND-2427 { font-size: 0; }
.label.IND-2445 { font-size: 0; }
.label.IND-3262 { font-size: 0; }
.label.IND-3504 { font-size: 0; }

## stateMap.js
(function() {
    d3.queue()
      .defer(d3.json, "ne_10m_admin_1_India_Official.json")
      .await(function(error, topoMap) {
        if (error) throw error;
        var states = topojson.feature(topoMap, topoMap.objects.ne_10m_admin_1_India_Official);

        // Map render
        var map     = stateMap(states.features).width(800).height(700).scale(1200);
        d3.select("#map").call(map);
    });
}());

function stateMap(states) {

    var width  = 800, height = 700, scale = 1200;
    var color  = ["#dadaeb", "#bcbddc", "#9e9ac8", "#807dba", "#6a51a3"]

    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);

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

        var path = d3.geo.path().projection(projection);
        var selectState     = svg.selectAll("g").data(states).enter().append("g").attr("class", "state");

        selectState.append("path")
            .style("fill", function(d) { return color[Math.floor(Math.random() * 5)]; })
            .attr("d", path);

        svg.selectAll("text").data(states).enter().append("text")
            .attr("class", function(d) { return "label " + d.id; })
            .attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; })
            .attr("dy", ".35em")
            .text(function(d) { return d.properties.name; });
      });
    } // 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;
        	};

return render;
} // stateMap


## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="stateMap.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="stateMap.js"></script>
	</body>
	</html>
	#map { position: relative; min-height: 500px; }

	.state path { stroke: #a9a9a9; stroke-width: 1px; }

	.state:hover path { fill-opacity: .7; }

	.label {
	fill: #3a003a;
	font-size: 12px;
	font-weight: 300;
	text-anchor: middle;
	pointer-events: none;
	}

	.label.IND-2427 { font-size: 0; }
	.label.IND-2445 { font-size: 0; }
	.label.IND-3262 { font-size: 0; }
	.label.IND-3504 { font-size: 0; }
	(function() {
	d3.queue()
	.defer(d3.json, "ne_10m_admin_1_India_Official.json")
	.await(function(error, topoMap) {
	if (error) throw error;
	var states = topojson.feature(topoMap, topoMap.objects.ne_10m_admin_1_India_Official);

	// Map render
	var map = stateMap(states.features).width(800).height(700).scale(1200);
	d3.select("#map").call(map);
	});
	}());

	function stateMap(states) {

	var width = 800, height = 700, scale = 1200;
	var color = ["#dadaeb", "#bcbddc", "#9e9ac8", "#807dba", "#6a51a3"]

	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);

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

	var path = d3.geo.path().projection(projection);
	var selectState = svg.selectAll("g").data(states).enter().append("g").attr("class", "state");

	selectState.append("path")
	.style("fill", function(d) { return color[Math.floor(Math.random() * 5)]; })
	.attr("d", path);

	svg.selectAll("text").data(states).enter().append("text")
	.attr("class", function(d) { return "label " + d.id; })
	.attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; })
	.attr("dy", ".35em")
	.text(function(d) { return d.properties.name; });
	});
	} // 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;
	};

	return render;
	} // stateMap