All examples By author By category About

Guerino1

Full window Github gist

D3 Rectangles Tutorial and Cookbook

<!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 Rectangle 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", "1800px");

// document.writeln("TEST");
      // DATA SETS

var dataSet1 = [];
        dataSet1.svgWidth = 400;
        dataSet1.svgHeight = 75;
        dataSet1.w = 70;
        dataSet1.h = 50;
        dataSet1.fillColor = "Red";

var dataSet2 = [];
        dataSet2.svgWidth = 400;
        dataSet2.svgHeight = 75;
        dataSet2.w = 70;
        dataSet2.h = 50;
        dataSet2.fillColor = "Red";
        dataSet2.strokeWidth = 4;
        dataSet2.strokeColor = "Black";
        dataSet2.strokeAlignment = "inside";

var dataSet3 = [];
        dataSet3.svgWidth = 400;
        dataSet3.svgHeight = 75;
        dataSet3.w = 70;
        dataSet3.h = 50;
        dataSet3.fillColor = "Red";
        dataSet3.strokeWidth = 4;
        dataSet3.strokeColor = "Black";
        dataSet3.strokeAlignment = "inside";
        dataSet3.x = 2;
        dataSet3.y = 2;

var dataSet4 = [];
        dataSet4.svgWidth = 400;
        dataSet4.svgHeight = 75;
        dataSet4.w = 70;
        dataSet4.h = 50;
        dataSet4.fillColor = "Blue";
        dataSet4.cornerRadiusX = 6;
        dataSet4.cornerRadiusY = 6;

var dataSet5 = [];
        dataSet5.svgWidth = 400;
        dataSet5.svgHeight = 75;
        dataSet5.w = 70;
        dataSet5.h = 50;
        dataSet5.fillColor = "Blue";
        dataSet5.cornerRadiusX = 6;
        dataSet5.cornerRadiusY = 6;
        dataSet5.strokeWidth = 4;
        dataSet5.strokeColor = "Black";
        dataSet5.strokeAlignment = "inside";

var dataSet6 = [];
        dataSet6.svgWidth = 400;
        dataSet6.svgHeight = 75;
        dataSet6.w = 70;
        dataSet6.h = 50;
        dataSet6.fillColor = "Blue";
        dataSet6.cornerRadiusX = 6;
        dataSet6.cornerRadiusY = 6;
        dataSet6.strokeWidth = 4;
        dataSet6.strokeColor = "Black";
        dataSet6.strokeAlignment = "inside";
        dataSet6.x = 2;
        dataSet6.y = 2;

// FUNCTIONS
      
      function drawRectangle1( dataSet, selectString ) {

}

function drawRectangle2( dataSet, selectString ) {

var svgContainer = d3.select(selectString).append("svg")
            .attr("width", dataSet.svgWidth)
            .attr("height", dataSet.svgHeight);
       
        var rectangle = svgContainer.append("rect")
            .attr("width", dataSet.w)
            .attr("height", dataSet.h)
            .style("fill", dataSet.fillColor)
            .style("stroke", dataSet.strokeColor)
            .style("stroke-width", dataSet.strokeWidth)
            .style("stroke-alignment", dataSet.strokeAlignment);

}

function drawRectangle3( dataSet, selectString ) {

}

function drawRectangle4( dataSet, selectString ) {

}

function drawRectangle5( dataSet, selectString ) {

var svgContainer = d3.select(selectString).append("svg")
            .attr("width", dataSet.svgWidth)
            .attr("height", dataSet.svgHeight);
       
        var rectangle = svgContainer.append("rect")
            .attr("width", dataSet.w)
            .attr("height", dataSet.h)
            .style("fill", dataSet.fillColor)
            .style("rx", dataSet.cornerRadiusX)
            .style("ry", dataSet.cornerRadiusY)
            .style("stroke", dataSet.strokeColor)
            .style("stroke-width", dataSet.strokeWidth)
            .style("stroke-alignment", dataSet.strokeAlignment);

}

function drawRectangle6( dataSet, selectString ) {

var svgContainer = d3.select(selectString).append("svg")
            .attr("width", dataSet.svgWidth)
            .attr("height", dataSet.svgHeight);
       
        var rectangle = svgContainer.append("rect")
            .attr("width", dataSet.w)
            .attr("height", dataSet.h)
            .style("fill", dataSet.fillColor)
            .style("rx", dataSet.cornerRadiusX)
            .style("ry", dataSet.cornerRadiusY)
            .style("stroke", dataSet.strokeColor)
            .style("stroke-width", dataSet.strokeWidth)
            .style("stroke-alignment", dataSet.strokeAlignment)
            .attr("x", dataSet.x)
            .attr("y", dataSet.y);

}

function drawRectangle7( dataSet, selectString ) {

// Extract Rectangles from dataSet
        var rectangles = [];
          rectangles[0] = dataSet.r1;
          rectangles[1] = dataSet.r2;
          rectangles[2] = dataSet.r3;

}

function drawRectangle8( dataSet, selectString ) {

// Extract Rectangles from dataSet
        var rectangles = [];
          rectangles[0] = dataSet.r1;
          rectangles[1] = dataSet.r2;
          rectangles[2] = dataSet.r3;

}

function drawRectangle9( dataSet, selectString ) {

// Extract Rectangles from dataSet
        var rectangles = [];
          rectangles[0] = dataSet.r1;
          rectangles[1] = dataSet.r2;
          rectangles[2] = dataSet.r3;

flip();

}

