Triangle Pentagon

This block was inspired by examples of data visualization marks and channels from a chapter in Tamara Munzner's book: Visualizaion Analysis and Design.

Created using a d3.svg path generator from this example.

Built with blockbuilder.org

Munzner, T. (2014). Visualization analysis and design. CRC press.

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
  
//The data for our line
 var lineData = [ { "x": 500,   "y": 100},  { "x": 500,  "y": 161.8},
                  { "x": 448.63,  "y": 151.37},{"x":500, "y":100}, {"x":551.37, "y":151.37},{"x":500, "y":161.8},{"x":544.285, "y":206.085},{"x":551.37, "y":151.37},{"x": 500,  "y": 161.8},{"x":455.715,"y":206.085},{"x": 448.63,"y": 151.37},{"x": 500,  "y": 161.8},{"x":455.715,"y":206.085},{"x":544.285, "y":206.085}];
 
 //This is the accessor function we talked about above
 var line = d3.line()
                          .x(function(d) { return d.x; })
                          .y(function(d) { return d.y; })
                         ;

//The SVG Container
var svgContainer = d3.select("body").append("svg")
.attr("width", 1000)
 .attr("height", 1000)
//The line SVG Path we draw
var lineGraph = svgContainer.append("path")
                            .attr("d", line(lineData))
                            .attr("stroke", "blue")
                           .attr("stroke-width", 2)
                            .attr("fill", "none");
  </script>
</body>

https://d3js.org/d3.v4.min.js