All examples By author By category About

Guerino1

Full window Github gist

Tutorial for drawing multiple axes using D3 Axis

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

d3.select(self.frameElement).style("height", "1000px"); 
      d3.select(self.frameElement).style("width", "1200px");

// DATA FOR EXAMPLES
      var seasonsArray = ["Winter", "Spring", "Summer", "Autumn"];
      var numericArray = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

dataSet1 = [
        {cx: 7, cy: 2, r: 10, color: "blue"},
        {cx: 2, cy: 2, r: 30, color: "orange"},
        {cx: 3, cy: 6, r: 30, color: "purple"},
        {cx: 4, cy: 4, r: 10, color: "yellow"},
        {cx: 5, cy: 5, r: 5, color: "red"},
        {cx: 9, cy: 8, r: 20, color: "green"}
      ];

dataSet2 = [
        {cx: "Summer", cy: 2, r: 10, color: "blue"},
        {cx: "Winter", cy: 2, r: 30, color: "orange"},
        {cx: "Autumn", cy: 5, r: 5, color: "red"},
        {cx: "Spring", cy: 8, r: 20, color: "green"}
      ];

dataSet3 = [
        {cx: 2, cy: "Summer", r: 10, color: "blue"},
        {cx: 2, cy: "Winter", r: 30, color: "orange"},
        {cx: 5, cy: "Autumn", r: 5, color: "red"},
        {cx: 8, cy: "Spring", r: 20, color: "green"}
      ];

dataSet4 = [
        {cx: "Summer", cy: "Summer", r: 10, color: "blue"},
        {cx: "Autumn", cy: "Winter", r: 25, color: "orange"},
        {cx: "Winter", cy: "Winter", r: 5, color: "maroon"},
        {cx: "Spring", cy: "Autumn", r: 5, color: "red"},
        {cx: "Spring", cy: "Summer", r: 8, color: "yellow"},
        {cx: "Autumn", cy: "Autumn", r: 15, color: "purple"},
        {cx: "Winter", cy: "Spring", r: 20, color: "green"}
      ];

// FUNCTIONS
      function draw10( xAxisData, yAxisData, selectString )
      {

var w = 400;
        var h = 400;
        var marginLeft = 10;
        var marginRight = w - 40;
        var marginTop = 20;
        var marginBottom = h - 20;

var lineFunction = d3.svg.line()
          .x(function(d) { return d.x; })
          .y(function(d) { return d.y; })
          .interpolate("linear");

var canvas = d3.select(selectString).append("svg")
            .attr("height", h)
            .attr("width", w)

// Put a border around the canvas for visual effects
        canvas.append("path")
            .attr("d", lineFunction(lineData))
            .attr("stroke", "blue")
            .attr("stroke-width", 4)
            .attr("fill", "none");

// InnerCanvas is the offset canvas, that is offset away
        // from the margins, using the transform/translate for the
        // entire canvas, instead of just for individual axis.
        var innerCanvas = canvas.append("g")
            .attr("transform", "translate(30,10)");

// Setup y axis : Range is the length of the line
        // [0, 10] generates integer tick markers
        var yAxisScale = d3.scale.linear().domain([yAxisData[0], (yAxisData.length-1)]).range([marginBottom-20, marginTop]);
        var yAxis = d3.svg.axis().scale(yAxisScale).orient("left");
        var yAxisGroup = innerCanvas.call(yAxis);

// Setup x axis : Range is the length of the line
        // [0, 10] generates integer tick markers
        var xAxisScale = d3.scale.linear().domain([xAxisData[0], (xAxisData.length-1)]).range([0, marginRight]);
        var xAxis = d3.svg.axis().scale(xAxisScale).orient("bottom");
        var xAxisGroup = innerCanvas.append("g")
            .attr("transform", "translate(0,354)")
          .call(xAxis);

};

