Creating a Chronological Slider

I’ve written here and here about creating co-citation networks in D3 from Web of Science data. My first experiment, described above, was creating a threshold slider. I next wanted to try to create a chronological slider that would allow you to adjust the dates of the citations in the network.

There are doubtless many ways of going about doing this, and I’m reasonably sure that the method I’m going to describe is far from ideal. It works, however, and I don’t think it’s terribly cumbersome.

I’m going to assume that you’ve downloaded and concatenated the files you’re interested in, as described in the earlier posts, from Web of Science. You should then have one file that contains all of the citation data from 1973-present. The problem now is to split it into decades (or whatever units you want).

I wrote the following perl program to handle this task:

#read a list of text citations from World of
Science and split them into year ranges

    %range = qw (1 1973-1982, 2 1983-1992, 3 1993-2002, 4 2003-2013);
    $/="\n\n"; #change record separator to a blank line

    while (<>) {
      $record = $_;
      if ($record =~ m/PY (\d{4})/) {

      foreach $key (keys %range) {
        $date_range = $range{$key};
        @ys = split("-",$date_range);
        #print "Year $ys[0] + Year $ys[1]\n";
        if ($year >= $ys[0] && $year <= $ys[1]) {

    foreach $key (keys %record_hash) {

      $filename= "yourcitations-".$key."\.txt";
      print "Filename: $filename\n";
      open (OUT, ">", $filename);
      print OUT $record_hash{$key};
      close (OUT);

This code, as you can see, is called by ‘perl yourcitations.txt’. It will then produce yourcitations-1.txt, etc. The next step is to run the shell wrapper I described in this post on the first file and modify the mv line in there to add “-n”, where n is the number of the first chronological split. (It occurs to me that it be easy to automate this step with a shell wrapper that calls a shell wrapper, but I don’t want to get into all of that right now).

After repeating those steps as necessary, you will now have a netweb directory full of yourcitations-10-1.json, yourcitations-10-2.json, etc., files. We next need to modify the “cites-slider.html” file to add the new slider. Insert the following code in it:

<form onsubmit="return false" oninput="years.value = id2.valueAsNumber">
<label for "id2">Decades</label>
<input type="range" min="1" max="4" value="1" step="1" id="id2">
<output for "id2" name="years">
/4 (Decades 1973-1982, 1983-1992, 1993-2002, 2003-2013)

You would change the descriptive text accordingly. Now all we need to do is change the “cites-slider.js” file. Find the line that reads:

var file="cites-"+document.getElementById('id1').value+".json"

And change it to:

var file="cites-"+document.getElementById('id1').value+"-"+document.getElementById('id2').value+".json"

And that should do it. In addition to automating the shell script process to eliminate that hand-editing, I should also allow for even divisions of time. Most of the Web of Science data is sparse in the earlier years (it does not go back farther than 1973 in any journal I’ve seen), so an even decade split is probably not the best idea. It would be relatively easy to count and divide up evenly the citations based on a user-supplied input, but I didn’t have the time to deal with it.

The cultural anthropology co-citation graph for which I created the chronological slider is here. Others that I’ve created (without chronological sliders, or even threshold sliders in some cases) include:

All of these will run best on Chrome. The philosophy of science and complete cultural anthropology graphs tax my system in particular.