D3.js small multiple bar charts with tooltips. Follows Mike Bostocks's small multiples example. Tooltip code from here.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
WITH hgrid AS | |
(SELECT CDB_HexagonGrid(ST_Expand(CDB_XYZ_Extent(/* INSERT TILE XYZ SOMEHOW */), CDB_XYZ_Resolution(/* CURRENT ZOOM */) * 15), CDB_XYZ_Resolution(/* CURRENT ZOOM */) * 15) AS cell) | |
SELECT hgrid.cell AS the_geom_webmercator, | |
count(i.cartodb_id) AS points_count, | |
count(i.cartodb_id)/power(15 * CDB_XYZ_Resolution(/* CURRENT ZOOM */), 2) AS points_density, | |
1 AS cartodb_id | |
FROM hgrid, | |
(SELECT * | |
FROM /* TABLE NAME HERE */) i | |
WHERE ST_Intersects(i.the_geom_webmercator, hgrid.cell) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// gmaps js api v2 polygon overlays -> geojson | |
overlayToGeoJSON = function(o){ | |
var feature={type:'Feature', geometry:{ type:'Polygon', coordinates:[[]]}}; | |
for (var i=0; i < o.latlngs.length; i++){ | |
feature.geometry.coordinates[0].push([o.latlngs[i].lng + o.reflng, o.latlngs[i].lat + o.reflat]) | |
} | |
feature.properties = {hint:o.hint, html: o.infohtml} | |
return feature; | |
} | |
var results={type: "FeatureCollection", features: []}; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function getTileUrls(bounds, tileLayer, zoom) { | |
var min = map.project(bounds.getNorthWest(), zoom).divideBy(256).floor(), | |
max = map.project(bounds.getSouthEast(), zoom).divideBy(256).floor(), | |
urls = []; | |
for (var i = min.x; i <= max.x; i++) { | |
for (var j = min.y; j <= max.y; j++) { | |
var coords = new L.Point(i, j); | |
coords.z = zoom; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: gpl-3.0 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
-- Census tract population is column dp0010001 | |
WITH op AS | |
(SELECT the_geom, | |
cartodb_id, | |
dp0010001, | |
Row_number() OVER ( | |
ORDER BY Cdb_latlng(/* Starting latitude */, /* Starting longitude */) <-> the_geom) AS row_number | |
FROM /* Table name */ LIMIT /* Max census tracts queryable */), | |
sm AS |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: apache-2.0 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# Bulk convert shapefiles to geojson using ogr2ogr | |
# For more information, see http://ben.balter.com/2013/06/26/how-to-convert-shapefiles-to-geojson-for-use-on-github/ | |
# Note: Assumes you're in a folder with one or more zip files containing shape files | |
# and Outputs as geojson with the crs:84 SRS (for use on GitHub or elsewhere) | |
#geojson conversion | |
function shp2geojson() { | |
ogr2ogr -f GeoJSON -t_srs crs:84 "$1.geojson" "$1.shp" | |
} |
These commands are all run within the psql
command line tool.
Create table for tax year 2013 data
CREATE TABLE tx_2013 (
Acct_Num varchar(9),
Address text,
Unit text,
Homestd_Ex text,
Prop_Cat text,
I will assume that you are familiar with Javascript and HTML - read up on jsforcats.com if you need Javascript chops, and Learn HTML for HTML.
AJAX is a feature of Javascript and your browser that downloads new data after you initially request a page: so you live-update content and pull in new bits of content a user requests. AJAX is how the Pinterest home page keeps loading content when you scroll, and it's how Gmail can ring in new emails without requiring you to click 'refresh' all the time.
Let's clear things up. Like Javascript for Cats, it's best to use Google Chrome for this, and to use your web developer extensions.