This is a five part series, taking you through stages of designing and creating reusable visualizations with d3.js
All visualizations have the same functionality, showcase the individual points with a bar chart and sum up the selected bars.
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8" /> | |
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" /> | |
<script src="http://d3js.org/d3.v3.min.js" type="text/javascript"></script> | |
<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script> | |
<script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.4/mapbox.js'></script> | |
<link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.4/mapbox.css' rel='stylesheet' /> |
//Practically all this code comes from https://github.com/alangrafu/radar-chart-d3 | |
//I only made some additions and aesthetic adjustments to make the chart look better | |
//(of course, that is only my point of view) | |
//Such as a better placement of the titles at each line end, | |
//adding numbers that reflect what each circular level stands for | |
//Not placing the last level and slight differences in color | |
// | |
//For a bit of extra information check the blog about it: | |
//http://nbremer.blogspot.nl/2013/09/making-d3-radar-chart-look-bit-better.html |
# usage: `python ~/Desktop/contours.py 1994-654-12_v02.tif` | |
# output is to a squareless.txt file and the directory "out" | |
# Working well with thumbnails with 400px as their longest side - untested with other dimensions | |
# for i in $(ls -1 | grep tif); do python /Users/artsyinc/Documents/resistance/experiments/artwork_image_cropping/contours.py $i; done | |
import cv2 | |
import numpy as np | |
from matplotlib import pyplot as plt | |
import sys |
This is a five part series, taking you through stages of designing and creating reusable visualizations with d3.js
All visualizations have the same functionality, showcase the individual points with a bar chart and sum up the selected bars.
This demo several time scales. src
D3's time axis does magic things. I expected to modify the x axis such that I could mostly re-use D3's date formatting tricks, but exercise greater control over the resolution at different time scales.
This examples demonstrates how to use D3's brush component to implement focus + context zooming. Click and drag in the small chart below to pan or zoom.
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
<!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, |
<!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> |
// convert 0..255 R,G,B values to binary string | |
RGBToBin = function(r,g,b){ | |
var bin = r << 16 | g << 8 | b; | |
return (function(h){ | |
return new Array(25-h.length).join("0")+h | |
})(bin.toString(2)) | |
} | |
// convert 0..255 R,G,B values to a hexidecimal color string | |
RGBToHex = function(r,g,b){ |