Skip to content

Instantly share code, notes, and snippets.

@Guerino1

Guerino1/index.html

Last active August 29, 2015 14:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Guerino1/d3ccbb29edf2c12de0b8 to your computer and use it in GitHub Desktop.
Save Guerino1/d3ccbb29edf2c12de0b8 to your computer and use it in GitHub Desktop.
Download ZIP
D3 Paths or Lines Embedded in HTML div elements
Raw
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en-US"
lang="en-US">
<head profile="http://www.w3.org/2005/10/profile">
<title>D3 Path Examples</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="Description" content="This page tries to mix charts with html formatting and layout constructs." />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="-l" />
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.4.5"></script>
<script type="text/javascript">
d3.select(self.frameElement).style("height", "1800px");
d3.select(self.frameElement).style("width", "1200px");
// Data Used for this example...
var lineSet1 = [ // Diagonal line
{ "x": 0, "y": 0},
{ "x": 50, "y": 50}];
var lineSet2 = [ // Horizontal line
{ "x": 0, "y": 25},
{ "x": 50, "y": 25}];
var multipointPathSet = [
{ "x": 4, "y": 5},
{ "x": 10, "y": 15},
{ "x": 20, "y": 15},
{ "x": 30, "y": 15},
{ "x": 40, "y": 25},
{ "x": 50, "y": 5},
{ "x": 60, "y": 43},
{ "x": 70, "y": 30},
{ "x": 80, "y": 60},
{ "x": 90, "y": 0},
{ "x": 100, "y": 30}];
var triangleSetA = [
{ "x": 0, "y": 0},
{ "x": 0, "y": 50},
{ "x": 50, "y": 50},
{ "x": 0, "y": 0}];
var triangleSetB = [
{ "x": 4, "y": 2},
{ "x": 4, "y": 54},
{ "x": 54, "y": 54},
{ "x": 4, "y": 4}];
var rectangleSetA = [
{ "x": 0, "y": 0},
{ "x": 0, "y": 50},
{ "x": 70, "y": 50},
{ "x": 70, "y": 0},
{ "x": 0, "y": 0}];
var rectangleSetB = [
{ "x": 4, "y": 4},
{ "x": 4, "y": 52},
{ "x": 70, "y": 52},
{ "x": 70, "y": 8},
{ "x": 4, "y": 8}];
function drawStaticPath( dataSet, selectString, color, fill, strokeWidth, svgWidth, svgHeight, interpolationType ) {
//This is the accessor function we talked about above
var lineFunction = d3.svg.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.interpolate(interpolationType);
//The SVG Container
var svgContainer = d3.select(selectString).append("svg")
.attr("width", svgWidth)
.attr("height", svgHeight);
//The line Path we draw
var lineGraph = svgContainer.append("path")
.attr("d", lineFunction(dataSet))
.attr("stroke", color)
.attr("stroke-width", strokeWidth*2)
.attr("fill", fill);
}
// This function is meant to transition only the origin point of a line.
function drawTransitioningOriginPath( dataSet, selectString, color, fill, strokeWidth, svgWidth, svgHeight, interpolationType ) {
//document.writeln("TEST"); // Write or print to console
var newData = dataSet.slice(0); // Copy Original array to changeable local array
var getNewData = function(){
if (newData[0].x == 0){
newData[0].x = 400;
}
//else{
//newData[0].x = 0;
//}
return newData;
};
var lineFunction = d3.svg.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.interpolate(interpolationType);
var svgContainer = d3.select(selectString).append("svg")
.attr("width", svgWidth)
.attr("height", svgHeight);
var lineGraph = svgContainer.append("path")
.datum(dataSet)
.attr("d", lineFunction)
.attr("stroke", color)
.attr("stroke-width", strokeWidth*2)
.attr("fill", fill);
lineGraph.datum(getNewData())
.transition()
.duration(6000)
.attr("d", lineFunction);
}
// This function is meant to transition only the origin point of a line.
function drawElongatingPath( dataSet, selectString, color, fill, strokeWidth, svgWidth, svgHeight, interpolationType ) {
//document.writeln("TEST"); // Write or print to console
var newData = dataSet.slice(0); // Copy original array to new changeable array
var getNewData = function(){
// A more sophisticated example would calculate the slope and extend along that slope.
// (Possibly via Pythagorean's Theorem. This example already "knows" the line's
// coordinates and simply extends, assuming a horizontal slope.
newData[1].x = newData[1].x + 400;
return newData;
};
var lineFunction = d3.svg.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.interpolate(interpolationType);
var svgContainer = d3.select(selectString).append("svg")
.attr("width", svgWidth)
.attr("height", svgHeight);
var lineGraph = svgContainer.append("path")
.datum(dataSet)
.attr("d", lineFunction)
.attr("stroke", color)
.attr("stroke-width", strokeWidth*2)
.attr("fill", fill);
lineGraph.datum(getNewData())
.transition()
.duration(6000)
.attr("d", lineFunction);
}
// This function is meant to transition the top of the Triangle.
function drawTransitioningTriangle( dataSet, selectString, color, fill, strokeWidth, svgWidth, svgHeight, interpolationType ) {
//document.writeln("TEST"); // Write or print to console
var newData = dataSet.slice(0); // Copy original array to changeable local array
var getNewData = function(){
if (newData[0].x == 4){
newData[0].x = 100;
newData[3].x = 100;
}
//else{
//newData[0].x = 0;
//}
return newData;
};
var lineFunction = d3.svg.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.interpolate(interpolationType);
var svgContainer = d3.select(selectString).append("svg")
.attr("width", svgWidth)
.attr("height", svgHeight);
var lineGraph = svgContainer.append("path")
.datum(dataSet)
.attr("d", lineFunction)
.attr("stroke", color)
.attr("stroke-width", strokeWidth*2)
.attr("fill", fill);
lineGraph.datum(getNewData())
.transition()
.duration(6000)
.attr("d", lineFunction);
}
// This function is meant to transition only the right side of the rectangle.
function drawTransitioningRectangle( dataSet, selectString, color, fill, strokeWidth, svgWidth, svgHeight, interpolationType ) {
//document.writeln("TEST"); // Write or print to console
var newData = dataSet.slice(0); // Copy original array to new changeable array
var getNewData = function(){
if (newData[2].x == 70){
newData[2].x = 396;
newData[3].x = 396;
}
//else{
//newData[0].x = 0;
//}
return newData;
};
var lineFunction = d3.svg.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.interpolate(interpolationType);
var svgContainer = d3.select(selectString).append("svg")
.attr("width", svgWidth)
.attr("height", svgHeight);
var lineGraph = svgContainer.append("path")
.datum(dataSet)
.attr("d", lineFunction)
.attr("stroke", color)
.attr("stroke-width", strokeWidth*2)
.attr("fill", fill);
lineGraph.datum(getNewData())
.transition()
.duration(6000)
.attr("d", lineFunction);
}
</script>
<style type="text/css">
svg {
font: 10px sans-serif;
display: block;
}
</style>
<STYLE type="text/css">
div.div_Header {
width: 100%;
border:2px solid White;
border-radius:7px;
background: WhiteSmoke;
font: bold 14px Arial;
font-family:Arial, Helvetica, sans-serif;
color:WhiteSmoke;
text-align:center;
}
h1.h1_BodyHeader { text-align:center;
font: bold 1.5em Arial;
}
h2.h2_LeftMenuHeader {
text-align:center;
font: bold 1.2em Arial;
}
h3.h3_Body {
text-align:center;
}
p.p_Red {
color:Red;
}
table.table_Header {
width: 100%;
text-align:center;
}
td.td_HeaderLeft {
text-align:left;
}
td.td_HeaderRight {
text-align:right;
}
div.div_Menu {
width: 100%;
border:2px solid White;
border-radius:7px;
background: MidnightBlue;
font: bold 14px Arial;
font-family:Arial, Helvetica, sans-serif;
color:White;
text-align:center;
}
p.p_Left {
font-family:Arial, Helvetica, sans-serif;
color:Black;
text-align:left;
padding-left: 5px;
font: normal 14px Arial;
}
table.table_Body { width: 100%;
height: 100%;
padding: 0;
}
td.td_BodyLeft {
vertical-align: top;
width: 250px;
height: 100%;
padding: 0;
}
td.td_BodyRight {
vertical-align: top;
}
td.td_BodyRight {
vertical-align: top;
}
li.li_LeftMenu {
text-align:left;
font: normal 14px Arial;
}
a.a_LeftMenuNoUnderLine {
text-decoration: none;
}
div.div_Body {
height: 100%;
width: 100%;
position: relative;
border:2px solid White;
border-radius:7px;
background: WhiteSmoke;
font: bold 14px Arial;
font-family:Arial, Helvetica, sans-serif;
color:Black;
text-align:center;
}
div.div_Footer {
width: 100%;
border:2px solid White;
border-radius:7px;
background: MidnightBlue;
font: bold 14px Arial;
font-family:Arial, Helvetica, sans-serif;
color:White;
text-align:center;
}
p.p_if4itMessage {
width: 100%; background: White;
font: bold .75em Arial;
font-family:Arial, Helvetica, sans-serif;
color:GoldenRod;
text-align:center;
}
.menuButton{
background-color: MidnightBlue;
}
.menuButton li{
height: 100%;
list-style: none;
display: inline;
}
.menuButton li a{
height: 100%;
padding: 3px 0.5em;
text-decoration: none;
color: White;
background-color: MidnightBlue;
border: 2px solid MidnightBlue;
}
.menuButton li a:hover{
height: 100%;
color: MidnightBlue;
background-color: White;
border-style: outset;
background-color: White;
}
.menuButton li a:active{
height: 100%;
border-style: inset;
color: MidnightBlue;
background-color: White;
}
.menuButton li a.disabled{
height: 100%;
padding: 3px 0.5em;
text-decoration: none;
color: MidnightBlue; background-color: White;
border: 2px solid MidnightBlue;
border-style: inset;
border-color: White;
}
</STYLE>
<STYLE type="text/css">
div.div_RootBody {
position: relative;
border:2px solid White;
border-radius:7px;
background: WhiteSmoke;
font: normal 14px Arial;
font-family:Arial, Helvetica, sans-serif;
color:Black;
padding: 0px 1em;
text-align:left;
}
</STYLE>
<!--[if gt IE 7]>
<style>body { overflow-y:scroll; } </style>
<![endif]-->
</head>
<body>
<div>
<h1 style="text-align:center; font: bold 1.7em Arial;"><a href="http://www.if4it.com">The International Foundation for Information Technology</a> (<a href="http://www.if4it.com">IF4IT</a>)</h1>
</div>
<div class="div_Menu">
<ul class="menuButton">
<li><a href="http://www.if4it.com">HOME</a></li>
<li><a href="http://www.if4it.com/aboutUs.html">ABOUT US</a></li>
<li><a href="http://www.if4it.com/products_and_services.html">PRODUCTS &amp; SERVICES</a></li>
<li><a href="http://www.if4it.com/resources.html">RESOURCES</a></li>
<li><a href="http://www.if4it.com/contactUs.html">CONTACT US</a></li>
<li><a href="http://www.if4it.com/contactUs.html">US</a></li>
</ul>
</div>
<table class="table_Body">
<tr>
<td class="td_BodyLeft">
<div class="div_Body">
<h2 class="h2_LeftMenuHeader">Sample Left Menu Links</h2>
<ul>
<li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="http://nounz.if4it.com/Nouns/Applications/Dashboard.html">See D3.js Bar Charts and Pie Charts in Dashboards</a></li>
<li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="http://nounz.if4it.com/Nouns/Applications/A_Application_1.NodeCluster.html">See D3.js Force Directed Graphs in Node Cluster Diagrams</a></li>
<li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="http://nounz.if4it.com/Nouns/Capabilities/Horizontal_Block_Partition.html">See D3.js Horizontal Block Browser</a></li>
<li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="http://nounz.if4it.com/Nouns/Applications/noun_type_relationship_density_table.html">See D3.js Elements in Sortable Tables</a></li>
<li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="http://www.if4it.com">IF4IT Home</a></li>
<li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="http://www.if4it.com/disciplines.html">IF4IT Disciplines</a></li>
<li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="http://www.if4it.com/glossary.html">IF4IT Glossary</a></li>
<li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="http://www.if4it.com/taxonomy.html">IF4IT Taxonomies</a></li>
<li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="http://bl.ocks.org/Guerino1/3169420">D3 Radial Wheel</a></li>
</ul>
<p class="p_Left">This is dummy paragraph 1 text that would go in this section of the page.</p>
<p class="p_Left">This is dummy paragraph 2 text that would go in this section of the page.</p>
<p class="p_Left">This is dummy paragraph 3 text that would go in this section of the page.</p>
<p class="p_Left">This is dummy paragraph 4 text that would go in this section of the page.</p>
<p class="p_Left">This is dummy paragraph 5 text that would go in this section of the page.</p>
<ul>
<li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="http://www.if4it.com">IF4IT Home</a></li>
<li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="http://www.if4it.com/disciplines.html">IF4IT Disciplines</a></li>
<li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="http://www.if4it.com/glossary.html">IF4IT Glossary</a></li>
<li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="http://www.if4it.com/taxonomy.html">IF4IT Taxonomies</a></li>
</ul>
<p class="p_Left">This is dummy paragraph 1 text that would go in this section of the page.</p>
<p class="p_Left">This is dummy paragraph 2 text that would go in this section of the page.</p>
<p class="p_Left">This is dummy paragraph 3 text that would go in this section of the page.</p>
<p class="p_Left">This is dummy paragraph 4 text that would go in this section of the page.</p>
<p class="p_Left">This is dummy paragraph 5 text that would go in this section of the page.</p>
</div>
</td>
<td class="td_BodyRight">
<div class="div_RootBody">
<h1 style="text-align:center; font: bold 1.5em Arial;">D3 Based Paths (or Lines) Embedded in an HTML Page</h1>
<p>This example is meant to act as a tutorial that helps understand how to use and work with D3 paths, within an HTML document. It attempts to segment each example into small and contained HTML div elements, while trying to show different traits and utilizations for the d3.svg.line() path generator. Hopefully, you'll find it useful in your attempts to learn and use D3.</p>
<p>If you'd like to understand the code, simply open up the source for the HTML page and search for the title of the HTML div section that you're interested in. The page source is partitioned into four (4) distinct areas... 1) The data, in the form of coordinate objects; 2) The D3 Javascript code/functions; 3) The HTML Body that includes each HTML div element; and 4) The Javascript function calls that correlate with each appropriate HTML div element.</p>
<p>NOTE: The examples on this page are intended to grow and improve, over time, so please always feel free to check back for and provide feedback on improvements.</b>
</div>
<div class="div_RootBody" id="simple_line">
<h3>Simple Linear Path</h3>
<p>This example creates a simple diagonal line, where the origin is the upper left of the diagonal and the end point is the lower right of the diagonal.
<div class="simple_line_path"></div>
</div>
<div class="div_RootBody" id="simple_line_twice">
<h3>Calling Simple Linear Path Function Twice in One HTML Div</h3>
<p>Notice how a second SVG canvas gets created and appended at the bottom.</p>
<div class="simple_line_twice_path"></div>
</div>
<table class="table_Header">
<tr>
<td width="50%" height="100%">
<div class="div_RootBody" id="one_end_line_transition">
<h3>Transition The Origin End (or Top) of Path</h3>
<div class="one_end_line_transition_path"></div>
</div>
</td>
<td width="50%" height="100%">
<div class="div_RootBody" id="elongate_line_transition">
<h3>Elongate or Extend a Path</h3>
<div class="elongate_line_transition_path"></div>
</div>
</td>
</tr>
</table>
<table class="table_Header">
<tr>
<td width="50%" height="100%">
<div class="div_RootBody" id="simple_triangle">
<h3>Closed Path That Creates a Triangle</h3>
<p>Notice the clipping of the first triangle's stroke, along the edges of the SVG Canvas. This can be fixed by offsetting your data away from edges of the SVG canvas, as depicted with the second triangle.</p>
<div class="simple_triangle_path"></div>
</div>
</td>
<td width="50%" height="100%">
<div class="div_RootBody" id="simple_rectangle">
<h3>Closed Path That Creates a Box or Rectangle</h3>
<p>Notice the clipping of the first rectangle's stroke, along the edges of the SVG Canvas. This can be fixed by offsetting your data away from edges of the SVG canvas, as depicted with the second rectangle.</p>
<div class="simple_rectangle_path"></div>
</div>
</td>
</tr>
</table>
<table class="table_Header">
<tr>
<td width="50%" height="100%">
<div class="div_RootBody" id="transitioning_triangle">
<h3>Transitioning the Top Point of a Triangle</h3>
<div class="transitioning_triangle_path"></div>
</div>
</td>
<td width="50%" height="100%">
<div class="div_RootBody" id="transitioning_rectangle">
<h3>Transitioning Width of Rectangle</h3>
<div class="transitioning_rectangle_path"></div>
</div>
</td>
</tr>
</table>
<div class="div_RootBody">
<h1 style="text-align:center; font: bold 1.5em Arial;">D3 Multi-Point Path Examples With Different Interpolation Types</h1>
<p>The following group of examples represents what a multi-point line or path (<i> one that has more than two points associated with it</i>) looks like after applying different interpolation types.</p>
</div>
<table class="table_Header">
<tr>
<td width="50%" height="100%">
<div class="div_RootBody" id="linear_multipoint">
<h3>Multi-Point Path With Interpolation Type = "linear"</h3>
<div class="linear_multipoint_path"></div>
</div>
</td>
<td width="50%" height="100%">
<div class="div_RootBody" id="monotone_multipoint">
<h3>Multi-Point Path With Interpolation Type = "monotone"</h3>
<div class="monotone_multipoint_path"></div>
</div>
</td>
</tr>
</table>
<table class="table_Header">
<tr>
<td width="50%" height="100%">
<div class="div_RootBody" id="step_before_multipoint">
<h3>Multi-Point Path With Interpolation Type = "step-before"</h3>
<div class="step_before_multipoint_path"></div>
</div>
</td>
<td width="50%" height="100%">
<div class="div_RootBody" id="step_after_multipoint">
<h3>Multi-Point Path With Interpolation Type = "step-after"</h3>
<div class="step_after_multipoint_path"></div>
</div>
</td>
</tr>
</table>
<table class="table_Header">
<tr>
<td width="50%" height="100%">
<div class="div_RootBody" id="basis_multipoint">
<h3>Multi-Point Path With Interpolation Type = "basis"</h3>
<div class="basis_multipoint_path"></div>
</div>
</td>
<td width="50%" height="100%">
<div class="div_RootBody" id="cardinal_multipoint">
<h3>Multi-Point Path With Interpolation Type = "cardinal"</h3>
<div class="cardinal_multipoint_path"></div>
</div>
</td>
</tr>
</table>
<table class="table_Header">
<tr>
<td width="50%" height="100%">
<div class="div_RootBody" id="basis_open_multipoint">
<h3>Multi-Point Path With Interpolation Type = "basis-open"</h3>
<div class="basis_open_multipoint_path"></div>
</div>
</td>
<td width="50%" height="100%">
<div class="div_RootBody" id="cardinal_open_multipoint">
<h3>Multi-Point Path With Interpolation Type = "cardinal-open"</h3>
<div class="cardinal_open_multipoint_path"></div>
</div>
</td>
</tr>
</table>
<table class="table_Header">
<tr>
<td width="50%" height="100%">
<div class="div_RootBody" id="basis_closed_multipoint">
<h3>Multi-Point Path With Interpolation Type = "basis-closed"</h3>
<div class="basis_closed_multipoint_path"></div>
</div>
</td>
<td width="50%" height="100%">
<div class="div_RootBody" id="cardinal_closed_multipoint">
<h3>Multi-Point Path With Interpolation Type = "cardinal-closed"</h3>
<div class="cardinal_closed_multipoint_path"></div>
</div>
</td>
</tr>
</table>
<div class="div_RootBody" id="bundle_multipoint">
<h3>Multi-Point Path With Interpolation Type = "bundle"</h3>
<div class="bundle_multipoint_path"></div>
</div>
</td>
</tr>
</table>
<div class="div_Footer"><p>This is the IF4IT Footer Message for this web page.</p></div>
<div><p class="p_if4itMessage">This Site Has Been Created and Published by The International Foundation for Information Technology (IF4IT).</p></div>
<script type="text/javascript">
<!-- Draw simple two pointed path -->
drawStaticPath(lineSet1, "#simple_line .simple_line_path", "Black", "none", 1, 400, 50, "linear");
<!-- Draw a simple two pointed path twice in the same HTML div-->
drawStaticPath(lineSet1, "#simple_line_twice .simple_line_twice_path", "Blue", "none", 2, 400, 50, "linear");
drawStaticPath(lineSet1, "#simple_line_twice .simple_line_twice_path", "Red", "none", 4, 400, 50, "linear");
<!-- Transition one end of a path -->
drawTransitioningOriginPath(lineSet1, "#one_end_line_transition .one_end_line_transition_path", "Green", "none", 1, 400, 50, "linear");
<!-- Elongate or Extend a path -->
drawElongatingPath(lineSet2, "#elongate_line_transition .elongate_line_transition_path", "Orange", "none", 3, 400, 50, "linear");
<!-- Draw a simple triangle path twice in the same HTML div-->
drawStaticPath(triangleSetA, "#simple_triangle .simple_triangle_path", "Maroon", "Yellow", 4, 400, 50, "linear");
drawStaticPath(triangleSetB, "#simple_triangle .simple_triangle_path", "Maroon", "Yellow", 4, 400, 58, "linear");
<!-- Draw a simple rectangle path twice in the same HTML div-->
drawStaticPath(rectangleSetA, "#simple_rectangle .simple_rectangle_path", "MidnightBlue", "SkyBlue", 4, 400, 50, "linear");
drawStaticPath(rectangleSetB, "#simple_rectangle .simple_rectangle_path", "MidnightBlue", "SkyBlue", 4, 400, 58, "linear");
<!-- Draw a transitioning triangle path -->
drawTransitioningTriangle(triangleSetB, "#transitioning_triangle .transitioning_triangle_path", "Maroon", "Yellow", 4, 400, 58, "linear");
<!-- Draw a transitioning rectangle path -->
drawTransitioningRectangle(rectangleSetB, "#transitioning_rectangle .transitioning_rectangle_path", "MidnightBlue", "SkyBlue", 4, 400, 58, "linear");
<!-- Draw multipoint paths using different interpolation types -->
drawStaticPath(multipointPathSet, "#linear_multipoint .linear_multipoint_path", "Purple", "none", 2, 110, 60, "linear");
drawStaticPath(multipointPathSet, "#step_before_multipoint .step_before_multipoint_path", "Purple", "none", 2, 110, 60, "step-before");
drawStaticPath(multipointPathSet, "#step_after_multipoint .step_after_multipoint_path", "Purple", "none", 2, 110, 60, "step-after");
drawStaticPath(multipointPathSet, "#basis_multipoint .basis_multipoint_path", "Purple", "none", 2, 110, 60, "basis");
drawStaticPath(multipointPathSet, "#basis_open_multipoint .basis_open_multipoint_path", "Purple", "none", 2, 110, 60, "basis-open");
drawStaticPath(multipointPathSet, "#basis_closed_multipoint .basis_closed_multipoint_path", "Purple", "none", 2, 110, 60, "basis-closed");
drawStaticPath(multipointPathSet, "#bundle_multipoint .bundle_multipoint_path", "Purple", "none", 2, 110, 60, "bundle");
drawStaticPath(multipointPathSet, "#cardinal_multipoint .cardinal_multipoint_path", "Purple", "none", 2, 110, 60, "cardinal");
drawStaticPath(multipointPathSet, "#cardinal_open_multipoint .cardinal_open_multipoint_path", "Purple", "none", 2, 110, 60, "cardinal-open");
drawStaticPath(multipointPathSet, "#cardinal_closed_multipoint .cardinal_closed_multipoint_path", "Purple", "none", 2, 110, 60, "cardinal-closed");
drawStaticPath(multipointPathSet, "#monotone_multipoint .monotone_multipoint_path", "Purple", "none", 2, 110, 60, "monotone");
</script>
</body>
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment