I have an SVG map of the U.S., and I would like to make it so that when you click on a state, a new page loads with information about that state.
Here is my code that fills the states (the paths are already created); it's a choropleth so the color is based on murder rates.
d3.selectAll("path")
.attr("fill", function(d) {
return color(murderrates[codes.indexOf(this.id)])
})
.on("click", **load(new page, this.id)**)
The pseudo code between the asterisks is what I'd like to accomplish: when the state is clicked, open a new page and tell it which state was clicked so it knows what information to display. In other words, the new page should be able to "accept an argument" - the state - so it knows what to display.
Edit: I do not have a different page to load for each state. Instead, it is one page that could display 50 different things depending on which state caused it to load. So let's say I had a variable called origin
in my new page. I would like the value of origin
to be set to this.id
upon loading.