All examples By author By category About

Guerino1

Full window Github gist

Scatter Plot tutorial using D3

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

var seasonsArray = ["Winter", "Spring", "Summer", "Autumn"];
      var numericAxis = [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"}
      ];

function draw5( yAxisData, selectString, colors )
      {

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

};

function draw6( xAxisData, yAxisData, selectString, colors )
      {

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)

// 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 draw10( dataSet, xAxisData, yAxisData, selectString, colors )
      {

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)

// Plot points...
        innerCanvas.selectAll("scatter_points")
            .data(dataSet).enter().append("svg:circle")
            .attr("cx", function(d, i) { return xAxisScale(d.cx); })
            .attr("cy", function(d, i) { return yAxisScale(d.cy); })
            .attr("r", function(d, i) { return d.r; })
            .attr("fill", function(d, i) { return d.color; });

};

function draw20( dataSet, xAxisData, yAxisData, selectString, colors )
      {

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
        // 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( dataSet, xAxisData, yAxisData, selectString, colors )
      {

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
        // [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( dataSet, xAxisData, yAxisData, selectString, colors )
      {

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

var xAxisLength = .8 * w;
        var yAxisLength = .8 * h;

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("transform", "translate(0,354)")
          .call(xAxis);

};

function draw60( dataSet, xAxisData, yAxisData, selectString, colors )
      {

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

var xAxisLength = .8 * w;
        var yAxisLength = .8 * h;

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("transform", "translate(0,354)")
          .call(xAxis);

// Create horizontal paths...
        var horizontalGridLines = innerCanvas.selectAll(".horizontalGridLine")
            .data(yAxisData)
          .enter().append("path")
            .attr("class", "horizontalGridLine")
            .attr("d", function(d, i) {
              var p1 = {
                x: 0,
                y: yAxisScale(d)
              };
              var p2 = {
                x: marginRight - 100,
                y: yAxisScale(d)
              };
              var pts = [];
              pts.push(p1);
              pts.push(p2);
              return lineFunction(pts);
            })
            .attr("stroke", "gray")
            .style("stroke-dasharray", ("3, 3")) // 3 pixels on; 3 pixels off;
            .attr("stroke-width", 1)
            .attr("fill", "gray");

// Create vertical paths...
        var vverticalGridLines = innerCanvas.selectAll(".verticalGridLine")
            .data(xAxisData)
          .enter().append("path")
            .attr("class", "verticalGridLine")
            .attr("d", function(d, i) {
              var p1 = {
                x: xAxisScale(d),
                y: marginTop
              };
              var p2 = {
                x: xAxisScale(d),
                y: marginBottom-20
              };
              var pts = [];
              pts.push(p1);
              pts.push(p2);
              return lineFunction(pts);
            })
            .attr("stroke", "gray")
            .style("stroke-dasharray", ("3, 3")) // 3 pixels on; 3 pixels off;
            .attr("stroke-width", 1)
            .attr("fill", "gray");

// Plot points...
        innerCanvas.selectAll("scatter_points")
            .data(dataSet)
          .enter().append("svg:circle")
            .attr("cx", function(d, i) { return xAxisScale(d.cx); })
            .attr("cy", function(d, i) { return yAxisScale(d.cy); })
            .attr("r", function(d, i) { return d.r; })
            .attr("fill", function(d, i) { return d.color; });

};

function draw65( dataSet, xAxisData, yAxisData, selectString, colors )
      {

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

var xAxisLength = .8 * w;
        var yAxisLength = .8 * h;

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("transform", "translate(0,354)")
          .call(xAxis);

// Plot points...
        innerCanvas.selectAll("scatter_points")
            .data(dataSet)
          .enter().append("svg:circle")
            .attr("cx", function(d, i) { return marginLeft-15; }) // Start transition from left
            .attr("cy", function(d, i) { return marginBottom-15; }) // Start transition from bottom
            .attr("r", function(d, i) { return 0; }) // Start transition with radius = 0
            .attr("fill", "Black")
            .transition()
            .delay(function(d, i) { return i*400; })
            .duration(3000)
            .attr("cx", function(d, i) { return xAxisScale(d.cx); })
            .attr("cy", function(d, i) { return yAxisScale(d.cy); })
            .attr("fill", function(d, i) { return d.color; })
            .attr("r", function(d, i) { return d.r; });

};

</script>

/* 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 Scatterplots (a.k.a. Scatter Plots)</h1>
            </div>

<div class="div_RootBody">
              <h3>All of following scatterplots lead to this one...</h3>
              <p>The purpose of this tutorial is to walk the reader through the building of a complex scatterplot like this one, in small understandable pieces.  Note that each of the following examples is isolated in the HTML with div element and in Javascript with a seperate and corresponding function call.</p>
              <p>To learn from this reference tutorial, simply open up the source to this page and explore the code for each of the following examples, as they lead you to this final resulting scatterplot.</p>
              <div id="chart0"></div>
            </div>

<div class="div_RootBody">
              <h3>Let's start with an integer based linear Y Axis:</h3>
              <p>The axis is generated from the numeric array [0,10], which has 11 elements.</p>
              <p>Notice that the axis is oriented left, which flips it vertically and to the left.</p>
              <div id="chart5"></div>
            </div>

<div class="div_RootBody">
              <h3>We can now add an integer based linear X Axis:</h3>
              <p>The axis is also generated from the numeric array [0,10], which has 11 elements.</p>
              <div id="chart6"></div>
            </div>

<div class="div_RootBody">
              <h3>We can now add some data points:</h3>
              <p>Numeric integer ranges are used to set up each axis.  Notice how the first and last integer values align with the start and end of the axis lines.</p>
              <div id="chart10"></div>
            </div>

<div class="div_RootBody">
              <h3>X axis is ordinal scale &amp Y axis is numeric scale:</h3>
              <p>Notice that the ordinal scale's first value does not start at the join point for the two lines that make up the axes.</p>
              <div id="chart20"></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 ordinal scale:</h3>
              <p>Notice the right shift of the Y axis to accommodate label text strings.</p>
              <div id="chart40"></div>
            </div>

<div class="div_RootBody">
              <h3>X axis is ordinal scale &amp Y axis is ordinal scale (utilizing Integers as strings):</h3>
              <p>Notice that the "0" value, which is a character and not an integer, doesn't line up with the vertical and horizonal line join point.</p>
              <div id="chart50"></div>
            </div>

<div class="div_RootBody">
              <h3>Let's use paths to throw in some grid lines:</h3>
              <div id="chart60"></div>
            </div>

<div class="div_RootBody">
              <h3>Now, let's transition the points (a.k.a. bubbles) onto the chart with delays between them:</h3>
              <div id="chart65"></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