Last active
May 22, 2018 19:27
-
-
Save Zhenmao/5bf49dc91a45311417aabb30cde4e989 to your computer and use it in GitHub Desktop.
Triangle Chart
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> | |
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <title>Triangle Chart</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <script src="https://d3js.org/d3.v5.min.js"></script> | |
| <style> | |
| text { | |
| font-family: sans-serif; | |
| font-size: 12px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="chart"></div> | |
| <script> | |
| //////////////////////////////////////////////////////////// | |
| //// Initial Setup ///////////////////////////////////////// | |
| //////////////////////////////////////////////////////////// | |
| var data = [ | |
| { variable: "Shadow Economy", value: 2.7 }, | |
| { variable: "Shadow Economy", value: 3.5 } | |
| ]; | |
| // Chart dimensions | |
| var margin = { top: 20, right: 20, bottom: 40, left: 20 }; | |
| var width = 240 - margin.left - margin.right; | |
| var height = 500 - margin.top - margin.bottom; | |
| // Scales | |
| // X scale to position the triangle | |
| var x = d3.scalePoint() | |
| .padding(0.5) | |
| .domain(["Shadow Economy"]) | |
| .range([0, width]); | |
| // Y scale to determine the triangle height | |
| var y = d3.scaleLinear() | |
| .domain([0, 10]) | |
| .range([height, 0]); | |
| // Color scale for value labels | |
| var labelColor = d3.scaleOrdinal() | |
| .domain([0, 1]) | |
| .range(["#FFF", "#828282"]) | |
| // SVG containers | |
| var svg = d3.select("#chart").append("svg") | |
| .attr("width", width + margin.left + margin.right) | |
| .attr("height", height + margin.top + margin.bottom); | |
| var g = svg.append("g") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| //////////////////////////////////////////////////////////// | |
| //// Render Chart ////////////////////////////////////////// | |
| //////////////////////////////////////////////////////////// | |
| // Render triangles | |
| g.selectAll(".triangle-polygon") | |
| .data(data) | |
| .enter().append("polygon") | |
| .attr("class", "triangle-polygon") | |
| .attr("points", function (d) { | |
| return (x(d.variable) - x.step() / 2) + "," + y(0) + " " + // Left vertex | |
| x(d.variable) + "," + y(d.value) + " " + // Top vertex | |
| (x(d.variable) + x.step() / 2) + "," + y(0); // Right vertex | |
| }) | |
| .attr("fill", "#609FBC") | |
| .attr("fill-opacity", 0.5); | |
| // Render value labels | |
| g.selectAll(".triangle-label") | |
| .data(data) | |
| .enter().append("text") | |
| .attr("class", "triangle-label") | |
| .attr("x", function (d) { | |
| return x(d.variable); | |
| }) | |
| .attr("y", function (d, i) { | |
| if (i === 0) { | |
| return y(d.value) + 30; | |
| } else { | |
| return y(d.value) - 20; | |
| } | |
| }) | |
| .attr("dy", "0.35em") | |
| .attr("text-anchor", "middle") | |
| .attr("fill", function (d, i) { | |
| return labelColor(i); | |
| }) | |
| .text(function (d) { | |
| return "%" + d.value; | |
| }); | |
| // Render variable labels | |
| g.append("text") | |
| .datum("Shadow Economy") | |
| .attr("x", function (d) { | |
| return x(d); | |
| }) | |
| .attr("y", height + 20) | |
| .attr("dy", "0.35em") | |
| .attr("text-anchor", "middle") | |
| .attr("fill", "#828282") | |
| .text(function (d) { | |
| return d; | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment