Built with blockbuilder.org
Created
February 28, 2020 23:42
-
-
Save yi-ye-zhi-qiu/ba037fdea57f01d9b94664833f2455d5 to your computer and use it in GitHub Desktop.
example
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
| <!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"> | |
| 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 + ")"); | |
| var data = [ | |
| { orchard: "Orchard1", apple: "2", blueberry: "2", lettuce: "1"}, | |
| { orchard: "Orchard2", apple: "3", blueberry: "1", lettuce: "2"}, | |
| { orchard: "Orchard3", apple: "3", blueberry: "", lettuce: "1"} | |
| ]; | |
| var dataset = d3.layout.stack()(["apple", "blueberry", "lettuce"].map(function(fruit) { | |
| return data.map(function(d) { | |
| return {x: d.orchard, y: +d[fruit]}; | |
| }); | |
| })); | |
| 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.orchard; })); | |
| 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 = ["#ccffff", "#ccaaff","#ffaacc"]; | |
| 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("2019-2020"); | |
| 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 fruit"); | |
| var groups = svg.selectAll("g.fruit") | |
| .data(dataset) | |
| .enter().append("g") | |
| .attr("class", "fruit") | |
| .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("height", function(d) { return y(d.y0) - y(0); }) | |
| .attr("y", function(d) { return y(0); }) | |
| .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); | |
| }); | |
| svg.selectAll("rect") | |
| .transition() | |
| .duration(800) | |
| .attr("y", function(d) { return y(d.y0 + d.y); }) | |
| .attr("height", function(d) { return y(d.y0) - y(d.y0 + d.y); }) | |
| .delay(function(d,i){console.log(i) ; return(i*90)}) | |
| 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 "apple" | |
| case 1: return "blueberry" | |
| case 2: return "lettuce" | |
| } | |
| }); | |
| 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