Skip to content

Instantly share code, notes, and snippets.

<canvas id="myProcessingProject"></canvas>
<script src="processing.min.js"></script>
@carysmills
carysmills / index.html
Last active November 18, 2017 02:13
ProcessingJS setup
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ProcessingJS</title>
</head>
<body>
<canvas id="myProcessingProject"></canvas>
@carysmills
carysmills / index.html
Last active August 15, 2017 01:11
APEC world map
<!DOCTYPE html>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<style>
#mapid {
width: 100%;
background: rgba(255,255,255,0.1);
padding: 10px;
@carysmills
carysmills / .block
Last active August 10, 2017 00:18
Canadian census division choropleth map
height: 600
border: no
@carysmills
carysmills / data.csv
Last active April 29, 2017 20:02 — forked from monkeycycle/data.csv
Single d3 line chart
date close
1-May-12 58.13
30-Apr-12 53.98
27-Apr-12 67.00
26-Apr-12 89.70
25-Apr-12 99.00
24-Apr-12 130.28
23-Apr-12 166.70
20-Apr-12 234.98
19-Apr-12 345.44
var cheeseData = {
labels : ["1995","1996","1997","1998","1999","2000", "2001", "2002", "2003","2004","2005","2006","2007","2008","2009","2010","2011","2012","2013","2014"],
datasets : [
{
label: "Unprocessed cheese consuption per capita",
fillColor: "#FFA62F",
strokeColor: "#800080",
pointColor: "#FFA62F",
pointStrokeColor: "#800080",
pointHighlightFill: "#fff",
<canvas id="cheese" width="600" height="400" ></canvas>
<script>
// create layer selector
function createSelector(layer) {
var sql = new cartodb.SQL({ user: 'carys' });
var $options = $('#layer_selector li');
$options.click(function(e) {
// get the value the selected layer
var $li = $(e.target);
var bci = $li.attr('data');
@carysmills
carysmills / selector.html
Last active September 19, 2015 23:29
Div selector
<div id="map"></div>
<div id="layer_selector" class="cartodb-infobox">
<ul>
<li data="all" class="selected">All bridges</li>
<li data="< 40">BCI less than 40</li>
<li data="< 60">BCI less than 60</li>
<li data="> 80">BCI greater than 60</li>
<li data="> 90">BCI greater than 90</li>
</ul>
</div>
<!DOCTYPE html>
<html>
<head>
<title>Layer selector example | CartoDB.js</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
<style>
html, body, #map {
height: 100%;