Built with blockbuilder.org
Last active
February 18, 2020 00:13
-
-
Save yi-ye-zhi-qiu/a1ba6eac83c256acc9e72e3027063172 to your computer and use it in GitHub Desktop.
fresh block
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: mit |
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
| //Idea heavily inspired by Michael Stanaland's http://bl.ocks.org/mstanaland/6100713. | |
| //Written by an absolute begineer to coding/d3js. | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <title>d3.js learning</title> | |
| <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
| <style type="text/css"> | |
| svg { | |
| font: 10px sans-serif; | |
| shape-rendering: crispEdges; | |
| } | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: #000; | |
| } | |
| path.domain { | |
| stroke: none; | |
| } | |
| .y .tick line { | |
| stroke: #dddddd; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script type="text/javascript"> | |
| // Setup svg using Bostock's margin convention | |
| var margin = {top: 25, right: 160, bottom: 40, left: 30}; | |
| var width = 860 - margin.left - margin.right, | |
| height = 500 - 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 + ")"); | |
| /* Data in strings like it would be if imported from a csv */ | |
| var data = [ | |
| { year: "person1", 小虎: "01", 小明: "3", 小兔兔: "4", 小桃子: "10", 小陈: "5"}, | |
| { year: "person2", 小虎: "02", 小明: "5", 小兔兔: "3", 小桃子: "9", 小陈: "6"}, | |
| ]; | |
| // Transpose the data into layers | |
| var dataset = d3.layout.stack()(["小虎", "小明", "小兔兔", "小桃子", "小陈"].map(function(fruit) { | |
| return data.map(function(d) { | |
| return {x: d.year, y: +d[fruit]}; | |
| }); | |
| })); | |
| // Set x, y and colors | |
| var x = d3.scale.ordinal().rangeRoundBands([1, width],0.05); | |
| var xAxis = d3.svg.axis().scale(x).orient("bottom"); | |
| x.domain(data.map(function(d) { return d.year; })); | |
| var y = d3.scale.linear() | |
| .domain([0, d3.max(dataset, function(d) { return d3.max(d, function(d) { return d.y0 + d.y; }); })]) | |
| .range([height, 0]); | |
| var colors = ["#003f5c", "#58508d", "#bc5090", "#ff6361","#ffa600"]; | |
| // Define and draw axes | |
| var yAxis = d3.svg.axis() | |
| .scale(y) | |
| .orient("left") | |
| .ticks(5) | |
| .tickSize(-width, 0, 0) | |
| .tickFormat( function(d) { return d } ); | |
| svg.append("g") | |
| .attr("class", "y axis") | |
| .call(yAxis); | |
| svg.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(xAxis); | |
| svg.append("text") | |
| .attr("transform", | |
| "translate(" + (width/2) + " ," + | |
| (height + margin.top + 5) + ")") | |
| .style("text-anchor", "middle") | |
| .text("Boss (老板)"); | |
| svg.append("text") | |
| .attr("transform", "rotate(-90)") | |
| .attr("y", 0 - margin.left) | |
| .attr("x",0 - (height / 2)) | |
| .attr("dy", "1em") | |
| .style("text-anchor", "middle") | |
| .text("# of mistakes"); | |
| // Create groups for each series, rects for each segment | |
| var groups = svg.selectAll("g.cost") | |
| .data(dataset) | |
| .enter().append("g") | |
| .attr("class", "cost") | |
| .style("fill", function(d, i) { return colors[i]; }); | |
| var rect = groups.selectAll("rect") | |
| .data(function(d) { return d; }) | |
| .enter() | |
| .append("rect") | |
| .attr("x", function(d) { return x(d.x); }) | |
| .attr("y", function(d) { return y(d.y0 + d.y); }) | |
| .attr("height", function(d) { return y(d.y0) - y(d.y0 + d.y); }) | |
| .attr("width", x.rangeBand()) | |
| .on("mouseover", function() { tooltip.style("display", null); }) | |
| .on("mouseout", function() { tooltip.style("display", "none"); }) | |
| .on("mousemove", function(d) { | |
| var xPosition = d3.mouse(this)[0] - 15; | |
| var yPosition = d3.mouse(this)[1] - 25; | |
| tooltip.attr("transform", "translate(" + xPosition + "," + yPosition + ")"); | |
| tooltip.select("text").text(d.y); | |
| }); | |
| // Draw legend | |
| var legend = svg.selectAll(".legend") | |
| .data(colors) | |
| .enter().append("g") | |
| .attr("class", "legend") | |
| .attr("transform", function(d, i) { return "translate(30," + i * 19 + ")"; }); | |
| legend.append("rect") | |
| .attr("x", width - 18) | |
| .attr("width", 18) | |
| .attr("height", 18) | |
| .style("fill", function(d, i) {return colors.slice().reverse()[i];}); | |
| legend.append("text") | |
| .attr("x", width + 5) | |
| .attr("y", 9) | |
| .attr("dy", ".35em") | |
| .style("text-anchor", "start") | |
| .text(function(d, i) { | |
| switch (i) { | |
| case 0: return "小陈"; | |
| case 1: return "小桃子"; | |
| case 2: return "小兔兔"; | |
| case 3: return "小明"; | |
| case 4: return "小虎"; | |
| } | |
| }); | |
| // Prep the tooltip bits, initial display is hidden | |
| var tooltip = svg.append("g") | |
| .attr("class", "tooltip") | |
| .style("display", "none"); | |
| tooltip.append("rect") | |
| .attr("width", 30) | |
| .attr("height", 20) | |
| .attr("fill", "white") | |
| .style("opacity", 0.5); | |
| tooltip.append("text") | |
| .attr("x", 15) | |
| .attr("dy", "1.2em") | |
| .style("text-anchor", "middle") | |
| .attr("font-size", "10px") | |
| .attr("font-weight", "bold"); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment