Skip to content

Instantly share code, notes, and snippets.

View lisawilliams's full-sized avatar

Lisa Williams lisawilliams

140 followers · 84 following
View GitHub Profile
@lisawilliams
lisawilliams / gist:5591383
Created May 16, 2013 12:30
Roberto Rocha's attempt to do a tabletop-to-datatables example using F1 car drivers. Why doesn't it work? Public spreadsheet URL: https://docs.google.com/a/placeblogger.com/spreadsheet/pub?key=0ArP8859PKYs8dEpUQ3hLejA1TVo1cWxPbnBVNy11TGc&output=html Roberto's example URL: http://mojotrotters.com/gp/driver-profiles.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
table.myTable { border-collapse:collapse; }
table.myTable td, table.myTable th { border:1px solid black;padding:0px; }
@lisawilliams
lisawilliams / gist:5805682
Created June 18, 2013 14:14
JSON of the Twitter hashtag #bulger, captured on 6/18/2013 at 10AM EST. I got this using the Apogee Twitter API explorer/console: https://dev.twitter.com/console. Now, how do I visualize it?
HTTP/1.1 200 OK
content-type:application/json;charset=utf-8
x-frame-options:SAMEORIGIN
x-rate-limit-remaining:176
last-modified:Tue, 18 Jun 2013 14:12:40 GMT
status:200 OK
date:Tue, 18 Jun 2013 14:12:40 GMT
x-transaction:c0b19d71d17fda79
pragma:no-cache
cache-control:no-cache, no-store, must-revalidate, pre-check=0, post-check=0
@lisawilliams
lisawilliams / gist:5392670
Last active January 30, 2017 22:18
For "The Insanely Illustrated Guide To Your First Tile Mill Map," dataforradicals.com
Map {
background-color: #b8dee6;
}
#countries {
::outline {
line-color: #1889a2 ;
line-width: 2;
line-join: round;
}
@lisawilliams
lisawilliams / scatterplot2.html
Created March 20, 2017 02:59
Scatterplot exercise step 2
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
@lisawilliams
lisawilliams / scatterplot3.html
Created March 20, 2017 03:02
Scatterplot exercise part 3
// setup x
var xValue = function(d) { return d.Calories;}, // data -> value
xScale = d3.scale.linear().range([0, width]), // value -> display
xMap = function(d) { return xScale(xValue(d));}, // data -> display
xAxis = d3.svg.axis().scale(xScale).orient("bottom");
// setup y
var yValue = function(d) { return d["Protein (g)"];}, // data -> value
yScale = d3.scale.linear().range([height, 0]), // value -> display
yMap = function(d) { return yScale(yValue(d));}, // data -> display
@lisawilliams
lisawilliams / scatterplot4.html
Created March 20, 2017 03:09
Scatterplot exercise part 4
// setup fill color
var cValue = function(d) { return d.Manufacturer;},
color = d3.scale.category10();
// add the graph canvas to the body of the webpage
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
@lisawilliams
lisawilliams / scatterplot5.html
Created March 20, 2017 03:23
Scatterplot exercise step 5
// load data
d3.csv("cereal.csv", function(error, data) {
// change string (from CSV) into number format
data.forEach(function(d) {
d.Calories = +d.Calories;
d["Protein (g)"] = +d["Protein (g)"];
// console.log(d);
});
@lisawilliams
lisawilliams / scatterplot6.html
Created March 20, 2017 03:32
Scatterplot exercise step 6
// don't want dots overlapping axis, so add in buffer to data domain
xScale.domain([d3.min(data, xValue)-1, d3.max(data, xValue)+1]);
yScale.domain([d3.min(data, yValue)-1, d3.max(data, yValue)+1]);
// x-axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
@lisawilliams
lisawilliams / index-begin.html
Last active March 20, 2017 03:47
Beginning Of Scatterplot Exercise
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<!-- Example based on http://bl.ocks.org/mbostock/3887118 -->
<!-- Tooltip example from http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html -->
<style>
/* Here's CSS code that will style our visualization */
@lisawilliams
lisawilliams / cereal-begin.csv
Last active March 20, 2017 03:48
Cereal Name Manufacturer Type Calories Protein (g) Fat Sodium Dietary Fiber Carbs Sugars Display Shelf Potassium Vitamins and Minerals Serving Size Weight Cups per Serving
100%_Bran Nabisco C 70 4 1 130 10 5 6 3 280 25 1 0.33
100%_Natural_Bran Quaker Oats C 120 3 5 15 2 8 8 3 135 0 1 -1
All-Bran Kelloggs C 70 4 1 260 9 7 5 3 320 25 1 0.33
All-Bran_with_Extra_Fiber Kelloggs C 50 4 0 140 14 8 0 3 330 25 1 0.5
Almond_Delight Ralston Purina C 110 2 2 200 1 14 8 3 -1 25 1 0.75
Apple_Cinnamon_Cheerios General Mills C 110 2 2 180 1.5 10.5 10 1 70 25 1 0.75
Apple_Jacks Kelloggs C 110 2 0 125 1 11 14 2 30 25 1 1
Basic_4 General Mills C 130 3 2 210 2 18 8 3 100 25 1.33 0.75
Bran_Chex Ralston Purina C 90 2 1 200 4 15 6 1 125 25 1 0.67