Skip to content

Instantly share code, notes, and snippets.

@cpopolo
Last active November 6, 2015 21:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save cpopolo/ca68d6158daa3a02bd96 to your computer and use it in GitHub Desktop.
Save cpopolo/ca68d6158daa3a02bd96 to your computer and use it in GitHub Desktop.
Supermarket Electricity Data
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bar Chart, Framed</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<style type="text/css">
body {
margin: 0;
background-color: lightGray;
font-family: Helvetica, Arial, sans-serif;
}
#container {
width: 700px;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
padding: 50px;
background-color: white;
box-shadow: 4px 4px 13px 6px #aaa;
}
h1 {
font-size: 24px;
margin: 0;
}
p {
font-size: 14px;
margin: 15px 0 10px 0;
}
a:link {
text-decoration: none;
color: gray;
}
a:hover {
text-decoration: underline;
}
a:visited {
color: gray;
}
a:active {
color: steelBlue;
}
svg {
background-color: white;
}
g.bar {
stroke: black;
stroke-width: 0.5px;
}
g.bar text {
font-family: Consolas,sans-serif;
font-size: 13px;
stroke: #333;
stroke-width: 0.2px;
font-weight: normal;
text-anchor: start;
opacity: 0;
fill: white;
}
g.bar:hover rect {
fill: orange;
}
g.bar:hover text {
opacity: 1;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 9px;
}
.y.axis text {
font-size: 8px;
}
.y.axis path,
.y.axis line {
opacity: 0;
}
</style>
</head>
<body>
<div id="container">
<h1>WF Electricity</h1>
<p>Some supermarket electricity consumption data. V2.3</p>
<button onclick="javascript:sort2(); void(0);">Sort Alpha</button> | <button onclick="javascript:sort3(); void(0);">Sort kWh/SF</button>
</div>
<script type="text/javascript">
var w = 700;
var h = 800;
var padding = [ 20, 10, 30, 120 ]; //Top, right, bottom, left
var widthScale = d3.scale.linear()
.range([ 0, w - padding[1] - padding[3] ]);
var heightScale = d3.scale.ordinal()
.rangeRoundBands([ padding[0], h - padding[2] ], 0.1);
// var heightScale = d3.scale.linear()
// .range([0,100]);
var xAxis = d3.svg.axis()
.scale(widthScale)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(heightScale)
.orient("left");
//Now SVG goes into #container instead of body
var svg = d3.select("#container")
.append("svg")
.attr("width", w)
.attr("height", h);
d3.csv("wf-01-electricity.csv", function(data) {
var data2 = data;
data.sort(function(a, b) {
return d3.descending(+a.EL201502, +b.EL201502);
//return d3.ascending(+a.Location, +b.Location);
});
widthScale.domain([ 0, d3.max(data, function(d) {
return +d.EL201502;
}) ]);
heightScale.domain(data.map( function(d,i) { return d.Location; } ));
//Bind data to groups (not bars directly)
var groups = svg.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("class", "bar")
.attr("mylocation",function(d,i) {
return d.Location;
});
//Add a rect to each group
var rects = groups.append("rect")
.attr("x", padding[3])
.attr("y", function(d,i) {
console.log("a",i, heightScale(d.Location));
return heightScale(d.Location);
})
.attr("mylocation", function(d,i) {
return d.Location;
})
.attr("width", 0)
.attr("height", heightScale.rangeBand())
.attr("fill", "steelblue");
//Add a text element to each group
groups.append("text")
.attr("x", function(d) {
//return padding[3] + widthScale(d.EL201502) + 3;
return padding[3];
})
.attr("y", function(d,i) {
return heightScale(d.Location) + 6;
})
.text(function(d,i) {
return i + ' ' + d.EL201502 + ' (' + d.Location + ')';
});
rects.transition()
.delay(function(d, i) {
return i;
})
.duration(100)
.attr("width", function(d) {
return widthScale(d.EL201502);
});
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(" + padding[3] + "," + (h - padding[2]) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + padding[3] + ",0)")
.call(yAxis);
});
function sort2() {
d3.selectAll('g.bar')
.sort(function(a, b) {
return d3.ascending(a.mylocation, b.mylocation);
});
d3.selectAll('g.bar rect')
.transition()
.duration(1000)
.attr("y", function(d,i) {
console.log("b", i, heightScale(d.mylocation));
return heightScale(d.mylocation);
});
d3.selectAll('g.bar text')
.transition()
.duration(1000)
.attr("y", function(d,i) {
return heightScale(d.mylocation);
});
}
function sort3() {
// This works but isn't useful.
widthScale.domain([ 0, 10 ]);
// This is killing me. How do I access the 'data' from here inside a function, knowing that data was created with a different scope?
widthScale.domain([ 0, d3.max(d3.selectAll(data), function(d) {
return +d.EL201502/d.SqFt;
}) ]);
d3.selectAll('rect')
.transition()
.duration(1000)
.attr("y", function(d) {
return heightScale(d.Location);
})
.attr("width", function(d) {
console.log(d.Location + ' ' + d.EL201501 + ' ' + d.EL201501/d.SqFt);
return widthScale(+d.EL201501/d.SqFt);
});
svg.selectAll("g.y.axis")
.call(yAxis);
svg.selectAll("g.x.axis")
.call(xAxis);
}
</script>
</body>
</html>
Location State LocationX LocationY SqFt OpenMMYYYY EL201412 EL201501 EL201502 Base2008 Delta ELTOTAL
ALM - Alameda San Jose CA nocal 314 417 34236 12-2014 53070.6 53009.4 52958.4 61812.0 -14.3 159038.4
ARD - Arden Way CA nocal 375 280 40831 06-2003 51826.2 50541.0 49317.0 61812.0 -20.2 151684.2
ARR - Arroyo CA socal 412 561 77046 11-2007 54784.2 54080.4 53407.2 66402.0 -19.6 162271.8
BLD - Blithedale CA nocal 294 336 23110 06-2010 69839.4 69768.0 69533.4 61812.0 12.5 209140.8
BLL - Blossom Hill CA nocal 318 388 51444 11-2010 5967.0 4579.8 3406.8 61812.0 -94.5 13953.6
BRK - Berkeley CA nocal 315 345 24500 08-1990 62872.8 62648.4 62689.2 61812.0 1.4 188210.4
BRT - Brentwood CA nocal 326 340 16643 10-1997 46348.8 43615.2 43105.2 66402.0 -35.1 133069.2
BVH - Beverly Hills CA socal 564 641 23900 09-1993 66871.2 66708.0 66483.6 66402.0 0.1 200062.8
CAP - Capitola CA nocal 335 413 25069 07-2009 64474.2 64168.2 63943.8 61812.0 3.4 192586.2
CAS - Castro CA nocal 301 359 33030 11-2013 50530.8 50153.4 49857.6 61812.0 -19.3 150541.8
CBL - Campbell CA nocal 319 381 31475 02-1995 76296.0 73460.4 70696.2 61812.0 14.4 220452.6
CHR - Chandler AZ socal 554 621 60060 10-2007 56395.8 56834.4 57211.8 66402.0 -13.8 170442.0
CMA - Camelback AZ az 1020 633 38495 09-2013 67952.4 67789.2 67697.4 66402.0 2.0 203439.0
COD - Coddingtown CA nocal 286 296 47440 09-2010 50418.6 50479.8 50469.6 61812.0 -18.3 151368.0
DAV - Davis CA nocal 377 289 20120 10-2012 53131.8 53437.8 53692.8 61812.0 -13.1 160262.4
DMR - Del Mar CA socal 631 706 33523 02-2013 63903.0 64045.8 64045.8 66402.0 -3.5 191994.6
ENC - Encinitas CA socal 629 705 24107 06-2011 66147.0 66249.0 66340.8 66402.0 -0.1 198736.8
FFX - Fairfax CA nocal 292 328 41158 05-2002 30334.8 27764.4 23919.0 66402.0 -64.0 82018.2
FLG - Flagstaff AZ new Fron... az 979 534 24419 04-2014 52601.4 52326.0 51734.4 66402.0 -22.1 156661.8
FOL - Folsom CA nocal 397 270 45116 10-2011 54692.4 54774.0 54672.0 61812.0 -11.6 164138.4
FRE - Fremont CA nocal 324 355 39026 09-2013 49327.2 49429.2 49704.6 61812.0 -19.6 148461.0
FRK - Franklin CA nocal 389 300 28000 07-1996 73001.4 73154.4 72644.4 61812.0 17.5 218800.2
FRS - Fresno CA nocal 477 424 30800 09-2000 63872.4 63801.0 63515.4 61812.0 2.8 191188.8
FTA - Ft. Apache NV nocal 305 369 40000 08-2003 58915.2 58915.2 58752.0 66402.0 -11.5 176582.4
GIL - Gilman Ave-Berkeley C... socal 588 640 47805 11-2014 38454.0 38321.4 38137.8 61812.0 -38.3 114913.2
GLN - Glendale CA socal 558 626 43960 05-2004 53182.8 53703.0 53947.8 66402.0 -18.8 160833.6
HAR - Harrison CA socal 603 673 57219 09-2007 57609.6 57966.6 58170.6 61812.0 -5.9 173746.8
HEN - Henderson NV nv 766 474 49790 04-2006 55171.8 54672.0 53988.6 66402.0 -18.7 163832.4
HIL - Hillcrest CA socal 643 736 28000 04-1997 69268.2 69278.4 69472.2 66402.0 4.6 208018.8
HOL - West Hollywood CA socal 561 629 24300 02-2000 79753.8 79978.2 80437.2 66402.0 21.1 240169.2
HTB - Huntington Beach CA socal 584 668 31530 10-2010 70757.4 70808.4 70879.8 66402.0 6.7 212445.6
JAM - Jamboree CA nocal 483 314 60385 08-2007 54631.2 54141.6 53754.0 66402.0 -19.0 162526.8
KAO - Kailua HI hi 214 601 31647 04-2012 94421.4 94635.6 94625.4 66402.0 42.5 283682.4
KMO - Kahala Mall Oahu HI hi 213 614 28547 09-2008 100041.6 99501.0 99286.8 66402.0 49.5 298829.4
LAF - Lafayette CA nocal 322 349 25038 05-2011 59527.2 59578.2 59608.8 61812.0 -3.6 178714.2
LAG - Laguna Beach CA socal 581 666 12463 09-2007 55824.6 55569.6 55131.0 66402.0 -17.0 166525.2
LAJ - La Jolla CA socal 638 738 35927 11-1996 61485.6 61342.8 61271.4 66402.0 -7.7 184099.8
LAT - Los Altos CA nocal 314 382 50451 09-2006 51265.2 51183.6 50867.4 61812.0 -17.7 153316.2
LBC - Long Beach CA socal 567 659 25897 09-2007 64494.6 64423.2 64515.0 66402.0 -2.8 193432.8
LGN - Laguna Niguel CA socal 599 679 40638 05-2012 48317.4 48205.2 48123.6 66402.0 -27.5 144646.2
LGT - Los Gatos CA nocal 314 382 18125 04-1994 68646.0 67503.6 66096.0 61812.0 6.9 202245.6
LVB - Las Vegas Boulevard N... nv 760 470 50280 10-2008 58568.4 58619.4 58558.2 66402.0 -11.8 175746.0
MLV - Mill Valley CA nocal 293 333 15000 07-1992 68370.6 68799.0 69054.0 61812.0 11.7 206223.6
MMM - Maui Mall Maui HI hi 341 656 28536 02-2010 95339.4 94707.0 94768.2 66402.0 42.7 284814.6
MON - Montana Avenue CA socal 558 646 8250 09-2007 93676.8 92514.0 91310.4 66402.0 37.5 277501.2
MRY - Monterey CA nocal 334 442 24616 06-1998 64545.6 64617.0 64637.4 61812.0 4.6 193800.0
NOE - Noe Valley CA nocal 302 357 25187 09-2009 42544.2 42503.4 42452.4 61812.0 -31.3 127500.0
NOV - Novato CA nocal 295 328 39119 04-2010 62913.6 62903.4 62903.4 61812.0 1.8 188720.4
NPA - Napa CA nocal 310 292 48791 01-2008 43890.6 43829.4 43717.2 61812.0 -29.3 131437.2
NPT - Newport Beach CA socal 582 664 32979 09-2012 65769.6 65453.4 65290.2 66402.0 -1.7 196513.2
OCN - Ocean Avenue CA nocal 299 356 26623 08-2012 68248.2 68278.8 68238.0 61812.0 10.4 204765.0
OKS - Thousand Oaks CA socal 535 629 35250 03-2005 55834.8 55620.6 55508.4 66402.0 -16.4 166963.8
ORL - Oracle Tuscon AZ nocal 302 345 33864 08-2014 53774.4 53478.6 53295.0 66402.0 -19.7 160548.0
OXN - Oxnard CA socal 534 639 39200 06-2013 54049.8 53907.0 53958.0 66402.0 -18.7 161914.8
PAL - Palo Alto CA nocal 307 371 28000 01-1989 56508.0 55926.6 55722.6 61812.0 -9.9 168157.2
PAS - Pasadena CA socal 569 637 46800 05-1999 47256.6 47134.2 47083.2 66402.0 -29.1 141474.0
PCH - Pacific Cst Hghwy El nocal 344 425 64996 04-2007 58854.0 58864.2 58915.2 66402.0 -11.3 176633.4
PET - Petaluma CA nocal 294 309 31000 02-2000 43625.4 43625.4 43605.0 61812.0 -29.5 130855.8
PMD - Palm Desert CA socal 634 641 31629 09-2014 61781.4 61393.8 61026.6 66402.0 -8.1 184201.8
PRE - Prescott AZ az 946 605 14148 04-2014 35649.0 36332.4 37189.2 66402.0 -44.0 109170.6
PTH - Potrero Hill CA nocal 306 352 40516 09-2007 68115.6 68258.4 68340.0 61812.0 10.6 204714.0
PTR - Porter Ranch CA socal 563 623 27972 11-2001 47776.8 47379.0 46889.4 66402.0 -29.4 142045.2
PVA - Paradise Valley AZ nocal 303 356 31000 11-2002 58038.0 57630.0 57130.2 66402.0 -14.0 172798.2
RAM - San Ramon CA nocal 341 349 30100 03-2000 55651.2 55508.4 54692.4 61812.0 -11.5 165852.0
RDB - Redondo Beach CA socal 548 637 21565 09-1993 45206.4 45349.2 45522.6 66402.0 -31.4 136078.2
RED - Redwood City CA nocal 306 361 40419 11-2004 50490.0 50694.0 50857.2 61812.0 -17.7 152041.2
RNO - Reno NV nv 454 234 51758 06-2008 51673.2 51652.8 51459.0 61812.0 -16.7 154785.0
ROS - Roseville CA nocal 445 271 58602 11-2008 58201.2 58354.2 58507.2 61812.0 -5.3 175062.6
RRD - River Road AZ nocal 435 249 37308 01-2013 47389.2 47032.2 46675.2 66402.0 -29.7 141096.6
SBR - Santa Barbara CA socal 456 604 28782 10-2009 75112.8 74980.2 74868.0 66402.0 12.7 224961.0
SCT - Scottsdale AZ az 1011 639 54955 02-2008 67371.0 67432.2 67452.6 66402.0 1.6 202255.8
SEB - Sebastopol CA nocal 282 282 12568 02-2000 59323.2 59190.6 58976.4 61812.0 -4.6 177490.2
SED - Sedona AZ az 969 589 16700 04-2014 63974.4 63648.0 63321.6 66402.0 -4.6 190944.0
SHO - Sherman Oaks East CA socal 550 638 17100 09-1993 60649.2 60730.8 60526.8 66402.0 -8.8 181906.8
SHW - Sherman Oaks West CA socal 547 638 19000 01-1996 20491.8 20349.0 20247.0 66402.0 -69.5 61087.8
SLO - San Luis Obispo CA socal 427 574 31204 04-2014 52795.2 52509.6 52122.0 66402.0 -21.5 157426.8
SMC - Santa Monica CA socal 543 636 26350 07-2003 86118.6 85812.6 85537.2 66402.0 28.8 257468.4
SMT - San Mateo CA nocal 305 359 38341 01-2003 46450.8 46552.8 46644.6 61812.0 -24.5 139648.2
SNM - Sonoma CA nocal 304 292 34304 06-2007 27111.6 26734.2 26377.2 61812.0 -57.3 80223.0
SOM - SOMA CA nocal 303 359 32180 01-2004 71185.8 71736.6 72216.0 61812.0 16.8 215138.4
SPE - Speedway AZ az 982 641 27000 09-2007 59384.4 60139.2 60843.0 66402.0 -8.4 180366.6
SRF - San Rafael CA nocal 301 339 25000 04-1997 69778.2 69910.8 70033.2 61812.0 13.3 209722.2
SRS - Santa Rosa CA nocal 299 286 25000 02-2000 48327.6 52581.0 55763.4 61812.0 -9.8 156672.0
STC - Stevens Creek CA nocal 313 370 67613 08-2007 49378.2 49194.6 49235.4 61812.0 -20.3 147808.2
STN - Stanyan (Haight) CA nocal 303 348 22264 02-2011 55794.0 55906.2 55916.4 61812.0 -9.5 167616.6
STZ - Santa Cruz CA nocal 319 412 31725 03-2009 55171.8 55059.6 55018.8 61812.0 -11.0 165250.2
TEM - Tempe AZ az 989 641 31800 03-1998 55294.2 55508.4 55753.2 66402.0 -16.0 166555.8
TOR - Torrance CA socal 556 659 53000 09-1999 37954.2 37505.4 37270.8 66402.0 -43.9 112730.4
TRZ - Tarzana CA socal 557 629 53254 05-2010 49357.8 49408.8 49521.0 66402.0 -25.4 148287.6
TYA - Tenaya NV nv 755 461 27000 09-2007 45930.6 45461.4 45114.6 66402.0 -32.1 136506.6
VAL - Valencia CA socal 560 630 38902 08-2004 46930.2 46950.6 46960.8 66402.0 -29.3 140841.6
VEN - Venice CA socal 557 648 48420 09-2008 72134.4 71726.4 71328.6 66402.0 7.4 215189.4
WAL - Walnut Creek CA nocal 324 344 27500 01-2001 64107.0 64423.2 63872.4 61812.0 3.3 192402.6
WDH - Woodland Hills CA socal 548 629 28180 10-1999 43074.6 44594.4 45736.8 66402.0 -31.1 133405.8
WLA - West Los Angeles CA socal 556 658 23440 07-1996 85027.2 85445.4 85669.8 66402.0 29.0 256142.4
WLB - Wilshire Blvd CA socal 562 653 14700 09-2007 68034.0 67789.2 67819.8 66402.0 2.1 203643.0
WWD - Westwood CA socal 552 626 28100 02-2003 54447.6 54661.8 54896.4 66402.0 -17.3 164005.8
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment