Skip to content

Instantly share code, notes, and snippets.

@Zhenmao
Last active May 22, 2018 19:27
Show Gist options
  • Save Zhenmao/5bf49dc91a45311417aabb30cde4e989 to your computer and use it in GitHub Desktop.
Save Zhenmao/5bf49dc91a45311417aabb30cde4e989 to your computer and use it in GitHub Desktop.
Triangle Chart
<!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