</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;
      }
      h1.h1_Body {
        text-align:center;
        font: bold 1.8em Arial;
        width: 100%;
      }
      h2.h2_Body {
        text-align:center;
        font: bold 1.4em Arial;
        width: 100%;
      }
      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 {
        height: 100%;
        padding: 0;
      }
      /* The following is a hack that requires parent td elements to have at least 1px */
      /* height so that child div elements with 100% height will use full height. */
      td.td_tableBody {
        height: 1px;
      }
      td.td_BodyLeft {
        vertical-align: top;
        width: "15%";
        height: 100%;
        padding: 0;
      }
      td.td_BodyRight {
        vertical-align: top;
        height: 100%;
        width: "85%";
      }
      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 {
        height: 100%;
        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">

<tr>
              <td colspan="3">
                <div class="div_RootBody">
                  <h1 class="h1_Body">D3 Rectangles Tutorial and Cookbook</h1>
                  <p>This document is meant to act as a tutorial that helps understand how draw, use, and work with D3 rectangles... all embedded within an HTML document.  The page attempts to segment each example into small and contained HTML div elements, while trying to show different traits and manipulations.  Hopefully, you'll find it useful in your attempts to learn and use D3.</p>
                  <p><b>How to use this document:</b> 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 distinct areas:</p>
                  <ol>
                    <li>The data that is used for examples</li>
                    <li>The D3 Javascript code, each wrapped as distinct functions</li>
                    <li>The HTML Body that includes each HTML div element</li>
                    <li>The actual Javascript function calls that correlate with each appropriate HTML div element.</li>
                  </ol>
                  <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>
              </td>
            </tr>

<tr>
              <td colspan="3">
                <div class="div_RootBody">
                  <h2 class="h2_Body">Simple Rectangle</h2>
                </div>
              </td>
            </tr>

<tr>
              <td class="td_tableBody">
                <div class="div_RootBody">
                  <h3 class="h3_Body">Simple Rectangle; No Stroke; No Offset;</h3>
                  <p>This example draws a simple rectangle. It has no offset.</p>
                  <div id="simple_rectangle1"></div>
                </div>
              </td>
              <td class="td_tableBody">
                <div class="div_RootBody">
                  <h3 class="h3_Body">Simple Rectangle; Stroke=4; No Offset;</h3>
                  <p>This example draws a simple rectangle with a border stroke=4. Notice it has no offset and the border gets clipped.</p>
                  <div id="simple_rectangle2"></div>
                </div>
              </td>
              <td class="td_tableBody">
                <div class="div_RootBody">
                  <h3 class="h3_Body">Simple Rectangle; Stroke=4; Offset is x=2, y=2;</h3>
                  <p>This example draws a simple rectangle. Notice it has an offset of x=2 and y=2 that ensures the whole border is visible.</p>
                  <div id="simple_rectangle3"></div>
                </div>
              </td>
            </tr>

<tr>
              <td colspan="3">
                <div class="div_RootBody">
                  <h2 class="h2_Body">Simple Rectangle With Rounded Corners</h2>
                </div>
              </td>
            </tr>

<tr>
              <td class="td_tableBody">
                <div class="div_RootBody">
                  <h3 class="h3_Body">Rounded Rectangle; No Stroke; No Offset;</h3>
                  <p>A rectangle with rounded corners. Notice it has no offset.</p>
                  <div id="simple_rectangle4"></div>
                </div>
              </td>
              <td class="td_tableBody">
                <div class="div_RootBody">
                  <h3 class="h3_Body">Rounded Rectangle; Stroke=4; No Offset;</h3>
                  <p>This example draws a simple rectangle with a border stroke=4. Notice it has no offset and the border gets clipped.</p>
                  <div id="simple_rectangle5"></div>
                </div>
              </td>
              <td class="td_tableBody">
                <div class="div_RootBody">
                  <h3 class="h3_Body">Rounded Rectangle; Stroke=4; Offset is x=2, y=2;</h3>
                  <p>This example draws a simple rectangle. Notice it has an offset of x=2 and y=2 that ensures the whole border is visible.</p>
                  <div id="simple_rectangle6"></div>
                </div>
              </td>
            </tr>

<tr>
              <td colspan="3">
                <div class="div_RootBody">
                  <h2 class="h2_Body">Multiple Rectangles</h2>
                </div>
              </td>
            </tr>

<tr>
              <td class="td_tableBody" colspan="1">
                <div class="div_RootBody">
                  <h3 class="h3_Body">Multiple Simple Vertically Stacked Rectangles</h3>
                  <p>Three simple rectangles.</p>
                  <div id="simple_rectangle7"></div>
                </div>
              </td>
              <td class="td_tableBody" colspan="1">
                <div class="div_RootBody">
                  <h3 class="h3_Body">Two Horizontal Transitions of Rectangles</h3>
                  <p>Transitions the x-axis of each rectangle twice, based on two sequential transition methods.</p>
                  <div id="simple_rectangle8"></div>
                </div>
              </td>
              <td class="td_tableBody" colspan="1">
                <div class="div_RootBody">
                  <h3 class="h3_Body">Continuous Horizonal Transitions</h3>
                  <p>Continuously transitions the x-axis of each rectangle.</p>
                  <div id="simple_rectangle9"></div>
                </div>
              </td>
            </tr>

</table>

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

drawRectangle1(dataSet1, "#simple_rectangle1");
      drawRectangle2(dataSet2, "#simple_rectangle2");
      drawRectangle3(dataSet3, "#simple_rectangle3");
      drawRectangle4(dataSet4, "#simple_rectangle4");
      drawRectangle5(dataSet5, "#simple_rectangle5");
      drawRectangle6(dataSet6, "#simple_rectangle6");
      drawRectangle7(dataSet7, "#simple_rectangle7");
      drawRectangle8(dataSet7, "#simple_rectangle8");
      drawRectangle9(dataSet7, "#simple_rectangle9");

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