Old school D3 from simpler times

All examples By author By category About

thulse

Full window Github gist

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>

xxxxxxxxxx
 
<!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