Last active
December 18, 2015 16:19
-
-
Save boertel/5810663 to your computer and use it in GitHub Desktop.
Market Basket Lift
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> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title></title> | |
| <link rel="stylesheet" href="//punchtab.github.io/Punchdation/static/css/fonts.css" /> | |
| <style> | |
| body { | |
| font-family: "Bariol"; | |
| } | |
| .members { | |
| fill: #3C83B8; | |
| } | |
| .anonymous { | |
| fill: #00B06D; | |
| } | |
| .overlay { | |
| fill: url(#diagonalHatch); | |
| opacity: 0.5; | |
| } | |
| text { | |
| fill: #fff; | |
| font-weight: bold; | |
| font-size: 1.3em; | |
| } | |
| text.upper { | |
| fill: #000; | |
| } | |
| .line { | |
| stroke: #9B9B9B; | |
| stroke-width: 1px; | |
| stroke-dasharray: 5,5; | |
| } | |
| .label { | |
| fill: #9B9B9B; | |
| font-style: italic; | |
| } | |
| .percentage { | |
| fill: #000; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
| <script type="text/javascript"> | |
| /* | |
| * http://bl.ocks.org/mbostock/3885304 | |
| */ | |
| var margin = {top: 20, right: 20, bottom: 20, left: 20}, | |
| width = 560 - margin.left - margin.right, | |
| height = 270 - margin.top - margin.bottom; | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width + margin.left + margin.right) | |
| .attr("height", height + margin.top + margin.bottom) | |
| .append("g") | |
| .attr("transform", "translate(" + margin.left + ", " + margin.top + ")") | |
| d3.select("svg").append('defs') | |
| .append("pattern") | |
| .attr("width", 4) | |
| .attr("height", 4) | |
| .attr("id", "diagonalHatch") | |
| .attr("patternUnits", "userSpaceOnUse") | |
| .append("g") | |
| .style("fill", "none") | |
| .style("stroke", "rgba(0, 0, 0, 0.7)") | |
| .style("stroke-width", "1") | |
| .append("path") | |
| .attr("d", "M-1,1 l2,-2 M0,4 l4,-4 M3,5 l2,-2"); | |
| function random() { | |
| return Math.random() * 100; | |
| } | |
| var dataset = { | |
| anonymous: random(), | |
| members: random(), | |
| } | |
| var total = d3.sum(d3.values(dataset)); | |
| var data = d3.entries(dataset); | |
| var y = d3.scale.linear() | |
| .domain([0, d3.max(data, function (d) { return d.value; })]) | |
| .range([height, 0]); | |
| var bar = svg.selectAll(".bar") | |
| .data(data) | |
| .enter() | |
| .append("g") | |
| .attr("class", function (d) { return "bar " + d.key; }) | |
| .attr("transform", function (d, i) { | |
| return "translate(" + ((i * 115) + (i * 25)) + ", " + y(d.value) + ")"; | |
| }) | |
| bar.append("rect") | |
| .attr("x", 0) | |
| .attr("width", 115) | |
| .attr("height", function (d) { return height - y(d.value); }); | |
| var overlay = bar.append("rect") | |
| .attr("class", "overlay") | |
| .attr("x", 0) | |
| .attr("width", 115) | |
| .attr("height", 0) | |
| bar.append("text") | |
| .attr("class", function (d) { return (height - y(d.value) < 40) ? "upper" : "lower"; }) | |
| .attr("dy", "1em") | |
| .attr("y", function (d) { return (height - y(d.value) < 40) ? -30 : 6; }) | |
| .attr("x", 20 + 37) | |
| .attr("text-anchor", "middle") | |
| .text(function (d) { return "$" + d.value.toFixed(2); }); | |
| // | |
| var legend = svg.append("g") | |
| .attr("class", "legend"); | |
| var line = legend.selectAll(".line") | |
| .data(data) | |
| .enter() | |
| .append("line") | |
| .attr("class", function (d) { return "line " + d.key; }) | |
| .attr("y1", 0) | |
| .attr("y2", 0) | |
| .attr("x1", 0) | |
| .attr("x2", width) | |
| var border = legend.append("line") | |
| .attr("y1", 0) | |
| .attr("y2", 0) | |
| .attr("x1", width - 7) | |
| .attr("x2", width - 7) | |
| .style("stroke-width", "4px") | |
| .style("stroke", "#9B9B9B") | |
| var transitionDuration = 1500, | |
| transitionDelay = 1500, | |
| transitionFunction = "elastic-in"; | |
| overlay.transition() | |
| .ease(transitionFunction) | |
| .attr("height", function (d, i) { return y(data[(i ? 0 : 1)].value); }) | |
| .duration(transitionDuration) | |
| .delay(transitionDelay) | |
| line.transition() | |
| .ease(transitionFunction) | |
| .attr("y1", function (d) { return y(d.value); }) | |
| .attr("y2", function (d) { return y(d.value); }) | |
| .duration(transitionDuration) | |
| .delay(transitionDelay) | |
| border.transition() | |
| .ease(transitionFunction) | |
| .attr("y1", y(data[0].value)) | |
| .attr("y2", y(data[1].value)) | |
| .duration(transitionDuration) | |
| .delay(transitionDelay) | |
| var format = d3.format("0.2%"); | |
| var percentage = legend.append("text") | |
| .attr("class", "percentage") | |
| .attr("x", 350) | |
| .attr("y", 30) | |
| .text(format(data[0].value / total)); | |
| var label = legend.append("text") | |
| .attr("class", "label") | |
| .attr("x", 300) | |
| .attr("y", 60) | |
| .text("Market Basket Lift") | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment