Multiple D3 Horizontal Bar Charts Mixed In With Common HTML Layout Constructs

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

// This example draws horizontal bar charts...
      // Created by Frank Guerino : "https://www.guerino.net"

// Data Used for this example...
    var dataSet1 = [
      {legendLabel: "Legend String 1", magnitude: 54, link: "https://www.if4it.com/SYNTHESIZED/DISCIPLINES/Visualization_Management_Home_Page.html"},
      {legendLabel: "Legend String 2", magnitude: 21, link: "https://www.if4it.com/SYNTHESIZED/DISCIPLINES/Visualization_Management_Home_Page.html#RELATED_TERMS"},
      {legendLabel: "Legend String 3", magnitude: 31, link: "https://www.if4it.com/SYNTHESIZED/DISCIPLINES/Data_Visualization_Management_Home_Page.html"},
      {legendLabel: "Legend String 4", magnitude: 14, link: "https://www.if4it.com/SYNTHESIZED/DISCIPLINES/Data_Visualization_Management_Home_Page.html#RELATED_TERMS"},
      {legendLabel: "Legend String 5", magnitude: 19, link: "https://www.if4it.com/SYNTHESIZED/DISCIPLINES/Visualization_Management_Home_Page.html"},
      {legendLabel: "Legend String 6", magnitude: 47, link: "https://www.if4it.com/SYNTHESIZED/DISCIPLINES/Visualization_Management_Home_Page.html#RELATED_TERMS"},
      {legendLabel: "Legend String 7", magnitude: 27, link: "https://www.if4it.com/SYNTHESIZED/DISCIPLINES/Data_Visualization_Management_Home_Page.html"}];

var dataSet2 = [
      {legendLabel: "Legend String 8", magnitude: 31, link: "https://www.if4it.com/SYNTHESIZED/DISCIPLINES/Visualization_Management_Home_Page.html"},
      {legendLabel: "Legend String 9", magnitude: 54, link: "https://www.if4it.com/SYNTHESIZED/DISCIPLINES/Visualization_Management_Home_Page.html#RELATED_TERMS"},
      {legendLabel: "Legend String 10", magnitude: 21, link: "https://www.if4it.com/SYNTHESIZED/DISCIPLINES/Data_Visualization_Management_Home_Page.html"},
      {legendLabel: "Legend String 11", magnitude: 31, link: "https://www.if4it.com/SYNTHESIZED/DISCIPLINES/Data_Visualization_Management_Home_Page.html#RELATED_TERMS"},
      {legendLabel: "Legend String 12", magnitude: 54, link: "https://www.if4it.com/SYNTHESIZED/DISCIPLINES/Visualization_Management_Home_Page.html"},
      {legendLabel: "Legend String 13", magnitude: 14, link: "https://www.if4it.com/SYNTHESIZED/DISCIPLINES/Visualization_Management_Home_Page.html#RELATED_TERMS"},
      {legendLabel: "Legend String 14", magnitude: 14, link: "https://www.if4it.com/SYNTHESIZED/DISCIPLINES/Data_Visualization_Management_Home_Page.html"},
      {legendLabel: "Legend String 15", magnitude: 27, link: "https://www.if4it.com/SYNTHESIZED/DISCIPLINES/Data_Visualization_Management_Home_Page.html#RELATED_TERMS"}];

