vsapsai/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Demonstrate how you can highlight a specific region.  Note: regions' names are in Ukrainian.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

svg {
    background-color: rgb(191, 216, 242);
}

.country {
    fill: #eee;
}

.country.UKR {
    fill: #fff;
}

.country-boundary {
    fill: none;
    stroke: #aaa;
}

.region {
    fill: none;
}

.region.selected {
    fill: rgba(252, 248, 227, 0.8);
}

.region-boundary {
    fill: none;
    stroke: #777;
    stroke-dasharray: 2,2;
    stroke-linejoin: round;
}

.region-boundary.selected {
    stroke-dasharray: none;
}

.coastline, .river, .lake {
    stroke: rgb(83, 168, 231);
}

.coastline, .river {
    fill: none;
}

.lake {
    fill: rgb(191, 216, 242);
}

.regions-list {
    padding-left: 1em;
    column-width: 14em;
    -webkit-column-width: 14em;
    -moz-column-width: 14em;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script>

var width = 900,
    height = 600;

var geometry_center =  {"latitude": 48.360833, "longitude": 31.1809725};
var geography_center = {"latitude": 49.0275, "longitude": 31.482778};

var svg = d3.select("body").append("center").append("svg")
    .attr("width", width)
    .attr("height", height);

var projection = d3.geo.conicEqualArea()
    .center([0, geometry_center.latitude])
    .rotate([-geometry_center.longitude, 0])
    .parallels([46, 52])  // vsapsai: selected these parallels myself, most likely they are wrong.
    .scale(4000)
    .translate([width / 2, height / 2]);
var path = d3.geo.path()
    .projection(projection);

var topo_data = null;

d3.json("/vsapsai/raw/8888013/ukraine.json", function(error, ukraine_data) {
    topo_data = ukraine_data;

    var countries = topojson.feature(ukraine_data, ukraine_data.objects.countries);
    svg.selectAll(".country")
        .data(countries.features)
      .enter().append("path")
        .attr("class", function(d) { return "country " + d.id; })
        .attr("d", path);

    svg.append("path")
        .datum(topojson.mesh(ukraine_data, ukraine_data.objects.countries, function(a, b) { return a !== b; }))
        .attr("class", "country-boundary")
        .attr("d", path);
    svg.append("path")
        .datum(topojson.mesh(ukraine_data, ukraine_data.objects.countries, function(a, b) { return a === b; }))
        .attr("class", "coastline")
        .attr("d", path);

    var water_group = svg.append("g")
        .attr("id", "water-resources");

    var rivers = topojson.feature(ukraine_data, ukraine_data.objects.rivers);
    water_group.selectAll(".river")
        .data(rivers.features)
      .enter().append("path")
        .attr("class", "river")
        .attr("name", function(d) { return d.properties.name; })
        .attr("d", path);

    // Add lakes after rivers so that river lines connect reservoirs, not cross them.
    var lakes = topojson.feature(ukraine_data, ukraine_data.objects.lakes);
    water_group.selectAll(".lake")
        .data(lakes.features)
      .enter().append("path")
        .attr("class", "lake")  // Note: not necessary a lake, it can be a reservoir.
        .attr("name", function(d) { return d.properties.name; })
        .attr("d", path);

    var regions = topojson.feature(ukraine_data, ukraine_data.objects.regions);
    svg.selectAll(".region")
        .data(regions.features)
      .enter().append("path")
        .classed("region", true)
        .attr("id", function(d) { return d.id; })
        .attr("d", path);
    svg.append("path")
        .datum(topojson.mesh(ukraine_data, ukraine_data.objects.regions, function(a, b) { return a !== b; }))
        .classed("region-boundary", true)
        .attr("d", path);

    d3.select("body").append("ul")
        .classed("regions-list", true)
        .selectAll("a")
        .data(regions.features.sort(function(a, b) {
            return a.properties.localized_name.ua.localeCompare(b.properties.localized_name.ua); }))
      .enter().append("li").append("a")
        .text(function(d) { return d.properties.localized_name.ua; })
        .attr("href", "javascript:void(0)")
        .on("click", function(d) {
            highlightRegion(d.id);
            d3.event.stopPropagation();
        });
    window.addEventListener("click", clearRegionHighlight);
});

function clearRegionHighlight() {
    svg.select(".region.selected")
        .classed("selected", false);
    svg.select(".region-boundary.selected")
        .remove();
}

function highlightRegion(regionId) {
    clearRegionHighlight();
    svg.select("#" + regionId)
        .classed("selected", true);
    svg.append("path")
        .datum(topojson.mesh(topo_data, topo_data.objects.regions, function(a, b) {
            return (a.id === regionId) || (b.id == regionId); }))
        .classed({"region-boundary": true, "selected": true})
        .attr("d", path);
}

d3.select(self.frameElement)
    .style("width", width + "px")
    .style("height", "800px");

</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	svg {
	background-color: rgb(191, 216, 242);
	}

	.country {
	fill: #eee;
	}

	.country.UKR {
	fill: #fff;
	}

	.country-boundary {
	fill: none;
	stroke: #aaa;
	}

	.region {
	fill: none;
	}

	.region.selected {
	fill: rgba(252, 248, 227, 0.8);
	}

	.region-boundary {
	fill: none;
	stroke: #777;
	stroke-dasharray: 2,2;
	stroke-linejoin: round;
	}

	.region-boundary.selected {
	stroke-dasharray: none;
	}

	.coastline, .river, .lake {
	stroke: rgb(83, 168, 231);
	}

	.coastline, .river {
	fill: none;
	}

	.lake {
	fill: rgb(191, 216, 242);
	}

	.regions-list {
	padding-left: 1em;
	column-width: 14em;
	-webkit-column-width: 14em;
	-moz-column-width: 14em;
	}

	</style>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/topojson.v1.min.js"></script>
	<script>

	var width = 900,
	height = 600;

	var geometry_center = {"latitude": 48.360833, "longitude": 31.1809725};
	var geography_center = {"latitude": 49.0275, "longitude": 31.482778};

	var svg = d3.select("body").append("center").append("svg")
	.attr("width", width)
	.attr("height", height);

	var projection = d3.geo.conicEqualArea()
	.center([0, geometry_center.latitude])
	.rotate([-geometry_center.longitude, 0])
	.parallels([46, 52]) // vsapsai: selected these parallels myself, most likely they are wrong.
	.scale(4000)
	.translate([width / 2, height / 2]);
	var path = d3.geo.path()
	.projection(projection);

	var topo_data = null;

	d3.json("/vsapsai/raw/8888013/ukraine.json", function(error, ukraine_data) {
	topo_data = ukraine_data;

	var countries = topojson.feature(ukraine_data, ukraine_data.objects.countries);
	svg.selectAll(".country")
	.data(countries.features)
	.enter().append("path")
	.attr("class", function(d) { return "country " + d.id; })
	.attr("d", path);

	svg.append("path")
	.datum(topojson.mesh(ukraine_data, ukraine_data.objects.countries, function(a, b) { return a !== b; }))
	.attr("class", "country-boundary")
	.attr("d", path);
	svg.append("path")
	.datum(topojson.mesh(ukraine_data, ukraine_data.objects.countries, function(a, b) { return a === b; }))
	.attr("class", "coastline")
	.attr("d", path);

	var water_group = svg.append("g")
	.attr("id", "water-resources");

	var rivers = topojson.feature(ukraine_data, ukraine_data.objects.rivers);
	water_group.selectAll(".river")
	.data(rivers.features)
	.enter().append("path")
	.attr("class", "river")
	.attr("name", function(d) { return d.properties.name; })
	.attr("d", path);

	// Add lakes after rivers so that river lines connect reservoirs, not cross them.
	var lakes = topojson.feature(ukraine_data, ukraine_data.objects.lakes);
	water_group.selectAll(".lake")
	.data(lakes.features)
	.enter().append("path")
	.attr("class", "lake") // Note: not necessary a lake, it can be a reservoir.
	.attr("name", function(d) { return d.properties.name; })
	.attr("d", path);

	var regions = topojson.feature(ukraine_data, ukraine_data.objects.regions);
	svg.selectAll(".region")
	.data(regions.features)
	.enter().append("path")
	.classed("region", true)
	.attr("id", function(d) { return d.id; })
	.attr("d", path);
	svg.append("path")
	.datum(topojson.mesh(ukraine_data, ukraine_data.objects.regions, function(a, b) { return a !== b; }))
	.classed("region-boundary", true)
	.attr("d", path);

	d3.select("body").append("ul")
	.classed("regions-list", true)
	.selectAll("a")
	.data(regions.features.sort(function(a, b) {
	return a.properties.localized_name.ua.localeCompare(b.properties.localized_name.ua); }))
	.enter().append("li").append("a")
	.text(function(d) { return d.properties.localized_name.ua; })
	.attr("href", "javascript:void(0)")
	.on("click", function(d) {
	highlightRegion(d.id);
	d3.event.stopPropagation();
	});
	window.addEventListener("click", clearRegionHighlight);
	});

	function clearRegionHighlight() {
	svg.select(".region.selected")
	.classed("selected", false);
	svg.select(".region-boundary.selected")
	.remove();
	}

	function highlightRegion(regionId) {
	clearRegionHighlight();
	svg.select("#" + regionId)
	.classed("selected", true);
	svg.append("path")
	.datum(topojson.mesh(topo_data, topo_data.objects.regions, function(a, b) {
	return (a.id === regionId) \|\| (b.id == regionId); }))
	.classed({"region-boundary": true, "selected": true})
	.attr("d", path);
	}

	d3.select(self.frameElement)
	.style("width", width + "px")
	.style("height", "800px");

	</script>