connect javascript with html (a href)

Question

I'm visualizing data with d3 javascript. I want to show in a geomap where I have been and when I was there. For that I have a timeline of one year. When I was in "Berlin" on March the timeline shows "March" and Berlin is highlighted on the map.

Now I want to connect this visualization with a blog entry.

For example I want to say: I was in "Berlin". When I click on "Berlin", I want to be send to the visualization via Berlin. In the map I want the timeline to be on "March" and "Berlin" to be highlighted. Is this possible?

Is it possible to give parameters to the html-code, to be used in the javascript-section?

Answer 1

You can use many attributes as a means to hold dynamic data in html elements. Example html:

<div id="berlin" class="city-wrapper" blog-link="march">BERLIN CONTENT</div>

And javascript:

var city = document.getElementById("berlin");
city.addEventListener("click", function(){
    var blogLink = this.getAttributeNode("blog-link").value;
    updateTimeline(blogLink); //Function to update the timeline according to element id
});