Marker animation along SVG "path" element with D3.js Based on Mike's example: Point-Along-Path Interpolation.
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8"> | |
| <title></title> | |
| <script type='text/javascript' src="http://d3js.org/d3.v3.min.js"></script> | |
| <script type='text/javascript' src="infos.js"></script> | |
| <link rel="stylesheet" type="text/css" href="style.css"> | |
| </head> | |
| <body> |
Short link to this document http://bit.ly/Kh6TbW
Data for today's course is available from Nijel.org. Instead of downloading the data locally, we are just going to copy the URL to the public CSV of data, http://nijel.org/nysewage/ssoreports.csv. Select the URL http://nijel.org/nysewage/ssoreports.csv and copy to your clipboard.
There are a few options in CartoDB for adding data to your account.
- Drag and drop files to your dashboard (CSV, KML, SHP, etc.)
- Paste URLs into the import menu
This example uses custom map data that includes counties in the state of New York.
Custom map data is specified with geographyConfig.dataUrl, which will attempt to make d3.json request to that URL.
In this example, counties are referred to by their FIPs code.
The data was converted from a .SHP file to TopoJSON, instructions to do that here
This is a script that adds a fully functional Fork button to your own Gist.
If a Fork button is already present in the page, this bookmarklet will set focus to it instead of adding another one.
The change is temporary and the button will disappear as soon as you navigate away from that Gist (clicking the Fork button does this for you as well). Meaning you will have to run the script every new page load.
Copy the contents from bookmarklet.js, open Scracthpad (Ctrl+F4), paste it there. Back in browser, swwitch to tab with your Gist you want to fork. Back in Scratchpad, "Run" it. Save and/or bookmark the Scratchpad file for future use.
| /*global module:false*/ | |
| module.exports = function(grunt) { | |
| grunt.initConfig({ | |
| react: { | |
| jsx: { | |
| files: [ | |
| { | |
| expand: true, | |
| cwd: 'public/js', |
Re-implementation of this example combining React with D3 and TopoJSON. Map data from Swiss Maps.
| license: gpl-3.0 | |
| redirect: https://observablehq.com/@mbostock/time-zones |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <title>d3 geo map</title> | |
| <meta charset="utf-8"> | |
| <style> | |
| svg { | |
| border: 1px solid #ccc; | |
| } |
| license: gpl-3.0 | |
| redirect: https://observablehq.com/@d3/zoom-to-bounding-box |