All examples By author By category About

Guerino1

Full window Github gist

D3 Paths or Lines Embedded in HTML div elements

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html  xmlns="https://www.w3.org/1999/xhtml"
    xml:lang="en-US"
    lang="en-US">
  <head profile="https://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" />

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 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);

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 lineFunction = d3.svg.line()
           .x(function(d) { return d.x; })
           .y(function(d) { return d.y; })
           .interpolate(interpolationType);

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 lineFunction = d3.svg.line()
           .x(function(d) { return d.x; })
           .y(function(d) { return d.y; })
           .interpolate(interpolationType);

lineGraph.datum(getNewData())
           .transition()
           .duration(6000)
           .attr("d", lineFunction);

}

</script>

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

</head>
  <body>

<div>
      <h1 style="text-align:center; font: bold 1.7em Arial;"><a href="https://www.if4it.com">The International Foundation for Information Technology</a> (<a href="https://www.if4it.com">IF4IT</a>)</h1>
    </div>

<div class="div_Menu">
      <ul class="menuButton">
        <li><a href="https://www.if4it.com">HOME</a></li>
        <li><a href="https://www.if4it.com/aboutUs.html">ABOUT US</a></li>
	<li><a href="https://www.if4it.com/products_and_services.html">PRODUCTS &amp; SERVICES</a></li>
        <li><a href="https://www.if4it.com/resources.html">RESOURCES</a></li>
        <li><a href="https://www.if4it.com/contactUs.html">CONTACT US</a></li>
        <li><a href="https://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="https://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="https://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="https://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="https://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="https://www.if4it.com">IF4IT Home</a></li>
              <li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="https://www.if4it.com/disciplines.html">IF4IT Disciplines</a></li>
              <li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="https://www.if4it.com/glossary.html">IF4IT Glossary</a></li>
	      <li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="https://www.if4it.com/taxonomy.html">IF4IT Taxonomies</a></li>
	      <li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="https://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="https://www.if4it.com">IF4IT Home</a></li>
              <li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="https://www.if4it.com/disciplines.html">IF4IT Disciplines</a></li>
              <li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="https://www.if4it.com/glossary.html">IF4IT Glossary</a></li>
              <li class="li_LeftMenu"><a class="a_LeftMenuNoUnderLine" href="https://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>

drawStaticPath(lineSet1, "#simple_line .simple_line_path", "Black", "none", 1, 400, 50, "linear");

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");

drawTransitioningOriginPath(lineSet1, "#one_end_line_transition .one_end_line_transition_path", "Green", "none", 1, 400, 50, "linear");

drawElongatingPath(lineSet2, "#elongate_line_transition .elongate_line_transition_path", "Orange", "none", 3, 400, 50, "linear");

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");

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");

drawTransitioningTriangle(triangleSetB, "#transitioning_triangle .transitioning_triangle_path", "Maroon", "Yellow", 4, 400, 58, "linear");

drawTransitioningRectangle(rectangleSetB, "#transitioning_rectangle .transitioning_rectangle_path", "MidnightBlue", "SkyBlue", 4, 400, 58, "linear");

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>

Modified http://mbostock.github.com/d3/d3.js?2.4.5 to a secure url

https://mbostock.github.com/d3/d3.js?2.4.5