Built with blockbuilder.org
xxxxxxxxxx
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
.page-header {
color: #fff;
text-align: center;
background-color: #159957;
background-image: linear-gradient(33deg, #ff3300, #003300);
}
body {
margin:0;position:fixed;top:0;right:0;bottom:0;left:0;
}
path.land {
fill: #000000;
stroke: none;
}
path.neighborhood {
fill: none;
stroke: white;
stroke-width: 1.5px;
pointer-events: none;
}
.active {
stroke: goldenrod !important;
stroke-width: 2.5px !important;
}
.project-name {
font-size: 55px;
}
</style>
</head>
<body>
<section class="page-header">
<h1 class="project-name">311 Tree Maintenance</h1>
<h2 class="project-tagline">Hume Dickie</h2>
</section>
<svg height = "500" width = "960" id = "map"> </svg>
<script>
var svg = d3.select("#map"),
margin = {top: 40, right: 80, bottom: 20, left: 60},
width = svg.attr("width") - margin.left - margin.right,
height = svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var basemap = "districts.geojson";
var trees = "tree_data.csv";
var projection = d3.geoConicEqualArea();
var path = d3.geoPath().projection(projection);
projection.parallels([37.692514, 37.840699]);
projection.rotate([122, 0]);
//Node color legend
var cl_xo = 675, cl_yo = 300;
g.append("rect")
.attr("x",cl_xo)
.attr("y",cl_yo + 22)
.attr("width",20)
.attr("height",20)
.style("fill","green")
.style("stroke","black");
g.append("rect")
.attr("x",cl_xo)
.attr("y",cl_yo)
.attr("width",20)
.attr("height",20)
.style("fill","red")
.style("stroke","black");
g.append("text")
.attr("x",cl_xo + 25)
.attr("y",cl_yo + 15)
.text("Open");
g.append("text")
.attr("x",cl_xo + 25)
.attr("y",cl_yo + 40)
.text("Closed");
d3.json(basemap,function(error, data){
if (error) throw error;
projection.fitSize([960, 450], data);
d3.csv(trees,function(D){
var symbols = g.selectAll("circle")
.data(D)
.enter()
.append("circle")
.attr("cx", function(d,i) {
return projection([getLat(D[i].Point), getLon(D[i].Point)])[0]; })
.attr("cy", function(d,i) {
return projection([getLat(D[i].Point), getLon(D[i].Point)])[1]; })
.attr("r", 1.4)
.style("fill",function(d,i){
if (D[i].Status == "Closed") return "green";
else return "red";
})
.attr("class", "symbol");
var details = g.append("foreignObject")
.attr("id", "details")
.attr("width", 960)
.attr("height", 600)
.attr("x", 0)
.attr("y", 0);
var body = details.append("xhtml:body")
.style("text-align", "left")
.style("background", "none")
.html("<p>N/A</p>");
details.style("visibility", "hidden");
symbols.on("mouseover", function(d) {
d3.select(this).raise();
d3.select(this).classed("active", true);
console.log(d);
body.html("<table border=0 cellspacing=0 cellpadding=2>" + "\n" +
"<tr><th>Responsible Agency:</th><td>" + d.ResponsibleAgency + "</td></tr>" + "\n" +
"<tr><th>Address:</th><td>" + d.Address + "</td></tr>" + "\n" +
"<tr><th>Request Details:</th><td>" + d.RequestDetails + "</td></tr>" + "\n" +
"</table>");
details.style("visibility", "visible");
});
symbols.on("mouseout", function(d) {
d3.select(this).classed("active", false);
details.style("visibility", "hidden");
});
})
var land = g.selectAll("path.land")
.data(data.features)
.enter()
.append("path")
.attr("d", path)
.attr("class", "land");
g.selectAll("path.outline")
.data(data.features)
.enter()
.append("path")
.attr("d", path)
.attr("class", "neighborhood")
.each(function(d) {
// save selection in data for interactivity
d.properties.outline = this;
})
land.on("mouseover",function(d){
d3.select(d.properties.outline).raise();
d3.select(d.properties.outline).classed("active", true);
}).on("mouseout",function(d){
d3.select(d.properties.outline).classed("active", false);
});
});
function getLon(coords){
coords = coords.split(" ")[0];
coords = coords.substring(1,coords.length-1);
return(+coords);
}
function getLat(coords){
coords = coords.split(" ")[1];
coords = coords.substring(0,coords.length-1);
return(+coords);
}
</script>
</body>
https://d3js.org/d3.v4.min.js