Skip to content

Instantly share code, notes, and snippets.

@justinlevi
Last active November 7, 2022 22:23
Show Gist options
  • Save justinlevi/bb5b7c948177179ab65e971aeca4e59b to your computer and use it in GitHub Desktop.
Save justinlevi/bb5b7c948177179ab65e971aeca4e59b to your computer and use it in GitHub Desktop.
New York State D3 Counties Highlight & Hover
We can make this file beautiful and searchable if this error is corrected: No commas found in this CSV file in line 0.
county
St_Lawrence
Chemung
Ulster
Albany
<!DOCTYPE html>
<meta charset="utf-8">
<style>
@import url(styles.css);
</style>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/queue.v1.min.js"></script>
<body>
<div id="map_container">
<script>
var mw = 800; // map container width
var mh = 600; // map container height
var toolTipVisible = true;
var svg = d3.select("#map_container")
.append("svg")
.attr({"width": mw, "height": mh});
var data;
var ny;
// Define the div for the tooltip
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
queue()
.defer(d3.csv, "highlight.csv", data)
.await(ready);
function ready(error, data) {
if (error) throw error;
d3.xml("ny.svg", "image/svg+xml", function(error, xml) { /* embed the SVG map */
if (error) throw error;
var svgMap = xml.getElementsByTagName("g")[0]; /* set svgMap to root g */
ny = svg.node().appendChild(svgMap); /* ny map */
svg.selectAll("#counties").selectAll("polygon")
.on("click", handleClick)
.on("mouseover", handleMouseOver)
.on("mouseout", handleMouseOut);
svg.selectAll("#counties").selectAll("path")
.on("click", handleClick)
.on("mouseover", handleMouseOver)
.on("mouseout", handleMouseOut);
d3.map(data, function(d) {
console.log(d.county)
d3.select("#"+d.county).attr("class", "highlight");
});
});
}
function handleClick(d, i){
id = d3.select(this).attr('id');
}
function handleMouseOver(d){
if (d3.select(this).classed("active")) return;
/* no need to change class when county is already selected */
if (!d3.select(this).classed("highlight")){
d3.select(this).attr("class", "hover");
}
if(toolTipVisible){
div.transition()
.duration(200)
.style("opacity", .9);
div .html(d3.select(this).attr('id').replace("_", " "))
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 5) + "px");
}
}
function handleMouseOut(d){
if (d3.select(this).classed("active")) return;
if (!d3.select(this).classed("highlight")){
d3.select(this).attr("class", "st0");
}
div.transition()
.duration(200)
.style("opacity", 0);
div .html('')
.style("left", "0px")
.style("top", "0px");
}
</script>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
/* style.css */
polygon.st0, path.st0 {
fill: whitesmoke;
stroke: #333;
stroke-width: 1px;
transition: all 1s;
}
.active {
fill: steelblue;
}
.hover {
fill: #69c;
}
div.tooltip {
position: absolute;
text-align: center;
padding: 5px;
font: 12px sans-serif;
background: snow;
border: 0px;
pointer-events: none;
border: 1px solid #000;
}
.highlight {
fill: steelblue;
}
rect {
fill: none;
pointer-events: all;
}
.text {
stroke:#333;
text-anchor: middle;
font-family: "sans-serif";
stroke-width: 0.5;
fill: #333;
font-size: 10pt;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment