|
var mapWidth = 756, |
|
mapHeight = 496, |
|
focused = false; |
|
|
|
var projection = d3.geo.mercator() |
|
.center([37.620825, 55.750480]) |
|
.scale(29000) |
|
.translate([mapWidth / 1.75, mapHeight / 2]); |
|
|
|
var path = d3.geo.path() |
|
.projection(projection); |
|
|
|
var svgMap = d3.select("div#map").append("svg") |
|
.attr("overflow", "hidden") |
|
.attr("width", mapWidth) |
|
.attr("height", mapHeight); |
|
|
|
var zone_tooltip = d3.select("div#map").append("div").attr("class", "zoneTooltip"), |
|
point_label = d3.select("div#map").append("div").attr("class", "pointLabel"), |
|
info_label = d3.select("div#map").append("div").attr("class", "infoLabel"); |
|
|
|
var g = svgMap.append("g"); |
|
|
|
queue() |
|
.defer(d3.json, "mosZones.json") |
|
.defer(d3.csv, "mosWater.csv") |
|
.defer(d3.csv, "waterStations.csv") |
|
.await(ready); |
|
|
|
|
|
function ready(error, map, mdata, pdata) { |
|
var phById = {}, |
|
colorationById = {}, |
|
turbidityById = {}, |
|
chlorumById = {}, |
|
smell_20ById = {}, |
|
smell_60ById = {}, |
|
ferrumById = {}; |
|
|
|
mdata.forEach(function(d) { |
|
phById[d.id] = d.pH, |
|
colorationById[d.id] = d.coloration, |
|
turbidityById[d.id] = d.turbidity, |
|
chlorumById[d.id] = d.chlorum, |
|
smell_20ById[d.id] = d.smell_20, |
|
smell_60ById[d.id] = d.smell_60, |
|
ferrumById[d.id] = d.ferrum; |
|
}); |
|
|
|
// Drawing map |
|
g.selectAll("path.mapData") |
|
.data(topojson.feature(map, map.objects.mos).features) |
|
.enter().append("path") |
|
.attr("d", path) |
|
.attr("class", "mapData") |
|
|
|
.on("mouseover", function(d) { |
|
d3.select(this) |
|
var t = zone_tooltip.html("") |
|
.style("display", "block") |
|
.style("left", (d3.event.pageX + 10) + "px") |
|
.style("top", (d3.event.pageY - 15) + "px"); |
|
t.append("span").attr("class", "zoneLabel").text("Район: " + d.properties.name); |
|
}) |
|
.on("mouseout", function(d) { |
|
zone_tooltip.style("display", "none"); |
|
}) |
|
.on("click", focus) |
|
.on("mousemove", function(d) { |
|
zone_tooltip.style("left", (d3.event.pageX + 10) + "px") |
|
.style("top", (d3.event.pageY - 15) + "px"); |
|
}); |
|
|
|
// Adding water stations |
|
var station = g.selectAll("g.station") |
|
.data(pdata) |
|
.enter() |
|
.append("g") |
|
.attr("class", "station") |
|
.attr("transform", function(d) { return "translate(" + projection([d.lon, d.lat]) + ")"; }); |
|
|
|
station.append("image") |
|
.attr("xlink:href", "water_station-24.png") |
|
.attr("x", function(d) {return -24;}) |
|
.attr("width", 48) |
|
.attr("height", 24) |
|
|
|
.on("mouseover", function(d) { |
|
point_label.text(d.stationName) |
|
.style("left", (d3.event.pageX + 5) + "px") |
|
.style("top", (d3.event.pageY + 15) + "px") |
|
.style("display", "inline"); |
|
}) |
|
.on("mouseout", function() { |
|
point_label.style("display", "none"); |
|
}); |
|
|
|
//Adding data to panel |
|
function focus(d) { |
|
if (focused === d) return reset(); |
|
g.selectAll(".focused").classed("focused", false); |
|
d3.select(this).classed("focused", focused = d); |
|
|
|
var cells = d3.selectAll("td"); |
|
cells[0][0].innerHTML = phById[d.id]; |
|
cells[0][1].innerHTML = colorationById[d.id]; |
|
cells[0][2].innerHTML = turbidityById[d.id]; |
|
cells[0][3].innerHTML = chlorumById[d.id]; |
|
cells[0][4].innerHTML = smell_20ById[d.id]; |
|
cells[0][5].innerHTML = smell_60ById[d.id]; |
|
cells[0][6].innerHTML = ferrumById[d.id]; |
|
cells[0][7].innerHTML = "нет"; |
|
cells[0][8].innerHTML = "нет"; |
|
cells[0][9].innerHTML = "нет"; |
|
|
|
var zone = info_label.html("").style("display", "inline") |
|
zone.append("span").text("Округ: " + d.properties.okrug); |
|
zone.append("span").text("Район: " + d.properties.name); |
|
} |
|
|
|
function reset() { |
|
g.selectAll(".focused").classed("focused", focused = false); |
|
info_label.style("display", "none"); |
|
|
|
var cells = d3.selectAll("td"); |
|
cells[0].forEach(function(cell) { |
|
cell.innerHTML = "-"; |
|
}); |
|
} |
|
|
|
}; |
