Skip to content

Instantly share code, notes, and snippets.

@wykhuh

wykhuh/index.html

Created May 3, 2015 00:10
Show Gist options
  • Save wykhuh/093d3ae554a8c512f78e to your computer and use it in GitHub Desktop.
Save wykhuh/093d3ae554a8c512f78e to your computer and use it in GitHub Desktop.
Download ZIP
multiple D3 charts
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://d3js.org/d3.v3.min.js" ></script>
<style>
svg {
border: 1px solid black;
display: block;
margin: 20px;
}
</style>
</head>
<body>
<script>
(function(){
// create Chart class
var Chart = function() {
var width, height, barPadding, factor, len, svg;
var addComma = d3.format("0,000");
var init = function(options) {
width = options.width || 1000;
height = options.height || 1000;
barPadding = options.barPadding || 1;
factor = options.factor || 1;
};
var createSVG = function(){
svg = d3.select('body')
.append('svg')
.attr('width', width)
.attr('height', height);
return svg;
};
var appendElements = function(data, element) {
len = data.length;
return svg.selectAll(element)
.data(data)
.enter()
.append(element);
};
var drawElements = function(elements, key){
elements
.attr({
x: function(d,i) {
return i * (width /len);
},
y: function(d) {
return height - (+d[key]/ factor);
},
width: width/len - barPadding,
height: function(d) {
return +d[key] / factor;
}
});
};
var addToolTip = function(elements, label, value) {
elements
.append('title')
.text(function(d){
return d[label] + ': ' + addComma(d[value]);
});
};
return {
appendElements: appendElements,
drawElements: drawElements,
addToolTip: addToolTip,
createSVG: createSVG,
init: init
};
};
// start creating charts
// options for the charts
var options = {
width: 500,
height: 500,
barPadding: 1,
factor: 5500
};
// create chart 1
var chart1 = Chart();
chart1.init(options);
chart1.createSVG();
d3.csv('parks1.csv', function(data){
var rects = chart1.appendElements(data, 'rect');
chart1.drawElements(rects, 'visitors');
chart1.addToolTip(rects, 'park', 'visitors');
});
// create chart 2
var chart2 = Chart();
chart2.init(options);
chart2.createSVG();
d3.csv('parks2.csv', function(data){
var rects = chart2.appendElements(data, 'rect');
chart2.drawElements(rects, 'visitors');
chart2.addToolTip(rects, 'park', 'visitors');
});
}());
</script>
</body>
</html>
Raw
parks1.csv
id park state acres lat lon date camp_backcountry camp_concession camp_rv camp_tent lodging_concession visitors
1 Abraham Lincoln Birthplace NHP KY 344.5 37.5309061 -85.7371759 1916-07-17 0 0 0 0 0 241264
2 Acadia NP ME 48,995.91 44.3385559 -68.2733346 1916-07-08 1230 0 33369 126474 0 2563129
3 Adams NHP MA 23.82 46.2023685 -121.4910493 1946-12-09 0 0 0 0 0 178468
4 African Burial Ground NM NY 0.35 40.7146525 -74.0046484 1993-04-19 0 0 0 0 0 54861
5 Agate Fossil Beds NM NE 3,057.87 42.4233759 -103.7549847 1965-06-05 0 0 0 0 0 12440
6 Alibates Flint Quarries NM TX 1,370.97 35.5836092 -101.6698299 1965-08-21 0 0 0 0 0 4513
7 Allegheny Portage Railroad NHS PA 1,284.27 40.45970550000001 -78.5618265 1962-12-29 0 0 0 0 0 172883
8 Amistad NRA TX 58,500 35.9189256 -103.1538304 1965-11-11 0 0 2628 262 0 1130096
9 Andersonville NHS GA 515.61 32.1959947 -84.13990849999999 1970-10-16 0 0 0 0 0 127189
10 Andrew Johnson NHS TN 16.68 36.0921036 -83.58194189999999 1935-08-29 0 0 0 0 0 42863
Raw
parks2.csv
id park state acres lat lon date camp_backcountry camp_concession camp_rv camp_tent lodging_concession visitors
11 Aniakchak NM & PRES AK 601,293.93 56.8516437 -158.1136847 1978-12-01 381 0 0 0 0 134
12 Antietam NB MD 3,230.37 39.416111 -77.74249999999999 1890-08-30 0 0 0 0 0 337079
13 Apostle Islands NL WI 69,371.89 47.0027301 -90.69083529999999 1970-09-26 12795 0 0 0 0 290059
14 Appomattox Court House NHP VA 1,774.12 37.3570894 -78.8252911 1930-06-18 0 0 0 0 0 278776
15 Arches NP UT 76,678.98 38.733081 -109.5925139 1929-04-12 1211 0 15436 25252 0 1284767
16 Arkansas Post NMEM AR 757.51 34.02371249999999 -91.34373029999999 1960-07-06 0 0 0 0 0 30860
17 Arlington House (The Robert E Lee Memorial) VA 28.08 38.8811673 -77.07261629999999 1925-03-04 0 0 0 0 0 671638
18 Assateague Island NS MD-VA 41,320.04 38.0607973 -75.2362381 1965-09-21 2034 0 21515 38429 0 2170681
19 Aztec Ruins NM NM 318.4 36.8345552 -108.000254 1923-01-24 0 0 0 0 0 44721
20 Badlands NP SD 242,755.94 43.8553804 -102.3396912 1929-03-04 1419 38088 2740 8622 9087 868094
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment