Comparison bar chart (scratch)
Last active
June 22, 2017 08:08
-
-
Save t3o-it/58f7eaa690088a55493713cc03f7124c to your computer and use it in GitHub Desktop.
Compare Horizontal Barchart
This file contains 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> | |
| <svg width="500" height="300"></svg> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> | |
| <style> | |
| * { | |
| font-family: 'Lato', sans-serif; | |
| color: #999; | |
| font-size: 0.8rem; | |
| } | |
| .experiment text { | |
| color: #fff; | |
| font-size: 0.9rem; | |
| pointer-events: none; | |
| } | |
| .legend { | |
| font-size: 1rem; | |
| } | |
| .yAxisLabel,.xAxisLabel{ | |
| font-size: 1rem; | |
| } | |
| .toolTip { | |
| position: absolute; | |
| display: none; | |
| min-width: 80px; | |
| height: auto; | |
| background: none repeat scroll 0 0 #ffffff; | |
| border: 1px solid #ddd; | |
| padding: 6px; | |
| /*text-align: center;*/ | |
| } | |
| .bar{ | |
| pointer-events: all; | |
| cursor:pointer; | |
| } | |
| h4{ | |
| padding: 0; | |
| margin: 0; | |
| /* text-align: center;*/ | |
| } | |
| .v2 { | |
| color: #1F78B4; | |
| } | |
| .v21{ | |
| color: #33A02C; | |
| } | |
| </style> | |
| <script> | |
| var data_1 = [ | |
| {label: "1000", v2: 140, v21: 35}, | |
| {label: "500", v2: 75, v21: 21.2}, | |
| {label: "100", v2: 20, v21: 10}, | |
| {label: "50", v2: 15.75, v21: 10.0}, | |
| {label: "10", v2: 12.50, v21: 7.0} | |
| ] | |
| /*var c20 = "#A6CEE3"; | |
| var c21 = "#B2DF8A"; */ | |
| var c20 = "#1F78B4"; | |
| var c21 = "#33A02C"; | |
| var svg = d3.select("svg"), | |
| width = +svg.attr("width"), | |
| height = +svg.attr("height"), | |
| margin = {top: 20, right: 30, bottom: 40, left: 40}, | |
| radius = 16, | |
| xDomain = [0, 150], | |
| yDomain = ["1000", "500", "100", "50", "10"]; | |
| var color = d3.scaleOrdinal() | |
| .range(d3.schemeCategory10); | |
| var xScale = d3.scaleLinear() | |
| .domain(xDomain) | |
| .range([0, width - margin.left - margin.right]); | |
| var yScale = d3.scaleBand() | |
| .paddingInner(0.5) | |
| .rangeRound([height, 0]) | |
| .domain(yDomain); | |
| var xAxis = d3.axisBottom(xScale); | |
| var yAxis = d3.axisLeft(yScale); | |
| var paddingLeft = 40; | |
| var legendHeight = 50; | |
| var chartContainer = svg | |
| .attr('width', (width + margin.right + margin.left)) | |
| .attr('height', (height + margin.top + margin.bottom + legendHeight)) | |
| .append('g') | |
| .attr('id', 'chartcontainer') | |
| .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'); | |
| /*var xAxisEl = chartContainer.append('g') | |
| .attr('class', 'x axis') | |
| .attr('transform', 'translate(0,' + height + ')') | |
| .call(xAxis)*/ | |
| /*var yAxisEl = chartContainer.append('g') | |
| .attr('class', 'y axis') | |
| .attr('transform', 'translate(' + margin.left + ',' + (legendHeight) + ')') | |
| .call(yAxis); */ | |
| var drawarea = chartContainer.append('g') | |
| .attr('class', 'draw-area') | |
| .attr('width', width) | |
| .attr('height', height) | |
| .attr('transform', 'translate(0,' + legendHeight + ')'); | |
| var tooltip = d3.select("body").append("div").attr("class", "toolTip"); | |
| function legendEl(container, color, label, xPos) { | |
| container.append("rect") | |
| .attr("class", "legend") | |
| .attr("x", xPos) | |
| .attr("height", 20) | |
| .attr("y", 20) | |
| .attr("width", 20) | |
| .attr("fill", color) | |
| container.append("text") | |
| .attr("class", "legend") | |
| .attr("x", xPos + 25) | |
| .attr("y", 20) | |
| .attr("dy", "1.2rem") | |
| .attr("fill", color) | |
| .attr("text-anchor", "start") | |
| .text(label); | |
| } | |
| legendEl(chartContainer, c20, "Old Version", width - 200); | |
| legendEl(chartContainer, c21, "New Version", width - 100); | |
| chartContainer.append("text") | |
| .attr("class", "yAxisLabel") | |
| .attr("x", 0) | |
| .attr("y", 0) | |
| .attr("fill", "#aaa") | |
| .attr("text-anchor", "start") | |
| .text("Number of samples") | |
| .attr('transform', 'translate(-20,' + ((height-20)) + ')rotate(-90)') | |
| chartContainer.append("text") | |
| .attr("class", "xAxisLabel") | |
| .attr("x", 30) | |
| //.attr("y", height + legendHeight + margin.bottom) | |
| .attr("y", legendHeight - 5) | |
| .attr("fill", "#aaa") | |
| .attr("text-anchor", "start") | |
| .text("Time in seconds") | |
| .attr('transform', 'translate(0,0)') | |
| var experiment = drawarea.selectAll(".experiment") | |
| .data(data_1) | |
| .enter().append("g") | |
| .attr("class", "experiment") | |
| experiment.append("text") | |
| .attr("class", "label") | |
| .attr("x", paddingLeft / 2) | |
| .attr("y", function (d) { | |
| return yScale(d.label); | |
| }) | |
| .attr("dy", "2rem") | |
| .attr("fill", "#999") | |
| .attr("text-anchor", "end") | |
| .text(function (d) { | |
| return d.label | |
| }); | |
| function fillTmpl(label,v2,v21){ | |
| return '<h4>'+label + ' samples</h4><h4 style="margin-bottom:4px">'+Math.round((Math.abs(v21 - v2) / v2) * 1000) / 10 + '% Faster </h4><span class="v2">Old Version: ' + v2 + 's <br/></span><span class="v21">New Version: '+ v21 + 's <br/></span>' | |
| } | |
| experiment.append("rect") | |
| .attr("class", "bar") | |
| .attr("x", paddingLeft) | |
| .attr("height", 20) | |
| .attr("y", function (d) { | |
| return yScale(d.label); | |
| }) | |
| .attr("width", function (d) { | |
| return xScale(d.v2); | |
| }) | |
| .attr("fill", c20) | |
| .on("mousemove", function(d){ | |
| tooltip | |
| .style("left", d3.event.pageX + "px") | |
| .style("top", d3.event.pageY - 80 + "px") | |
| .style("display", "inline-block") | |
| .html(fillTmpl(d.label,d.v2,d.v21)); | |
| }) | |
| .on("mouseout", function(d){ tooltip.style("display", "none");}); | |
| experiment.append("text") | |
| .attr("x", function (d) { | |
| return xScale(d.v2) + paddingLeft | |
| }) | |
| .attr("y", function (d) { | |
| return yScale(d.label); | |
| }) | |
| .attr("dy", "1.1rem") | |
| .attr("dx", "-0.2rem") | |
| .attr("fill", "#fff") | |
| .attr("text-anchor", "end") | |
| .text(function (d) { | |
| return d.v2 | |
| }); | |
| experiment.append("rect") | |
| .attr("class", "bar") | |
| .attr("x", paddingLeft) | |
| .attr("height", 20) | |
| .attr("y", function (d) { | |
| return yScale(d.label) + 25; | |
| }) | |
| .attr("width", function (d) { | |
| return xScale(d.v21); | |
| }) | |
| .attr("fill", c21) | |
| .on("mousemove", function(d){ | |
| tooltip | |
| .style("left", d3.event.pageX + "px") | |
| .style("top", d3.event.pageY - 80 + "px") | |
| .style("display", "inline-block") | |
| .html(fillTmpl(d.label,d.v2,d.v21)); | |
| }) | |
| .on("mouseout", function(d){ tooltip.style("display", "none");}) | |
| experiment.append("text") | |
| .attr("x", function (d) { | |
| return xScale(d.v21) + paddingLeft | |
| }) | |
| .attr("y", function (d) { | |
| return yScale(d.label) + 25; | |
| }) | |
| .attr("dy", "1.1rem") | |
| .attr("dx", "-0.2rem") | |
| .attr("fill", "#fff") | |
| .attr("text-anchor", "end") | |
| .text(function (d) { | |
| return d.v21 | |
| }); | |
| experiment.append("text") | |
| .attr("x", function (d) { | |
| return xScale(d.v21) + paddingLeft + 10 | |
| }) | |
| .attr("y", function (d) { | |
| return yScale(d.label) + 25; | |
| }) | |
| .attr("dy", "1.1rem") | |
| .attr("dx", "-0.2rem") | |
| .attr("fill", c21) | |
| .attr("text-anchor", "start") | |
| .text(function (d) { | |
| return Math.round((Math.abs(d.v21 - d.v2) / d.v2) * 1000) / 10 + "%" | |
| }); | |
| chartContainer.append("line") // attach a line | |
| .style("stroke", "#999") // colour the line | |
| .style("stroke-width", "0.5") // colour the line | |
| .attr("x1", paddingLeft - 10) // x position of the first end of the line | |
| .attr("y1", legendHeight) // y position of the first end of the line | |
| .attr("x2", paddingLeft - 10) // x position of the second end of the line | |
| .attr("y2", height+legendHeight + 15); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment