Alan Garcia adg29

Re-implementation of this example combining React with D3 and TopoJSON. Map data from Swiss Maps.

Fork your own Gist

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.

Firefox

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.

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

More DataMaps examples here

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.

Importing data

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

Marker animation along SVG "path" element with D3.js Based on Mike's example: Point-Along-Path Interpolation.

	/global module:false/
	module.exports = function(grunt) {
	grunt.initConfig({

	react: {
	jsx: {
	files: [
	{
	expand: true,
	cwd: 'public/js',

	<!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>

	# db/migrate/XXXXXXXXXXXXX_add_authentication_token_to_users.rb

	class AddAuthenticationTokenToUsers < ActiveRecord::Migration
	def change
	add_column :users, :authentication_token, :string

	add_index :users, :authentication_token, :unique => true
	end
	end

	library('RCurl')
	library('RJSONIO')
	library('igraph')

	stations.url <- getURL('http://citibikenyc.com/stations/json')
	dist.url <- getURL('appservices.citibikenyc.com/data2/stations.php')

	# prep stations for kmeans clustering
	stations.prep <- function(url) {
	stations.json2 <- fromJSON(url, method='C')

	<!DOCTYPE html>
	<html>
	<meta charset="utf-8">
	<head>
	<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
	<script type="text/javascript" src="http://prcweb.co.uk/lab/circularheat/js/circularHeatChart.js"></script>
	<script type="text/javascript">
	var taxicabData = {"Charles Playhouse": [2226064, 3129361, 2439844, 177241, 147456, 284089, 498436, 1684804, 3147076, 3186225, 2660161, 2808976, 2650384, 2446096, 2505889, 2380849, 2643876, 2839225, 4276624, 4452100, 3621409, 3806401, 3104644, 1841449, 1708249, 1243225, 558009, 87616, 94249, 240100, 597529, 3154176, 5626384, 4583881, 3579664, 3717184, 3489424, 4536900, 4756761, 3845521, 3186225, 4618201, 6411024, 6416089, 5494336, 5764801, 6502500, 4639716, 4048144, 4787344, 3101121, 167281, 161604, 348100, 883600, 5062500, 7717284, 5466244, 3802500, 3759721, 4145296, 4524129, 4571044, 3912484, 4280761, 5098564, 7767369, 7612081, 6497401, 7214596, 6864400, 5058001, 5574321, 6295081, 3869089, 212521, 181476, 436921, 866761, 4431025, 6543364,