Skip to content

Instantly share code, notes, and snippets.

Lars Grammel lgrammel

View GitHub Profile
View index.html
<!DOCTYPE html>
<html>
<head>
<title>D3.xml Example</title>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.v2.js"></script>
<style type="text/css">
.chart div {
font: 10px sans-serif;
background-color: steelblue;
text-align: right;
@lgrammel
lgrammel / index.html
Created Mar 30, 2012
Cruise of the Ladybug (Map)
View index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Cruise of the Ladybug</title>
<script type="text/javascript" src="https://raw.github.com/simplegeo/polymaps/v2.5.0/polymaps.min.js"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js" ></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js" ></script>
<script type="text/javascript" src="jquery.qtip.min.js" ></script>
@lgrammel
lgrammel / earthquakes.coffee
Created Mar 26, 2012
USGS Earthquakes of last 7 days rendered with d3 / polymaps / Stamen toner tiles / coffeescript
View earthquakes.coffee
resolve = (value,path) ->
for element in path.split(".")
value = value[element]
value
# Code based on Polymaps example from Mike Bostock http://bl.ocks.org/899670
po = org.polymaps
map = po.map().container(d3.select("#map").append("svg:svg").node())
.zoom(2)
.center({lat: 40, lon: 0})
@lgrammel
lgrammel / coffee-script.js
Created Mar 18, 2012
D3 Earthquakes Map Example (using Google spreadsheet)
View coffee-script.js
/**
* CoffeeScript Compiler v1.2.0
* http://coffeescript.org
*
* Copyright 2011, Jeremy Ashkenas
* Released under the MIT License
*/
(function(root){var CoffeeScript=function(){function require(a){return require[a]}require["./helpers"]=new function(){var a=this;(function(){var b,c;a.starts=function(a,b,c){return b===a.substr(c,b.length)},a.ends=function(a,b,c){var d;d=b.length;return b===a.substr(a.length-d-(c||0),d)},a.compact=function(a){var b,c,d,e;e=[];for(c=0,d=a.length;c<d;c++)b=a[c],b&&e.push(b);return e},a.count=function(a,b){var c,d;c=d=0;if(!b.length)return 1/0;while(d=1+a.indexOf(b,d))c++;return c},a.merge=function(a,c){return b(b({},a),c)},b=a.extend=function(a,b){var c,d;for(c in b)d=b[c],a[c]=d;return a},a.flatten=c=function(a){var b,d,e,f;d=[];for(e=0,f=a.length;e<f;e++)b=a[e],b instanceof Array?d=d.concat(c(b)):d.push(b);return d},a.del=function(a,b){var c;c=a[b],delete a[b];return c},a.last=function(a,b){return a[a.length-(b||0)-1]}}).call(this)},require["./rewriter"]=new function(){var
@lgrammel
lgrammel / index.html
Created Mar 3, 2012
Interactive Streamgraph D3
View index.html
<!DOCTYPE html>
<html>
<head>
<title>Streamgraph</title>
<script type="text/javascript" src="https://raw.github.com/lgrammel/d3/master/d3.v2.js"></script>
<script type="text/javascript" src="stream_layers.js"></script>
<script type="text/javascript" src="stream-chart.js"></script>
</head>
<body>
<div id="chart">
@lgrammel
lgrammel / button.css
Created Feb 28, 2012
Streamgraph Chart
View button.css
button {
font: 14px Helvetica Neue;
background-color: #222;
background-image: -moz-linear-gradient(top, rgba(255,255,255,.25), rgba(255,255,255,.11));
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(255,255,255,.25)),color-stop(1, rgba(255,255,255,.11)));
background-image: -webkit-linear-gradient(rgba(255,255,255,.25), rgba(255,255,255,.11));
color: #fff;
text-rendering: optimizeLegibility;
text-shadow: 0 -1px 1px #222;
padding: 6px 10px 6px 10px;
You can’t perform that action at this time.