function draw20( xAxisData, yAxisData, selectString )
      {

var w = 400;
        var h = 400;
        var marginLeft = 10;
        var marginRight = w - 10;
        var marginTop = 20;
        var marginBottom = h - 20;

var lineFunction = d3.svg.line()
          .x(function(d) { return d.x; })
          .y(function(d) { return d.y; })
          .interpolate("linear");

var canvas = d3.select(selectString).append("svg")
            .attr("height", h)
            .attr("width", w)

// Setup y axis : Range is the length of the line
        // NOTE: A value of "1" for rangeRoundBands allows points
        // to be centered over the ordinal text markers
        var yAxisScale = d3.scale.ordinal().domain(yAxisData).rangeRoundBands([marginBottom-20, marginTop], 1);
        var yAxis = d3.svg.axis().scale(yAxisScale).orient("left");
        var yAxisGroup = innerCanvas.call(yAxis);

// Setup x axis : Range is the length of the line
        // NOTE: A value of "1" for rangeRoundBands allows points
        // to be centered over the ordinal text markers
        var xAxisScale = d3.scale.ordinal().domain(xAxisData).rangeRoundBands([0, marginRight], 1);
        var xAxis = d3.svg.axis().scale(xAxisScale).orient("bottom");
        var xAxisGroup = innerCanvas.append("g")
            .attr("transform", "translate(0,354)")
          .call(xAxis);

};

function draw30( xAxisData, yAxisData, selectString )
      {

var w = 400;
        var h = 400;
        var marginLeft = 10;
        var marginRight = w - 10;
        var marginTop = 20;
        var marginBottom = h - 20;

var lineFunction = d3.svg.line()
          .x(function(d) { return d.x; })
          .y(function(d) { return d.y; })
          .interpolate("linear");

var canvas = d3.select(selectString).append("svg")
            .attr("height", h)
            .attr("width", w)

// Setup x axis : Range is the length of the line
        // [0, 10] generates integer tick markers
        var xAxisScale = d3.scale.linear().domain([xAxisData[0], (xAxisData.length-1)]).range([0, marginRight-70]);
        var xAxis = d3.svg.axis().scale(xAxisScale).orient("bottom");
        //var xAxisGroup = innerCanvas.call(xAxis);
        var xAxisGroup = innerCanvas.append("g")
            .attr("transform", "translate(0,354)")
          .call(xAxis);

};

function draw40( xAxisData, yAxisData, selectString )
      {

var w = 400;
        var h = 400;
        var marginLeft = 10;
        var marginRight = w - 10;
        var marginTop = 20;
        var marginBottom = h - 20;

var lineFunction = d3.svg.line()
          .x(function(d) { return d.x; })
          .y(function(d) { return d.y; })
          .interpolate("linear");

var canvas = d3.select(selectString).append("svg")
            .attr("height", h)
            .attr("width", w)

};

function draw50( xAxisData, yAxisData, selectString )
      {

var w = 500;
        var h = 400;
        var marginLeft = 10;
        var marginRight = w - 10;
        var marginTop = 20;
        var marginBottom = h - 20;

var lineFunction = d3.svg.line()
          .x(function(d) { return d.x; })
          .y(function(d) { return d.y; })
          .interpolate("linear");

var canvas = d3.select(selectString).append("svg")
            .attr("height", h)
            .attr("width", w)

// Setup x axis : Range is the length of the line
        // NOTE: A value of "1" for rangeRoundBands allows points
        // to be centered over the ordinal text markers
        var xAxisScale = d3.scale.ordinal().domain(xAxisData).rangeRoundBands([0, (marginRight-100)], 1);
        var xAxis = d3.svg.axis().scale(xAxisScale).orient("bottom");
        var xAxisGroup = innerCanvas.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0,354)")
          .call(xAxis);

// Transitions the X axis to Y value set.
        xAxisScale = d3.scale.ordinal().domain(yAxisData).rangeRoundBands([0, (marginRight-100)], 1);
        xAxis = d3.svg.axis().scale(xAxisScale).orient("bottom");
        var xTransitions = innerCanvas.selectAll(".x.axis")
          .transition()
          .duration(3000)
            .delay(500)
            .attr("fill", "red")
            .attr("transform", "translate(0,354)")
          .call(xAxis);

// Transitions the Y axis to X value set.
        yAxisScale = d3.scale.ordinal().domain(xAxisData).rangeRoundBands([marginBottom-20, marginTop], 1);
        yAxis = d3.svg.axis().scale(yAxisScale).orient("left");
        var yTransitions = innerCanvas.selectAll(".y.axis")
          .transition()
          .duration(3000)
            .delay(500)
            .attr("fill", "red")
          .call(yAxis);

};