var dataSet3 = [
      {legendLabel: "Legend String 16", magnitude: 21, link: "https://www.if4it.com/SYNTHESIZED/DISCIPLINES/Visualization_Management_Home_Page.html"},
      {legendLabel: "Legend String 17", magnitude: 41, link: "https://www.if4it.com/SYNTHESIZED/DISCIPLINES/Visualization_Management_Home_Page.html#RELATED_TERMS"},
      {legendLabel: "Legend String 18", magnitude: 34, link: "https://www.if4it.com/SYNTHESIZED/DISCIPLINES/Data_Visualization_Management_Home_Page.html"},
      {legendLabel: "Legend String 19", magnitude: 9, link: "https://www.if4it.com/SYNTHESIZED/DISCIPLINES/Data_Visualization_Management_Home_Page.html#RELATED_TERMS"},
      {legendLabel: "Legend String 20", magnitude: 47, link: "https://www.if4it.com/SYNTHESIZED/DISCIPLINES/Data_Visualization_Management_Home_Page.html"},
      {legendLabel: "Legend String 21", magnitude: 17, link: "https://www.if4it.com/SYNTHESIZED/DISCIPLINES/Data_Visualization_Management_Home_Page.html#RELATED_TERMS"},
      {legendLabel: "Legend String 22", magnitude: 47, link: "https://www.if4it.com/SYNTHESIZED/DISCIPLINES/Visualization_Management_Home_Page.html"},
      {legendLabel: "Legend String 23", magnitude: 37, link: "https://www.if4it.com/SYNTHESIZED/DISCIPLINES/Visualization_Management_Home_Page.html#RELATED_TERMS"},
      {legendLabel: "Legend String 24", magnitude: 47, link: "https://www.if4it.com/SYNTHESIZED/DISCIPLINES/Data_Visualization_Management_Home_Page.html"},
      {legendLabel: "Legend String 25", magnitude: 4, link: "https://www.if4it.com/SYNTHESIZED/DISCIPLINES/Data_Visualization_Management_Home_Page.html#RELATED_TERMS"},
      {legendLabel: "Legend String 26", magnitude: 18, link: "https://www.if4it.com/SYNTHESIZED/DISCIPLINES/Data_Visualization_Management_Home_Page.html"},
      {legendLabel: "Legend String 27", magnitude: 41, link: "https://www.if4it.com/SYNTHESIZED/DISCIPLINES/Data_Visualization_Management_Home_Page.html#RELATED_TERMS"},
      {legendLabel: "Legend String 28", magnitude: 37, link: "https://www.if4it.com/SYNTHESIZED/DISCIPLINES/Visualization_Management_Home_Page.html"},
      {legendLabel: "Legend String 29", magnitude: 27, link: "https://www.if4it.com/SYNTHESIZED/DISCIPLINES/Visualization_Management_Home_Page.html#RELATED_TERMS"}];

