Last active
January 27, 2019 14:55
-
-
Save sa7mon/dc4bec2951c8ac9bf3c9fc6ef6c268e6 to your computer and use it in GitHub Desktop.
D3 Horizontal Bar Chart sort
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: gpl-3.0 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <style> | |
| body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
| </style> | |
| </head> | |
| <body> | |
| <button id="byValue">Sort by Value</button> | |
| <script> | |
| const data = [ | |
| { | |
| COL_DIV_CODE: 'Academic Affairs', | |
| avg_base: 67778.9, | |
| }, | |
| { | |
| COL_DIV_CODE: 'Finance and Administration', | |
| avg_base: 75000.1, | |
| }, | |
| { | |
| COL_DIV_CODE: 'Arts and Humanities, College of', | |
| avg_base: 68109.0, | |
| }, | |
| ]; | |
| const maxObj = data.reduce(function(max, obj) { | |
| return obj.avg_base > max.avg_base? obj : max; | |
| }); | |
| function findObjectByCollegeName(name, data) { | |
| for (var i=0;i<data.length;i++) { | |
| if (data[i].COL_DIV_CODE == name) { | |
| return data[i] | |
| } | |
| } | |
| } | |
| const heightMargin = 120; | |
| const widthMargin = 300; | |
| const width = 1200 - 2 * widthMargin; | |
| const height = 400 - 2 * heightMargin; | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", 960) | |
| .attr("height", 500) | |
| const chart = svg.append('g') | |
| .attr('transform', `translate(${widthMargin}, ${heightMargin})`); | |
| // Draw X axis | |
| const xScale = d3.scaleLinear() | |
| .range([width, 0]) | |
| .domain([maxObj.avg_base, 0]); | |
| chart.append('g') | |
| .attr('transform', `translate(0, 0)`) | |
| .call(d3.axisTop(xScale)); | |
| // Draw Y axis | |
| const yScale = d3.scaleBand() | |
| .range([0, height]) | |
| .domain(data.map((s) => s.COL_DIV_CODE)) | |
| .padding(0.2); | |
| chart.append('g') | |
| .attr('transform', `translate(0, 0)`) | |
| .attr('class', 'y-axis') | |
| .call(d3.axisLeft(yScale).tickFormat(function(d) {return d; })); | |
| d3.selectAll(".y-axis .tick text") | |
| .attr("class", "bar-label"); // Add a class to the bar labels | |
| // Draw gridlines - vertical | |
| chart.append('g') | |
| .attr('class', 'grid') | |
| .call(d3.axisTop() | |
| .scale(xScale) | |
| .tickSize(-height, 0, 0) | |
| .tickFormat('')); | |
| // // Draw bars | |
| chart.selectAll() | |
| .data(data) | |
| .enter() | |
| .append('rect') | |
| .attr("class","bar") | |
| .attr('style', 'fill: steelblue') | |
| .attr('y', (s) => yScale(s.COL_DIV_CODE)) | |
| .attr('x', 0) | |
| .attr('width', (s) => xScale(s.avg_base)) | |
| .attr('height', yScale.bandwidth()); | |
| d3.select("#byValue").on("click", function() { | |
| data.sort(function(a,b) { | |
| return d3.descending(a.avg_base, b.avg_base); | |
| }); | |
| yScale.domain(data.map(function(d) { | |
| return d.avg_base; | |
| })); | |
| // Move bars | |
| svg.selectAll(".bar") | |
| .transition() | |
| .duration(500) | |
| .attr("y", function(d, i) { | |
| console.log("bar: ", d.avg_base, " ", yScale(d.avg_base)); | |
| return yScale(d.avg_base); | |
| }); | |
| // Move bar labels | |
| svg.selectAll(".bar-label") | |
| .transition() | |
| .duration(500) | |
| .attr("y", function(d) { | |
| var obj = findObjectByCollegeName(d, data); | |
| return yScale(obj.COL_DIV_CODE) + yScale.bandwidth() / 2 - 8; | |
| }); | |
| }); | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment