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 / 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 / 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 / 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 / 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 / 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 / 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 / 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: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:5503844
Created May 2, 2013 17:28
HTML of the inaugural front page of FvckTheMedia.com
<!DOCTYPE html>
<!-- MSO IS KING -->
<html>
<head profile="http://www.w3.org/2005/10/profile">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="media.css" />
<title>The Media</title>
<link rel="icon"
type="image/png"
@lisawilliams
lisawilliams / gist:5282031
Created March 31, 2013 21:16
Easter Egg Sketch 2. This one uses a loop to change the color of the eggs.
// easter egg sketch!
// set up some variables for the egg colors.
// taken together, these are RGB purple
int r = 206;
int g = 93;
int b = 219 ;