function draw60( xAxisData, yAxisData, selectString )
      {

var flag = true;
        var w = 500;
        var h = 400;
        var marginLeft = 10;
        var marginRight = w - 10;
        var marginTop = 20;
        var marginBottom = h - 20;

var lineFunction = d3.svg.line()
          .x(function(d) { return d.x; })
          .y(function(d) { return d.y; })
          .interpolate("linear");

var canvas = d3.select(selectString).append("svg")
            .attr("height", h)
            .attr("width", w)

// Setup x axis : Range is the length of the line
        // NOTE: A value of "1" for rangeRoundBands allows points
        // to be centered over the ordinal text markers
        var xAxisScale = d3.scale.ordinal().domain(xAxisData).rangeRoundBands([0, (marginRight-100)], 1);
        var xAxis = d3.svg.axis().scale(xAxisScale).orient("bottom");
        var xAxisGroup = innerCanvas.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0,354)")
          .call(xAxis);

d3.select("#buttonChart60")
          .on("click", function(){
  
            var color;
            if (flag) {
              xAxisScale = d3.scale.ordinal().domain(yAxisData).rangeRoundBands([0, (marginRight-100)], 1);
              yAxisScale = d3.scale.ordinal().domain(xAxisData).rangeRoundBands([marginBottom-20, marginTop], 1);
              color = "red";
            } else {
              xAxisScale = d3.scale.ordinal().domain(xAxisData).rangeRoundBands([0, (marginRight-100)], 1);
              yAxisScale = d3.scale.ordinal().domain(yAxisData).rangeRoundBands([marginBottom-20, marginTop], 1);
              color = "black";
            }

flag = !flag

// Transitions the X axis to Y value set.
            xAxis = d3.svg.axis().scale(xAxisScale).orient("bottom");
            var xTransitions = innerCanvas.selectAll(".x.axis")
              .transition()
              .duration(2000)
                .delay(200)
                .attr("fill", color)
                .attr("transform", "translate(0,354)")
              .call(xAxis);

// Transitions the Y axis to X value set.
            yAxis = d3.svg.axis().scale(yAxisScale).orient("left");
            var yTransitions = innerCanvas.selectAll(".y.axis")
              .transition()
              .duration(2000)
                .delay(200)
                .attr("fill", color)
              .call(yAxis);

})
          .on("mouseover", function(){ 
            var thisObject = d3.select(this);
            thisObject.style({"background-color": "DarkGreen"});
          })
          .on("mouseleave", function(){ 
            var thisObject = d3.select(this);
            thisObject.style({"background-color": "#4CAF50"});
          });

};

function draw70( xAxisData, yAxisData, selectString )
      {

var flag = true;
        var w = 500;
        var h = 400;
        var marginLeft = 10;
        var marginRight = w - 10;
        var marginTop = 20;
        var marginBottom = h - 20;

var lineFunction = d3.svg.line()
          .x(function(d) { return d.x; })
          .y(function(d) { return d.y; })
          .interpolate("linear");

var canvas = d3.select(selectString).append("svg")
            .attr("height", h)
            .attr("width", w)

// Setup x axis : Range is the length of the line
        // NOTE: A value of "1" for rangeRoundBands allows points
        // to be centered over the ordinal text markers
        var xAxisScale = d3.scale.ordinal().domain(xAxisData).rangeRoundBands([0, (marginRight-100)], 1);
        var xAxis = d3.svg.axis().scale(xAxisScale).orient("bottom");
        var xAxisGroup = innerCanvas.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0,354)")
          .call(xAxis);

