Using d3 with URL query strings

Question

I'd like to be able to provide URLs to access different views of visualizations that I've created. For example, some of the visualizations change for each year or for each variable. When the user changes the year or the variable depicted, I'd like to update the URL. For example, from

index.html?year=1790&variable=population

to

index.html?year=1820&variable=populationdensity

Then, when a visitor comes to one of those URLs, to initialize the visualization using the query string.

Perhaps I'll have to write this myself, but has anyone done something similar or have sample code for how to do this?

what technology are you uysing? is this going to be a SPA or a server side page, do you have JS router in place? if you are goign to just rely on JS you can always parse the query string and apply what ever parameters you have to the d3 script. — Dayan Moreno Leon
– Dayan Moreno Leon, Commented Jun 2, 2014 at 17:34
Just d3. I just want the users to be able to bookmark/link to more than the initial state of the visualization. — Lincoln Mullen
– Lincoln Mullen, Commented Jun 2, 2014 at 21:08

Dayan Moreno Leon · Accepted Answer · 2018-02-12 16:30:02Z

2

on your script you can do something like

var i=0;
var telem;
var search_values=location.search.replace('\?','').split('&');
var query={}
for(i=0;i<search_values.length;i++){
    telem=search_values[i].split('=');
    query[telem[0]]=telem[1];
}

console.log(query);

after this the query variable should hold all the key:values of your query string. this of should be contained inside a function to avoid polluting the global scope

edited Feb 12, 2018 at 16:30

answered Jun 2, 2014 at 23:56

Dayan Moreno Leon

5,4552 gold badges25 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

martin36 Over a year ago

I assume that var tele should be var telem

Collectives™ on Stack Overflow

Using d3 with URL query strings

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related