D3 Examples - Reusable Scatter Plot

Reusable Scatter Plot

In the original reusable charts example, the comments state

// Convert data to standard representation greedily; // this is needed for nondeterministic accessors.

In this adaptation, a simplifying assumption was made that no nondeterministic accessors will be given. Going one step further, an assumption was made that accessors will only want to access specific "columns" of data, meaning properties on each row object.

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Reusable Scatterplot Example</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet" type="text/css">
    <style>
​
      /* Make the container flush against the upper left corner. */
      body {
        margin: 0px;
      }
​
      /* Put a border around SVG elements so we can see how big they are. */
      svg {
        border-style: solid;
        border-width: 1px;
      }
    
      /* Style the X and Y axes. */
      .axis text {
        font-family: "Poiret One", cursive;
        font-size: 16pt;
      }
      .axis .label {
        font-size: 32pt;
      }
      .axis path, .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
      }
​
    </style>
  </head>
  <body>
    <div id="chart"></div>
    <script src="scatterPlot.js"></script>
    <script src="main.js"></script>
​
    <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-66108038-1', 'auto'); ga('send', 'pageview'); </script>
  </body>
</html>
​
    