D3 Scatterplot - Loading

by Mark

HTML

<strong><p>ePledge<span class="name"></span>
    <br></br>
    <br> <strong>Y-Axis is the ranking, 0-5 of most freuquently chosen option.</strong>
    </br>
    <br>
        <strong>X-Axis is the Average Donation Amount in US Dollars.</strong>
    </br>
</p>
    <body>
<div id="scatter-load"></div>
    </body>

CSS

body {
    font-family:"Arial";
    color: #686765;
}
body div {
    font-size: 14pt;
}
.name {
    float:right;
    color:#27aae1;
}
.axis {
    fill: none;
    stroke: #AAA;
    stroke-width: 1px;
}
text {
    stroke: none;
    fill: #666666;
    font-size: .6em;
    font-family:"Helvetica Neue"
}
.label {
    fill: #414241;
}
.node {
    cursor:pointer;
}
.dot {
    opacity: .6;
    cursor: pointer;
}
div.tooltip {   
  position: absolute;           
  text-align: center;           
  width: 60px;                  
  height: 18px;                 
  padding: 2px;             
  font: 12px sans-serif;        
  background: lightsteelblue;   
  border: 0px;      
  border-radius: 8px;           
  pointer-events: none;         
}

JavaScript

var deductions = [{
    "name": "Cash",
        "Option": "Cash",
        "price": 70,
        "frequency": 2
}, {
    "name": "Check",
        "Option": "Check",
        "price": 800,
        "frequency": 3
}, {
    "name": "No Donation",
        "Option": "No Donation",
        "price": 0,
        "frequency": 1.5
}, {
    "name": "Payroll Deduction",
        "Option": "Payroll Deduction",
        "price": 250,
        "frequency": 4
}, {
    "name": "Bill Me Later",
        "Option": "Bill Me",
        "price": 100,
        "frequency": 5
}];

// call the method below
showScatterPlot(deductions);

function showScatterPlot(data) {
    // just to have some space around items. 
    var margins = {
        "left": 40,
            "right": 30,
            "top": 30,
            "bottom": 30
    };
    
    var width = 500;
    var height = 500;
    
    // this will be our colour scale. An Ordinal scale.
    var colors = d3.scale.category10();

    // we add the SVG component to the scatter-load div
    var svg = d3.select("#scatter-load").append("svg").attr("width", width).attr("height", height).append("g")
        .attr("transform", "translate(" + margins.left + "," + margins.top + ")");

    // this sets the scale that we're using for the X axis. 
    // the domain define the min and max variables to show. In this case, it's the min and max prices of items.
    // this is made a compact piece of code due to d3.extent which gives back the max and min of the price variable within the dataset
    var x = d3.scale.linear()
        .domain(d3.extent(data, function (d) {
        return d.price;
    }))
    // the range maps the domain to values from 0 to the width minus the left and right margins (used to space out the visualization)
        .range([0, width - margins.left - margins.right]);

    // this does the same as for the y axis but maps from the rating variable to the height to 0. 
    var y = d3.scale.linear()
        .domain(d3.extent(data, function (d) {
  ...