Multiple D3 Top Down and Bottom Up Stacked Bar Charts (without d3.layout.stack)

<!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>IF4IT Sample Charts Web Page</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" />

// Data Used for this example...
    var groupSet = [
      {legendText: "Group A", link: "https://www.if4it.com"},
      {legendText: "Group B", link: "https://www.if4it.com/glossary.html"},
      {legendText: "Group C", link: "https://www.if4it.com/disciplines.html"}
    ];

var dataSetA = [
      {axis: "Week 1", groupName: "Group A", base: 0, offset: 54, link: "https://www.if4it.com"},
      {axis: "Week 2", groupName: "Group A", base: 0, offset: 21, link: "https://www.if4it.com/glossary.html"},
      {axis: "Week 3", groupName: "Group A", base: 0, offset: 31, link: "https://www.if4it.com/resources.html"},
      {axis: "Week 4", groupName: "Group A", base: 0, offset: 14, link: "https://www.if4it.com/taxonomy.html"},
      {axis: "Week 5", groupName: "Group A", base: 0, offset: 19, link: "https://www.if4it.com/disciplines.html"},
      {axis: "Week 6", groupName: "Group A", base: 0, offset: 47, link: "https://www.if4it.com"},
      {axis: "Week 7", groupName: "Group A", base: 0, offset: 27, link: "https://www.if4it.com/glossary.html"}];

var dataSetB = [
      {axis: "Week 1", groupName: "Group B", base: 54, offset: 4, link: "https://www.if4it.com/glossary.html"},
      {axis: "Week 2", groupName: "Group B", base: 21, offset: 21, link: "https://www.if4it.com/taxonomy.html"},
      {axis: "Week 3", groupName: "Group B", base: 31, offset: 11, link: "https://www.if4it.com"},
      {axis: "Week 4", groupName: "Group B", base: 14, offset: 24, link: "https://www.if4it.com/disciplines.html"},
      {axis: "Week 5", groupName: "Group B", base: 19, offset: 11, link: "https://www.if4it.com/taxonomy.html"},
      {axis: "Week 6", groupName: "Group B", base: 47, offset: 7, link: "https://www.if4it.com/disciplines.html"},
      {axis: "Week 7", groupName: "Group B", base: 27, offset: 10, link: "https://www.if4it.com"}];

var dataSetC = [
      {axis: "Week 1", groupName: "Group C", base: 58, offset: 15, link: "https://www.if4it.com"},
      {axis: "Week 2", groupName: "Group C", base: 42, offset: 21, link: "https://www.if4it.com"},
      {axis: "Week 3", groupName: "Group C", base: 42, offset: 11, link: "https://www.if4it.com/taxonomy.html"},
      {axis: "Week 4", groupName: "Group C", base: 38, offset: 24, link: "https://www.if4it.com/glossary.html"},
      {axis: "Week 5", groupName: "Group C", base: 30, offset: 39, link: "https://www.if4it.com"},
      {axis: "Week 6", groupName: "Group C", base: 54, offset: 17, link: "https://www.if4it.com/disciplines.html"},
      {axis: "Week 7", groupName: "Group C", base: 37, offset: 27, link: "https://www.if4it.com"}];

