Highlighting data on a map after hoovering on a legend - d3.js

Question

D3 newbie here.I am trying to target path elements on a map. When I hover on the legend's I want the corresponding data on the map be highlighted.
Like this.
https://vida.io/documents/jspBB83bm6EvEYE3n
This is what I have so far
http://bricbracs.com/map/
I have managed to target cells in the legend on mouseover. Here is the relevant code from the legend.js code.
.on("mouseover", function(d,i) {
var chosen = d.color;
console.log(chosen)
d3.select(this).style("fill", "blue");
})
Here is the relevant code from the script.
d3.csv("expenses.csv", function(data) {
data = data.filter(function(d) { return d.year == 2014 });
data.forEach(function(d) {
d.value = +d.value;
});
color.domain([
d3.min(data, function(d) { return d.value; }),
d3.max(data, function(d) { return d.value })
]);
d3.json("us-states.json", function(json) {
for (var i = 0; i < data.length; i++) {
var dataState = data[i].state;
var dataValue = parseFloat(data[i].value);
for (j = 0; j < json.features.length; j++) {
jsonState = json.features[j].properties.name;
if (dataState == jsonState) {
json.features[j].properties.value = dataValue;
break;
}
}
}
svg.selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr("d", path)
.style("stroke","#ccc")
.style("fill", function(d) {
value = d.properties.value;
if (value) {
return color(d.properties.value)
} else {
return "#000"
}
})
});
What's the best way of achieving this. Thanks in advance.