function drawHorizontalBarChart(chartID, dataSet, selectString, colors) {

// chartID => A unique drawing identifier that has no spaces, no "." and no "#" characters.
        // dataSet => Input Data for the chart, itself.
        // selectString => String that allows you to pass in
        //           a D3 select string.
        // colors => String to set color scale.  Values can be...
        //           => "colorScale10"
        //           => "colorScale20"
        //           => "colorScale20b"
        //           => "colorScale20c"

var canvasWidth = 700;
        var barsWidthTotal = 300
        var barHeight = 20;
        var barsHeightTotal = barHeight * dataSet.length;
        //var canvasHeight = 200;
        var canvasHeight = dataSet.length * barHeight + 10; // +10 puts a little space at bottom.
        var legendOffset = barHeight/2;
        var legendBulletOffset = 30;
        var legendTextOffset = 20;

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

// Color Scale Handling...
        var colorScale = d3.scale.category20c();
        switch (colors)
        {
          case "colorScale10":
            colorScale = d3.scale.category10();
            break;
          case "colorScale20":
            colorScale = d3.scale.category20();
            break;
          case "colorScale20b":
            colorScale = d3.scale.category20b();
            break;
          case "colorScale20c":
            colorScale = d3.scale.category20c();
            break;
          default:
            colorScale = d3.scale.category20c();
        };

var synchronizedMouseOver = function() {
          var bar = d3.select(this);
          var indexValue = bar.attr("index_value");

var barSelector = "." + "bars-" + chartID + "-bar-" + indexValue;
          var selectedBar = d3.selectAll(barSelector);
          selectedBar.style("fill", "Maroon");

var bulletSelector = "." + "bars-" + chartID + "-legendBullet-" + indexValue;
          var selectedLegendBullet = d3.selectAll(bulletSelector);
          selectedLegendBullet.style("fill", "Maroon");

var textSelector = "." + "bars-" + chartID + "-legendText-" + indexValue;
          var selectedLegendText = d3.selectAll(textSelector);
          selectedLegendText.style("fill", "Maroon");
        };

var synchronizedMouseOut = function() {
          var bar = d3.select(this);
          var indexValue = bar.attr("index_value");

var barSelector = "." + "bars-" + chartID + "-bar-" + indexValue;
          var selectedBar = d3.selectAll(barSelector);
          var colorValue = selectedBar.attr("color_value");
          selectedBar.style("fill", colorValue);

var bulletSelector = "." + "bars-" + chartID + "-legendBullet-" + indexValue;
          var selectedLegendBullet = d3.selectAll(bulletSelector);
          var colorValue = selectedLegendBullet.attr("color_value");
          selectedLegendBullet.style("fill", colorValue);

var textSelector = "." + "bars-" + chartID + "-legendText-" + indexValue;
          var selectedLegendText = d3.selectAll(textSelector);
          selectedLegendText.style("fill", "Blue");
        };

// 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...
      canvas.selectAll("rect")
        .data(dataSet)
        .enter().append("svg:a")
          .attr("xlink:href", function(d) { return d.link; })
          .append("svg:rect")
            // NOTE: the "15 represents an offset to allow for space to place magnitude
            // at end of bars.  May have to address this better, possibly by placing the
            // magnitude within the bars.
            //.attr("x", function(d) { return barsWidthTotal - x(d.magnitude) + 15; }) // Left to right
            .attr("x", 0) // Right to left
            .attr("y", function(d, i) { return y(i); })
            .attr("height", barHeight)
            .on('mouseover', synchronizedMouseOver)
            .on("mouseout", synchronizedMouseOut)
            .style("fill", "White" )
            .style("stroke", "White" )
            .transition()
	      .ease("bounce")
              .duration(1500)
              .delay(function(d, i) { return i * 100; })
            .attr("width", function(d) { return x(d.magnitude); })
            .style("fill", function(d, i) { colorVal = colorScale(i); return colorVal; } )
            .attr("index_value", function(d, i) { return "index-" + i; })
            .attr("class", function(d, i) { return "bars-" + chartID + "-bar-index-" + i; })
            .attr("color_value", function(d, i) { return colorScale(i); }) // Bar fill color...
            .style("stroke", "white"); // Bar border color...

// Create text values that go at end of each bar...
      canvas.selectAll("text")
        .data(dataSet) // Bind dataSet to text elements
        .enter().append("svg:text") // Append text elements
          .attr("x", x)
          .attr("y", function(d, i) { return y(i); })
          //.attr("y", function(d) { return y(d) + y.rangeBand() / 2; })
          .attr("dx", function(d) { return x(d.magnitude) - 5; })
          .attr("dy", barHeight-5) // vertical-align: middle
          .attr("text-anchor", "end") // text-align: right
          .text(function(d) { return d.magnitude;})
          .attr("fill", "White");

// Plot the bullet circles...
      canvas.selectAll("circle")
        .data(dataSet).enter().append("svg:circle") // Append circle elements
          .attr("cx", barsWidthTotal + legendBulletOffset)
          .attr("cy", function(d, i) { return legendOffset + i*barHeight; } )
          .attr("stroke-width", ".5")
          .style("fill", function(d, i) { return colorScale(i); }) // Bar fill color
          .attr("index_value", function(d, i) { return "index-" + i; })
          .attr("class", function(d, i) { return "bars-" + chartID + "-legendBullet-index-" + i; })
          .attr("r", 5)
          .attr("color_value", function(d, i) { return colorScale(i); }) // Bar fill color...
          .on('mouseover', synchronizedMouseOver)
          .on("mouseout", synchronizedMouseOut);

// Create hyper linked text at right that acts as label key...
      canvas.selectAll("a.legend_link")
        .data(dataSet) // 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", "center")
              .attr("x", barsWidthTotal + legendBulletOffset + legendTextOffset)
              //.attr("y", function(d, i) { return legendOffset + i*20 - 10; })
              .attr("y", function(d, i) { return legendOffset + i*barHeight; } )
              .attr("dx", 0)
              .attr("dy", "5px") // Controls padding to place text above bars
              .text(function(d) { return d.legendLabel;})
              .style("fill", "Blue")
              .attr("index_value", function(d, i) { return "index-" + i; })
              .attr("class", function(d, i) { return "bars-" + chartID + "-legendText-index-" + i; })
              .on('mouseover', synchronizedMouseOver)
              .on("mouseout", synchronizedMouseOut);

};

</script>

</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 {
	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;">Multiple Interactive D3 Horizontal 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 mix multiple interactive D3 based Bar Charts with multiple common HTML page layout constructs. Cut, paste, and run the code into your own index.html file to see the multiple charts.</p>
            </div>
            <div class="div_RootBody" id="bar_chart_1">
              <h3 class="h3_Body">Bar Chart Number 1</h3>
              <div class="chart"></div>
            </div>
            <div class="div_RootBody" id="bar_chart_2">
              <h3 class="h3_Body">Bar Chart Number 2</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="bar_chart_3">
              <h3 class="h3_Body">Bar Chart Number 3</h3>
              <div class="chart"></div>
            </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