| license: mit |
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.
forked from thulse's block: Triangle Pentagon
| <!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": 400, "y": 100}, { "x": 600, "y": 100}, | |
| { "x": 500, "y": 150},{ "x": 400, "y": 100}, | |
| { "x": 400, "y": 100}, { "x": 600, "y": 100}, | |
| { "x": 500, "y": 200},{ "x": 400, "y": 100}]; | |
| //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> |