function drawTopDownStackedBars(dataSet1, dataSet2, dataSet3, selectString) {

var canvasWidth = 700;
      var barsWidthTotal = 300
      var barWidth = barsWidthTotal / dataSet1.length;
      //var canvasHeight = dataSet1.length * 20 + 40;
      var canvasHeight = 150;

var x = d3.scale.linear().domain([0, dataSet1.length]).range([0, barsWidthTotal]);
      //var y = d3.scale.linear().domain([0, d3.max(dataSet1, function(d) { return d.magnitude; })]).rangeRound([0, canvasHeight/3]);

//document.writeln(selectString);

// Create the svg drawing canvas...
      var canvas = d3.select(selectString)
        .append("svg:svg")
          //.style("background-color", "yellow")
          .attr("width", canvasWidth)
          .attr("height", canvasHeight);

// Draw individual hyper text enabled bars for dataSet1...
      canvas.selectAll("rect")
        .data(dataSet1)
        .enter().append("svg:g")
          .append("svg:a")
          .attr("xlink:href", function(d) { return d.link; })
          .append("rect")
            .attr("x", function(d, i) { return x(i); })
            .attr("y", function(d) { return d.base; })
            .attr("height", function(d) { return d.offset; })
            .attr("width", barWidth)
            .style("fill", "White" )
            .style("stroke", "White" )
            .style("fill", "DarkGreen")
            .style("stroke", "white"); // Bar border color...

// Draw individual hyper text enabled bars for dataSet2...
      canvas.selectAll("g")
        .data(dataSet2)
	  .append("svg:a")
          .attr("xlink:href", function(d) { return d.link; })
          .append("rect")
            .attr("x", function(d, i) { return x(i); })
            .attr("y", function(d) { return d.base; })
            .attr("height", function(d) { return d.offset; })
            .attr("width", barWidth)
            .style("fill", "White" )
            .style("stroke", "White" )
            .style("fill", "GoldenRod")
            .style("stroke", "white"); // Bar border color...

// Draw individual hyper text enabled bars for dataSet3...
      canvas.selectAll("g")
        .data(dataSet3)
	  .append("svg:a")
          .attr("xlink:href", function(d) { return d.link; })
          .append("rect")
            .attr("x", function(d, i) { return x(i); })
            .attr("y", function(d) { return d.base; })
            .attr("height", function(d) { return d.offset; })
            .attr("width", barWidth)
            .style("fill", "White" )
            .style("stroke", "White" )
            .style("fill", "Maroon")
            .style("stroke", "white"); // Bar border color...

// Plot the bullet circles...
      canvas.selectAll("circle")
        .data(groupSet)
        .enter().append("svg:a") // Append legend elements
          .attr("xlink:href", function(d) { return d.link; })
	  .append("svg:circle")
            .attr("cx", barsWidthTotal + 50)
            .attr("cy", function(d, i) { return 10 + i*20; } )
            .attr("stroke-width", ".5")
	    .style("fill", function(d, i) { switch(i){ case 0: return "DarkGreen"; case 1: return "GoldenRod"; default: return "Maroon"; } } ) // Bar fill color
            .attr("r", 5);

// Create hyper linked text at right that acts as label key...
      canvas.selectAll("a.legend_link")
        .data(groupSet) // Instruct to bind dataSet to text elements
        .enter().append("svg:a") // Append legend elements
          .attr("xlink:href", function(d) { return d.link; })
          .append("text")
            .attr("text-anchor", "left")
            .attr("x", barsWidthTotal + 50 + 20)
            .attr("y", function(d, i) { return 10 + i*20 - 10; })
            .attr("dx", 0)
            .attr("dy", "1em") // Controls padding to place text above bars
            .text(function(d) { return d.legendText;})
            .style("fill", "Blue");

};

function drawBottomUpStackedBars(dataSet1, dataSet2, dataSet3, selectString) {

var canvasWidth = 700;
      var barsWidthTotal = 300
      var barWidth = barsWidthTotal / dataSet1.length;
      //var canvasHeight = dataSet1.length * 20 + 40;
      var canvasHeight = 150;

//document.writeln(selectString);

// Draw individual hyper text enabled bars for dataSet1...
      canvas.selectAll("rect")
        .data(dataSet1)
        .enter().append("svg:g")
          .append("svg:a")
          .attr("xlink:href", function(d) { return d.link; })
          .append("rect")
            .attr("x", function(d, i) { return x(i); })
            .attr("y", function(d) { return (canvasHeight - d.offset); })
            .attr("height", function(d) { return (canvasHeight - d.base); })
            .attr("width", barWidth)
            .style("fill", "White" )
            .style("stroke", "White" )
            .style("fill", "DarkGreen")
            .style("stroke", "white"); // Bar border color...

// Draw individual hyper text enabled bars for dataSet2...
      canvas.selectAll("g")
        .data(dataSet2)
	  .append("svg:a")
          .attr("xlink:href", function(d) { return d.link; })
          .append("rect")
            .attr("x", function(d, i) { return x(i); })
            .attr("y", function(d) { return (canvasHeight - (d.base + d.offset)); })
            .attr("height", function(d) { return d.offset; })
            .attr("width", barWidth)
            .style("fill", "White" )
            .style("stroke", "White" )
            .style("fill", "GoldenRod")
            .style("stroke", "white"); // Bar border color...

// Draw individual hyper text enabled bars for dataSet3...
      canvas.selectAll("g")
        .data(dataSet3)
	  .append("svg:a")
          .attr("xlink:href", function(d) { return d.link; })
          .append("rect")
            .attr("x", function(d, i) { return x(i); })
            .attr("y", function(d) { return (canvasHeight - (d.base + d.offset)); })
            .attr("height", function(d) { return d.offset; })
            .attr("width", barWidth)
            .style("fill", "White" )
            .style("stroke", "White" )
            .style("fill", "Maroon")
            .style("stroke", "white"); // Bar border color...

// Plot the bullet circles...
      canvas.selectAll("circle")
        .data(groupSet)
        .enter().append("svg:a") // Append legend elements
          .attr("xlink:href", function(d) { return d.link; })
	  .append("svg:circle")
            .attr("cx", barsWidthTotal + 50)
            .attr("cy", function(d, i) { return 80 + i*20; } )
            .attr("stroke-width", ".5")
	    .style("fill", function(d, i) { switch(i){ case 0: return "DarkGreen"; case 1: return "GoldenRod"; default: return "Maroon"; } } ) // Bar fill color
            .attr("r", 5);

// Create hyper linked text at right that acts as label key...
      canvas.selectAll("a.legend_link")
        .data(groupSet) // Instruct to bind dataSet to text elements
        .enter().append("svg:a") // Append legend elements
          .attr("xlink:href", function(d) { return d.link; })
          .append("text")
            .attr("text-anchor", "left")
            .attr("x", barsWidthTotal + 50 + 20)
            .attr("y", function(d, i) { return 80 + i*20 - 10; })
            .attr("dx", 0)
            .attr("dy", "1em") // Controls padding to place text above bars
            .text(function(d) { return d.legendText;})
            .style("fill", "Blue");

};

</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;
	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 {
	width: 250px;
	height: 100%;
	padding: 0;
      }
      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 (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/resources.html">RESOURCES</a></li>
          <li><a href="https://www.if4it.com">PRODUCTS</a></li>
          <li><a href="https://www.if4it.com">SERVICES</a></li>
          <li><a href="https://www.if4it.com">SUPPORT</a></li>
          <li><a href="https://www.if4it.com">HELP</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://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>
              <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>
            <div class="div_RootBody">
              <h1 style="text-align:center; font: bold 1.5em Arial;">D3 Stacked Bar Charts on an HTML Page</h1> 
            </div>
            <div class="div_RootBody">
	      <h3 class="h3_Body">Example Description</h3>
	      <p class="p_Red">This example shows how to create multiple D3 based Stacked Bar Charts, both Top Down and Bottom Up, "<b>without using the d3.layout.stack() layout.</b>" Cut, paste, and run the code into your own index.html file to see the multiple charts.</p>
            </div>
            <div class="div_RootBody" id="stacked_bar_chart_1">
	      <h3 class="h3_Body">Top Down Stacked Bar Chart</h3>
              <div class="chart"></div>
            </div>
            <div class="div_RootBody">
	      <h3 class="h3_Body">Content Section: No Charts Here</h3>
	      <p>This is dummy paragraph 1 text that would go in this section of the page.</p>
	      <p>This is dummy paragraph 2 text that would go in this section of the page.</p>
            </div>
            <div class="div_RootBody" id="stacked_bar_chart_2">
	      <h3 class="h3_Body">Bottom Up Stacked Bar Chart</h3>
              <div class="chart"></div>
            </div>
            <div class="div_RootBody">
	      <h3 class="h3_Body">Content Section: No Charts Here</h3>
	      <p>This is dummy paragraph 1 text that would go in this section of the page.</p>
	      <p>This is dummy paragraph 2 text that would go in this section of the page.</p>
            </div>
            <div class="div_RootBody">
	      <h3 class="h3_Body">Content Section: No Charts Here</h3>
	      <p>This is dummy paragraph 1 text that would go in this section of the page.</p>
	      <p>This is dummy paragraph 2 text that would go in this section of the page.</p>
            </div>
          </td>
        </tr>
      </table>

<div class="div_Footer"><p><p>This is the IF4IT Footer Message for this web page.</p></p></div>

<div><p class="p_if4itMessage">This Site Has Been Created and Published by The International Foundation for Information Technology (IF4IT).</p></div>

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