d3.select("#buttonChart70")
          .on("click", function(){
  
            var color;
            if (flag) {
              //yAxisScale = d3.scale.ordinal().domain(xAxisData).rangeRoundBands([marginBottom-20, marginTop], 1);
              //xAxisScale = d3.scale.ordinal().domain(yAxisData).rangeRoundBands([0, (marginRight-100)], 1);
              yAxisScale = d3.scale.ordinal().domain(xAxisData).rangeRoundBands([marginTop, marginBottom-20], 1);
              xAxisScale = d3.scale.ordinal().domain(yAxisData).rangeRoundBands([(marginRight-100), 0], 1);
yAxis.orient("bottom");
xAxis.orient("left");
              color = "red";
            } else {
              yAxisScale = d3.scale.ordinal().domain(yAxisData).rangeRoundBands([marginBottom-20, marginTop], 1);
              xAxisScale = d3.scale.ordinal().domain(xAxisData).rangeRoundBands([0, (marginRight-100)], 1);
yAxis.orient("bottom");
xAxis.orient("left");
              color = "black";
            }

flag = !flag

// Transitions the Y axis to X value set.
            var yTransitions = innerCanvas.selectAll(".y.axis")
              .transition()
              .duration(2000)
                .delay(200)
                .attr("fill", color)
                .attr("transform", function(){
                    if (flag){
                      return "transform(0, 354)";
                    } else {
                      return "transform(marginTop, marginBottom-20)";
                      //return "transform(marginBottom-20, marginTop)";
                    };
                  }
                )
              .call(yAxis);

// Transitions the X axis to Y value set.
            var xTransitions = innerCanvas.selectAll(".x.axis")
              .transition()
              .duration(2000)
                .delay(200)
                .attr("fill", color)
                //.attr("transform", "translate(0,354)")
                .attr("transform", function(){
                    if (flag){
                      return "transform(marginTop, marginBottom-20)";
                      //return "transform(marginBottom-20, marginTop)";
                    } else {
                      return "transform(0, 354)";
                    };
                  }
                )
              .call(xAxis);

};

</script>

.button {
        background-color: #4CAF50; /* A lighter Green */
        border: none;
        color: white;
        cursor: pointer;
        padding: 10px 10px; /* Controls text padding inside button: y and x */
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
      }

/* unvisited link */
      a:link {
        color: "blue";
        text-decoration: none;
      }

/* visited link */
      a:visited {
        color: "darkblue";
        text-decoration: none;
      }

/* mouse over link */
      a:hover {
        color: "maroon";
        text-decoration: none;
      }

/* selected link */
      a:active {
        color: "maroon";
        text-decoration: none;
      }

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;
      }
      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 (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 class="td_BodyRight">
            <div class="div_RootBody">
              <h1 style="text-align:center; font: bold 1.5em Arial;">D3 Axis/Axes Tutorial</h1>
            </div>

<div class="div_RootBody">
              <h3>An X axis and a Y axis that are both integer based and linear:</h3>
              <p>Both axes are generated from a numeric array [0,10], which has 11 elements.</p>
              <div id="chart10"></div>
            </div>

<div class="div_RootBody">
              <h3>X and Y axes are both ordinal scale:</h3>
              <p>Notice the right shift of the Y axis to accommodate width of the label text strings.</p>
              <div id="chart20"></div>
            </div>

<div class="div_RootBody">
              <h3>Using numeric arrays with ordinal scale:</h3>
              <p>In this example, we pass in numeric arrays for both axes but use an ordinal scale to generate them.</p>
              <p>Note the difference in tick text positions between numerics as oridinals, in this example, vs. numerics as linear, in other examples.</p>
              <div id="chart20b"></div>
            </div>

<div class="div_RootBody">
              <h3>X axis is numeric scale &amp Y axis is ordinal scale:</h3>
              <p>Notice the right shift of the Y axis to accommodate label text strings.</p>
              <div id="chart30"></div>
            </div>

<div class="div_RootBody">
              <h3>X axis is ordinal scale &amp Y axis is numeric scale:</h3>
              <div id="chart40"></div>
            </div>

<div class="div_RootBody">
              <h3>Transitions Axes automatically, after a short delay:</h3>
              <p>The following example transitions axes in such a manner as to transpose X to Y and Y to X.</p>
              <p>Note: You have to refresh your screen to see these transitions occur.</p>
              <div id="chart50"></div>
            </div>

<div class="div_RootBody">
              <h3>Transitions Axes (Text Only) using a button, with a short delay:</h3>
              <h3>Transitions Axes using a button, with a short delay:</h3>
              <p>The following example transitions axes in such a manner as to transpose X to Y and Y to X with a button click.</p>
              <button id="buttonChart60" class="button">Swap Axes</button>
              <div id="chart60"></div>
            </div>

<div class="div_RootBody">
              <h3>Transitions Axes using a button, with a short delay:</h3>
              <p>The following example transitions axes like the previous example but also transitions the lines/paths.</p>
              <button id="buttonChart70" class="button">Swap Axes</button>
              <div id="chart70"></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>

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