Skip to content

Instantly share code, notes, and snippets.

@Craftbd

Craftbd/.block

Last active April 17, 2018 16:25
Show Gist options
  • Save Craftbd/e31ca1eede63f6e51ccaaa3a098d7717 to your computer and use it in GitHub Desktop.
Save Craftbd/e31ca1eede63f6e51ccaaa3a098d7717 to your computer and use it in GitHub Desktop.
Download ZIP
Group Project Bioinformaticsnew
Raw
.block
license: mit
Raw
README.md

https://gist.github.com/4544529 (demo) was my first d3 adventure, where I scraped signatures from a White House petition and showed them as a pie chart.

Here, I show them as a US heat map (based on one of Mike Bostock's map demos). You can click on a state, and see how many signatures came from it.

Darker color means more signatures, but since the numbers range from a few dozens to >4500, the scale is logarithmic. I don't know yet how to use log() interpolators (I promise to learn), so I just did it quick and dirty with linear() and masking tape.

forked from thedod's block: Clickable US heat-map of petition signature count

forked from Craftbd's block: Group Project Bioinformatics

forked from rubin2ma's block: Group Project Bioinformatics

Raw
cars.csv
name economy (mpg) cylinders displacement (cc) power (hp) weight (lb) 0-60 mph (s) year
AMC Ambassador Brougham 13 8 360 175 3821 11 73
AMC Ambassador DPL 15 8 390 190 3850 8.5 70
AMC Ambassador SST 17 8 304 150 3672 11.5 72
AMC Concord DL 6 20.2 6 232 90 3265 18.2 79
AMC Concord DL 18.1 6 258 120 3410 15.1 78
AMC Concord DL 23 4 151 3035 20.5 82
AMC Concord 19.4 6 232 90 3210 17.2 78
AMC Concord 24.3 4 151 90 3003 20.1 80
AMC Gremlin 18 6 232 100 2789 15 73
AMC Gremlin 19 6 232 100 2634 13 71
AMC Gremlin 20 6 232 100 2914 16 75
AMC Gremlin 21 6 199 90 2648 15 70
AMC Hornet Sportabout (Wagon) 18 6 258 110 2962 13.5 71
AMC Hornet 18 6 199 97 2774 15.5 70
AMC Hornet 18 6 232 100 2945 16 73
AMC Hornet 19 6 232 100 2901 16 74
AMC Hornet 22.5 6 232 90 3085 17.6 76
AMC Matador (Wagon) 14 8 304 150 4257 15.5 74
AMC Matador (Wagon) 15 8 304 150 3892 12.5 72
AMC Matador 14 8 304 150 3672 11.5 73
AMC Matador 15 6 258 110 3730 19 75
AMC Matador 15.5 8 304 120 3962 13.9 76
AMC Matador 16 6 258 110 3632 18 74
AMC Matador 18 6 232 100 3288 15.5 71
AMC Pacer D/L 17.5 6 258 95 3193 17.8 76
AMC Pacer 19 6 232 90 3211 17 75
AMC Rebel SST (Wagon) 8 360 175 3850 11 70
AMC Rebel SST 16 8 304 150 3433 12 70
AMC Spirit DL 27.4 4 121 80 2670 15 79
Audi 100 LS 20 4 114 91 2582 14 73
Audi 100 LS 23 4 115 95 2694 15 75
Audi 100 LS 24 4 107 90 2430 14.5 70
Audi 4000 34.3 4 97 78 2188 15.8 80
Audi 5000 20.3 5 131 103 2830 15.9 78
Audi 5000S (Diesel) 36.4 5 121 67 2950 19.9 80
Audi Fox 29 4 98 83 2219 16.5 74
BMW 2002 26 4 121 113 2234 12.5 70
BMW 320i 21.5 4 121 110 2600 12.8 77
Buick Century 350 13 8 350 175 4100 13 73
Buick Century Limited 25 6 181 110 2945 16.4 82
Buick Century Luxus (Wagon) 13 8 350 150 4699 14.5 74
Buick Century Special 20.6 6 231 105 3380 15.8 78
Buick Century 17 6 231 110 3907 21 75
Buick Century 22.4 6 231 110 3415 15.8 81
Buick Electra 225 Custom 12 8 455 225 4951 11 73
Buick Estate Wagon (Wagon) 14 8 455 225 3086 10 70
Buick Estate Wagon (Wagon) 16.9 8 350 155 4360 14.9 79
Buick Lesabre Custom 13 8 350 155 4502 13.5 72
Buick Opel Isuzu Deluxe 30 4 111 80 2155 14.8 77
Buick Regal Sport Coupe (Turbo) 17.7 6 231 165 3445 13.4 78
Buick Skyhawk 21 6 231 110 3039 15 75
Buick Skylark 320 15 8 350 165 3693 11.5 70
Buick Skylark Limited 28.4 4 151 90 2670 16 79
Buick Skylark 20.5 6 231 105 3425 16.9 77
Buick Skylark 26.6 4 151 84 2635 16.4 81
Cadillac Eldorado 23 8 350 125 3900 17.4 79
Cadillac Seville 16.5 8 350 180 4380 12.1 76
Chevroelt Chevelle Malibu 16 6 250 105 3897 18.5 75
Chevrolet Bel Air 15 8 350 145 4440 14 75
Chevrolet Camaro 27 4 151 90 2950 17.3 82
Chevrolet Caprice Classic 13 8 400 150 4464 12 73
Chevrolet Caprice Classic 17 8 305 130 3840 15.4 79
Chevrolet Caprice Classic 17.5 8 305 145 3880 12.5 77
Chevrolet Cavalier 2-Door 34 4 112 88 2395 18 82
Chevrolet Cavalier Wagon 27 4 112 88 2640 18.6 82
Chevrolet Cavalier 28 4 112 88 2605 19.6 82
Chevrolet Chevelle Concours (Wagon) 8 350 165 4142 11.5 70
Chevrolet Chevelle Concours (Wagon) 13 8 307 130 4098 14 72
Chevrolet Chevelle Malibu Classic 16 6 250 100 3781 17 74
Chevrolet Chevelle Malibu Classic 17.5 8 305 140 4215 13 76
Chevrolet Chevelle Malibu 17 6 250 100 3329 15.5 71
Chevrolet Chevelle Malibu 18 8 307 130 3504 12 70
Chevrolet Chevette 29 4 85 52 2035 22.2 76
Chevrolet Chevette 30 4 98 68 2155 16.5 78
Chevrolet Chevette 30.5 4 98 63 2051 17 77
Chevrolet Chevette 32.1 4 98 70 2120 15.5 80
Chevrolet Citation 23.5 6 173 110 2725 12.6 81
Chevrolet Citation 28 4 151 90 2678 16.5 80
Chevrolet Citation 28.8 6 173 115 2595 11.3 79
Chevrolet Concours 17.5 6 250 110 3520 16.4 77
Chevrolet Impala 11 8 400 150 4997 14 73
Chevrolet Impala 13 8 350 165 4274 12 72
Chevrolet Impala 14 8 350 165 4209 12 71
Chevrolet Impala 14 8 454 220 4354 9 70
Chevrolet Malibu Classic (Wagon) 19.2 8 267 125 3605 15 79
Chevrolet Malibu 13 8 350 145 3988 13 73
Chevrolet Malibu 20.5 6 200 95 3155 18.2 78
Chevrolet Monte Carlo Landau 15.5 8 350 170 4165 11.4 77
Chevrolet Monte Carlo Landau 19.2 8 305 145 3425 13.2 78
Chevrolet Monte Carlo S 15 8 350 145 4082 13 73
Chevrolet Monte Carlo 15 8 400 150 3761 9.5 70
Chevrolet Monza 2+2 20 8 262 110 3221 13.5 75
Chevrolet Nova Custom 16 6 250 100 3278 18 73
Chevrolet Nova 15 6 250 100 3336 17 74
Chevrolet Nova 18 6 250 105 3459 16 75
Chevrolet Nova 22 6 250 105 3353 14.5 76
Chevrolet Vega (Wagon) 22 4 140 72 2408 19 71
Chevrolet Vega 2300 28 4 140 90 2264 15.5 71
Chevrolet Vega 20 4 140 90 2408 19.5 72
Chevrolet Vega 21 4 140 72 2401 19.5 73
Chevrolet Vega 25 4 140 75 2542 17 74
Chevrolet Woody 24.5 4 98 60 2164 22.1 76
Chevy C10 13 8 350 145 4055 12 76
Chevy C20 10 8 307 200 4376 15 70
Chevy S-10 31 4 119 82 2720 19.4 82
Chrysler Cordoba 15.5 8 400 190 4325 12.2 77
Chrysler Lebaron Medallion 26 4 156 92 2585 14.5 82
Chrysler Lebaron Salon 17.6 6 225 85 3465 16.6 81
Chrysler Lebaron Town & Country (Wagon) 18.5 8 360 150 3940 13 79
Chrysler New Yorker Brougham 13 8 440 215 4735 11 73
Chrysler Newport Royal 13 8 400 190 4422 12.5 72
Citroen DS-21 Pallas 4 133 115 3090 17.5 70
Datsun 1200 35 4 72 69 1613 18 71
Datsun 200SX 23.9 4 119 97 2405 14.9 78
Datsun 200SX 32.9 4 119 100 2615 14.8 81
Datsun 210 31.8 4 85 65 2020 19.2 79
Datsun 210 37 4 85 65 1975 19.4 81
Datsun 210 40.8 4 85 65 2110 19.2 80
Datsun 280ZX 32.7 6 168 132 2910 11.4 80
Datsun 310 GX 38 4 91 67 1995 16.2 82
Datsun 310 37.2 4 86 65 2019 16.4 80
Datsun 510 (Wagon) 28 4 97 92 2288 17 72
Datsun 510 Hatchback 37 4 119 92 2434 15 80
Datsun 510 27.2 4 119 97 2300 14.7 78
Datsun 610 22 4 108 94 2379 16.5 73
Datsun 710 24 4 119 97 2545 17 75
Datsun 710 32 4 83 61 2003 19 74
Datsun 810 Maxima 24.2 6 146 120 2930 13.8 81
Datsun 810 22 6 146 97 2815 14.5 77
Datsun B-210 32 4 85 70 1990 17 76
Datsun B210 GX 39.4 4 85 70 2070 18.6 78
Datsun B210 31 4 79 67 1950 19 74
Datsun F-10 Hatchback 33.5 4 85 70 1945 16.8 77
Datsun PL510 27 4 97 88 2130 14.5 70
Datsun PL510 27 4 97 88 2130 14.5 71
Dodge Aries SE 29 4 135 84 2525 16 82
Dodge Aries Wagon (Wagon) 25.8 4 156 92 2620 14.4 81
Dodge Aspen 6 20.6 6 225 110 3360 16.6 79
Dodge Aspen SE 20 6 225 100 3651 17.7 76
Dodge Aspen 18.6 6 225 110 3620 18.7 78
Dodge Aspen 19.1 6 225 90 3381 18.7 80
Dodge Challenger SE 15 8 383 170 3563 10 70
Dodge Charger 2.2 36 4 135 84 2370 13 82
Dodge Colt (Wagon) 28 4 98 80 2164 15 72
Dodge Colt Hardtop 25 4 97.5 80 2126 17 72
Dodge Colt Hatchback Custom 35.7 4 98 80 1915 14.4 79
Dodge Colt M/M 33.5 4 98 83 2075 15.9 77
Dodge Colt 26 4 98 79 2255 17.7 76
Dodge Colt 27.9 4 156 105 2800 14.4 80
Dodge Colt 28 4 90 75 2125 14.5 74
Dodge Coronet Brougham 16 8 318 150 4190 13 76
Dodge Coronet Custom (Wagon) 14 8 318 150 4457 13.5 74
Dodge Coronet Custom 15 8 318 150 3777 12.5 73
Dodge D100 13 8 318 150 3755 14 76
Dodge D200 11 8 318 210 4382 13.5 70
Dodge Dart Custom 15 8 318 150 3399 11 73
Dodge Diplomat 19.4 8 318 140 3735 13.2 78
Dodge Magnum XE 17.5 8 318 140 4080 13.7 78
Dodge Monaco (Wagon) 12 8 383 180 4955 11.5 71
Dodge Monaco Brougham 15.5 8 318 145 4140 13.7 77
Dodge Omni 30.9 4 105 75 2230 14.5 78
Dodge Rampage 32 4 135 84 2295 11.6 82
Dodge St. Regis 18.2 8 318 135 3830 15.2 79
Fiat 124 Sport Coupe 26 4 98 90 2265 15.5 73
Fiat 124 TC 26 4 116 75 2246 14 74
Fiat 124B 30 4 88 76 2065 14.5 71
Fiat 128 24 4 90 75 2108 15.5 74
Fiat 128 29 4 68 49 1867 19.5 73
Fiat 131 28 4 107 86 2464 15.5 7
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="histograms.js"></script>
<meta charset="utf-8">
<style>
.background {
fill: none;
pointer-events: all;
}
#states {
stroke: #000;
stroke-width: 1.5px;
}
#states text {
fill: #000;
stroke: none;
text-anchor:middle;
font-size: 10px;
}
#states .active {
fill: steelblue !important;
}
#states text.active {
font-size: 12px;
font-weight:bold;
fill: #fff;
stroke-width: .5px;
fill: #fff !important;
stroke: #000;
}
svg {
font: 10px sans-serif;
}
.background path {
fill: none;
stroke: #ccc;
stroke-opacity: .4;
shape-rendering: crispEdges;
}
.foreground path {
fill: none;
stroke: steelblue;
stroke-opacity: .7;
}
.brush .extent {
fill-opacity: .3;
stroke: #fff;
shape-rendering: crispEdges;
}
.axis line,
.axis path {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.axis text {
text-shadow: 0 1px 0 #fff;
cursor: move;
}
</style>
<body>
<script>
var m = [30, 10, 10, 10],
w = 960 - m[1] - m[3],
h = 500 - m[0] - m[2];
var xGraph = d3.scale.ordinal().rangePoints([0, w], 1),
yGraph = {},
dragging = {};
var line = d3.svg.line(),
axis = d3.svg.axis().orient("left"),
background,
foreground;
var svgGraph = d3.select("body").append("svg")
.attr("width", w + m[1] + m[3])
.attr("height", h + m[0] + m[2])
.append("g")
.attr("transform", "translate(" + m[3] + "," + m[0] + ")");
d3.csv("cars.csv", function(error, cars) {
//console.log(cars);
// Extract the list of dimensions and create a scale for each.
xGraph.domain(dimensions = d3.keys(cars[0]).filter(function(d) {
return d != "name" && (yGraph[d] = d3.scale.linear()
.domain(d3.extent(cars, function(p) { return +p[d]; }))
.range([h, 0]));
}));
// Add grey background lines for context.
background = svgGraph.append("g")
.attr("class", "background")
.selectAll("path")
.data(cars)
.enter().append("path")
.attr("d", path);
// Add blue foreground lines for focus.
foreground = svgGraph.append("g")
.attr("class", "foreground")
.selectAll("path")
.data(cars)
.enter().append("path")
.attr("d", path);
// Add a group element for each dimension.
var g = svgGraph.selectAll(".dimension")
.data(dimensions)
.enter().append("g")
.attr("class", "dimension")
.attr("transform", function(d) { return "translate(" + xGraph(d) + ")"; })
.call(d3.behavior.drag()
.on("dragstart", function(d) {
dragging[d] = this.__origin__ = x(d);
background.attr("visibility", "hidden");
})
.on("drag", function(d) {
dragging[d] = Math.min(w, Math.max(0, this.__origin__ += d3.event.dx));
foreground.attr("d", path);
dimensions.sort(function(a, b) { return position(a) - position(b); });
x.domain(dimensions);
g.attr("transform", function(d) { return "translate(" + position(d) + ")"; })
})
.on("dragend", function(d) {
delete this.__origin__;
delete dragging[d];
transition(d3.select(this)).attr("transform", "translate(" + x(d) + ")");
transition(foreground)
.attr("d", path);
background
.attr("d", path)
.transition()
.delay(500)
.duration(0)
.attr("visibility", null);
}));
// Add an axis and title.
g.append("g")
.attr("class", "axis")
.each(function(d) { d3.select(this).call(axis.scale(yGraph[d])); })
.append("text")
.attr("text-anchor", "middle")
.attr("y", -9)
.text(String);
// Add and store a brush for each axis.
g.append("g")
.attr("class", "brush")
.each(function(d) { d3.select(this).call(yGraph[d].brush = d3.svg.brush().y(yGraph[d]).on("brushstart", brushstart).on("brush", brush)); })
.selectAll("rect")
.attr("x", -8)
.attr("width", 16);
});
function position(d) {
var v = dragging[d];
return v == null ? xGraph(d) : v;
}
function transition(g) {
return g.transition().duration(500);
}
// Returns the path for a given data point.
function path(d) {
return line(dimensions.map(function(p) { return [position(p), yGraph[p](d[p])]; }));
}
// When brushing, don’t trigger axis dragging.
function brushstart() {
d3.event.sourceEvent.stopPropagation();
}
// Handles a brush event, toggling the display of foreground lines.
function brush() {
var actives = dimensions.filter(function(p) { return !y[p].brush.empty(); }),
extents = actives.map(function(p) { return y[p].brush.extent(); });
foreground.style("display", function(d) {
return actives.every(function(p, i) {
return extents[i][0] <= d[p] && d[p] <= extents[i][1];
}) ? null : "none";
});
}
</script>
<!-- This is where the code starts for the map drawning -->
<script>
var hits = {};
var width = 960,
height =500,
centered;
var projection = d3.geo.albersUsa()
.scale(width)
.translate([0, 0]);
var pathMap = d3.geo.path()
.projection(projection);
var svgMap = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
svgMap.append("rect")
.attr("class", "background")
.attr("width", width)
.attr("height", height)
.on("click", click);
var gMap = svgMap.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
.append("g")
.attr("id", "states");
UFO_color = [];
var color_by = "total";
var color = d3.scale.log()
.range(["aqua", "midnightblue"]);
d3.csv("UFO_color.csv", function(data){
data.forEach(function(d){
d["total"] = +d["total"];
})
color.domain([d3.min(data, function(d){ return d.total}),
d3.max(data,function(d) {return d.total; })]);
d3.json("states.json", function(json) {
data.forEach(function(d){
//console.log('d:', d);
//console.log("json:", json);
json.features.forEach(function(s){
//console.log('s', s);
if (d.state == s.properties.abbr){
s.total = d.total;
}
})
})
var states = gMap.selectAll("pathMap")
.data(json.features)
.enter().append("path")
.attr("d", pathMap)
.attr("id", function(d) { return d.properties.abbr; })
.style("fill", function(d) { return color(d.total); })
.on("click", click)
var labels = gMap.selectAll("text")
.data(json.features)
.enter().append("text")
.attr("transform", function(d) { return "translate(" + pathMap.centroid(d) + ")"; })
.attr("id", function(d) { return 'label-'+d.properties.abbr; })
.attr("dy", ".35em")
.on("click", click)
.text(function(d) { return d.properties.abbr; });
});
})
function click(d) {
var x = 0,
y = 0,
k = 1;
if (d && centered !== d) {
var centroid = pathMap.centroid(d);
x = -centroid[0];
y = -centroid[1];
k = 4;
centered = d;
} else {
centered = null;
}
gMap.selectAll("pathMap")
.classed("active", centered && function(d) { return d === centered; });
gMap.selectAll("text")
.text(function(d) { return d.properties.abbr; })
.classed("active",false);
if (centered) {
gMap.select("#label-"+centered.properties.abbr)
.text(function(d) { return d.properties.name+': '+ (hits[d.properties.abbr]||'(none)'); })
.classed("active", centered && function(d) { return d === centered; });
}
//Zooming Function
gMap.transition()
.duration(1000)
.attr("transform", "scale(" + k + ")translate(" + x + "," + y + ")")
.style("stroke-width", 1.5 / k + "px");
}
//connect graph to state "each one", number of sighting to popup in each state.
</script>
</body>
Display the source blob
Display the rendered blob
Raw
states.json
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
UFO_color.csv
state total
al 75.71
ak 257.35
az 174.07
ar 63.57
ca 84.12
co 145.33
ct 119.59
de 3476.66
fl 110.3
ga 68.01
hi 131.77
id 235.81
il 56.36
in 335.48
ia 84.45
ks 86.16
ky 738.89
la 63.36
me 212.75
md 87.83
ma 102.76
mi 76.85
mn 95.64
ms 56.52
mo 88.82
mt 234.45
ne 56.15
nv 125.49
nh 250.55
nj 74.28
nm 190.65
ny 60.04
nc 95.5
nd 60.43
oh 93.31
ok 80.46
or 213.34
pa 94.55
ri 164
sc 141.27
sd 106.41
tn 82.93
tx 35.76
ut 123.5
vt 284.25
va 86.09
wa 184.47
wv 116.63
wi 108.47
wy 138.56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment