Leaflet and the countries.json:
Note: Mike B says Leaflet can't display map files cut at the antimeridian:
That's why this map is messed up: https://github.com/mbostock/topojson/blob/master/examples/world-50m.json
One of the most famous animated graphs ever is Hans Rosling's Gapminder.
Tom Carden (RandomEtc) re-did it in javascript using canvas (not D3):
http://randometc.github.io/mind-gapper-js/
And then Mike Bostock did it too, in D3: Gapminder animation in d3: http://bost.ocks.org/mike/nations/
But his version has a hidden (IMO) brush for the years. Can you find it?
Example by Tom Carden: http://bl.ocks.org/RandomEtc/cff3610e7dd47bef2d01
Note that again, we set up the page, then load the data, and call a "replay" function that is a timer that calls the "draw" function with new data.
The draw function sets the domains based on current data set, transitions the axes, and does the data binding, exiting, entering, and updating, with transitions.
Timer example:
setInterval(function() {
redraw(); // call the function you created to update the chart
}, 1500); // this is the seconds delay before executing.The unrolling effect! This is all over in real news stories. So you need to know how to do it.
See the examples in animated_lines.html. You could use this in your own scrolly stories if you wanted to.
These examples illustrate how to "unroll" a line, how to highlight a segment of a line, and how to animate the highlight of a segment of a line.
See my example animated_map_path.html with a play/pause button added to it. (Thanks to Jim Vallandingham for fixing a bug in the timer code.)
Reference:
See animation_end.html for an example of chained transitions, where one starts after another, on the same "object".
Tom MacWright's control that I recommend (it has changed maintenance/ownership):
https://arankek.github.io/chroniton/example/index.html.
See my example use of it in africa_map_slider.html. It has options for configuring it to restart playing, etc.
More related items:
Because the D3 tooltip is HTML, you can attach and svg and update a chart in it, if you want.
See Eric's example: http://bl.ocks.org/suneric1/4c974350b1eb2f20a080cf2d08084d5a
Also my more complex example in africa_map_tooltips_graph.html.
The key point is to call an update function that transitions your data in the tooltip chart, on mouseover.
One way is to use multiple div tags, with different id's.
In this example, there is a nice function for drawing each data set, which means the variables for each graph are in the function scope, not global:
Ideally, you are using functions to protect your variable scope and encapsulate operations. This will make debugging easier.
Take a look at the code in the animated_lines.html file for some organization of different chart code into functions.
Overall, tips:
Let's do this:
https://pages.github.com/
After you do the stuff on the github site, in your local directory for the project,
>git pull
>git checkout gh-pagesYou will now be working only in the branch that is public for the website, gh-pages. Then if you want to commit and push from the command line, you can edit your files, and then do:
>git status [to see what files need adding, vs what have changed]
>git add [filename] -- for each file you want to add to the repo if it's not there yet
>git commit -am 'My note about what I did' [this commits everything you have added or edited and uses that note to say what you did]
>git push [push the changes to the repo so i can pull them :)]If you need to delete a file from the repo, delete it from your local folder using the command line:
>git rm [filename]
>git commit -am "deleted file [filename]"
>git pushOn the repo project page, reload/refresh the page. You should see all the files you added and edited there. If you have the index.html page showing your d3 work, it will update with the latest work when you look at
your your-username.github.io/project-name page.
You can work in a github GUI or some other way if you want. Just make sure you check your work is visible in the url view.
If you screw yourself up, this guide might help:
Homework 1 (10pt) Create your project site.
Send me the link to the repo. Make sure it has an index page. Put the CSVs for your data in the repo in a data directory. I will be pulling from your projects to debug and review from now on. Send me your link as "Repo link".
Homework 2 (25pt) Two Graphs on a Page!
Make two charts for your project, on the same page. Use functions to structure this, so the variables don't stomp on each other. I won't be judging the content of the vis yet, just structure and making sure they "work" on the same page.