justinlevi/highlight.csv

## highlight.csv
county
St_Lawrence
Chemung
Ulster
Albany

## index.html
<!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>

## ny.svg

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              ny.svg
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## styles.css
/* 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;
}
	<!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>
	/* 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;
	}