xxxxxxxxxx<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: none; /*stroke-width: 0.5px;*/ cursor: pointer; } g.bar text.label { font-size: 7px; fill: black; text-anchor: end; } g.bar text.tooltip { font-family: Consolas,sans-serif; font-size: 13px; } g.bar text.tooltip { 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.tooltip { 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.4 SM :-)</p> <button onclick="javascript:alphaSort(); void(0);">Sort Alpha</button> | <button onclick="javascript:kwhSort(); 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"); // .tickFormat(function(d) { // return d.Location; // }); //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; //Determines default sort order data.sort(function(a, b) { return d3.descending(+a.EL201502, +b.EL201502); }); widthScale.domain([ 0, d3.max(data, function(d) { return +d.EL201502; }) ]); heightScale.domain(d3.range(data.length)); //Bind data to groups (not bars directly) var groups = svg.selectAll("g") .data(data) .enter() .append("g") .attr("class", "bar") .attr("transform", function(d, i) { return "translate(" + padding[3] + "," + heightScale(i) + ")"; }); //Add a rect to each group var rects = groups.append("rect") .attr("x", 0) .attr("y", 0) .attr("width", 0) .attr("height", heightScale.rangeBand()) .attr("fill", "steelblue"); //Add a text element / label to each group groups.append("text") .attr("class", "label") .attr("x", -3) .attr("y", 5) .text(function(d) { return d.Location; }); //Add a text element / tooltip to each group groups.append("text") .attr("class", "tooltip") .attr("x", 0) .attr("y", 0) .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 alphaSort() { d3.selectAll('g.bar') .sort(function(a, b) { return d3.ascending(a.Location, b.Location); }) .transition() .duration(1000) .attr("transform", function(d, i) { return "translate(" + padding[3] + "," + heightScale(i) + ")"; }); } function kwhSort() { // 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('g.bar') .sort(function(a, b) { return d3.descending(+a.EL201502, +b.EL201502); }) .transition() .duration(1000) .attr("transform", function(d, i) { return "translate(" + padding[3] + "," + heightScale(i) + ")"; }); } </script> </body></html> https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js