Quadrant D3 Demo

Example of how you can use d3 to create a simple quadrant diagram based on not so basic flare data author(s): Piers Hollott

HTML

<div>Quadrant: Uncertainty vs. Perceived Value</div>
<div id="scatter-load"></div>
<script>
    var xaxislabel = "Certainty / Uncertainty";
    var yaxislabel = "Appropriate";

    var items = [{
        "name": "Azure (PaaS)",
            "category": "promoting",
            "price": 3,
            "rating": 8.5,
            "size": 5
    }, {
        "name": "Mobile Applications",
            "category": "promoting",
            "price": 2,
            "rating": 7,
            "size": 5
    }, {
        "name": "Responsive Design",
            "category": "promoting",
            "price": 1,
            "rating": 8,
            "size": 5
    }, {
    "name": "PhoneGap/Cordova",
            "category": "promoting",
            "price": 1.5,
            "rating": 9,
            "size": 5
    }, {
        "name": "Salesforce1 (PaaS)",
            "category": "fostering",
            "price": 7,
            "rating": 7,
            "size": 5
    }, {
    "name": "AngularJS",
            "category": "fostering",
            "price": 9,
            "rating": 9,
            "size": 5
    }, {
        "name": "Titanium",
            "category": "fostering",
            "price": 5.5,
            "rating": 5.5,
            "size": 5
    }, {
        "name": "d3.js",
            "category": "fostering",
            "price": 8,
            "rating": 6,
            "size": 5
    }, {
        "name": "scala",
            "category": "discovering",
            "price": 1,
            "rating": 1,
            "size": 5
    }, {
        "name": "NoSQL",
            "category": "discovering",
            "price": 3,
            "rating": 2,
            "size": 5
    }];
</script>

CSS

body {
    font-family:"Helvetica Neue";
    color: #686765;
}
.name {
    float:right;
    color:#27aae1;
}
.axis {
    fill: none;
    stroke: #AAA;
    stroke-width: 1px;
}
text {
    stroke: none;
    fill: #666666;
    font-size: .8em;
    font-family:"Helvetica Neue"
}
.label {
    fill: #414241;
}
.node {
    cursor:pointer;
}
.dot {
    opacity: .7;
    cursor: pointer;
}

JavaScript

// call the method below
showScatterPlot(items);

function showScatterPlot(data, category) {
    // just to have some space around items. 
    var margins = {
        "left": 40,
            "right": 30,
            "top": 30,
            "bottom": 30
    };

    var width = 500;
    var height = 500;
    var domainwidth = width - margins.left - margins.right;
    var domainheight = height - margins.top - margins.bottom;

    // 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 + ")");

    svg.append("rect")
        .style("opacity", 0.1)
        .attr("fill", "blue")
        .attr("width", domainwidth)
        .attr("height", domainheight / 2);

    svg.append("rect")
        .style("opacity", 0.3)
        .attr("fill", "yellow")
        .attr("width", domainwidth / 2)
        .attr("height", domainheight);


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

    // simple function fixes the axes so they have room to breathe  
    // this should really be built into the library for extent
    // https://github.com/ScottLogic/d3-financial-components/issues/228
    function padExtent(e, p) {
        if (p === undefined) p = 1;
        return ([e[0] - p, e[1] + p]);
    }

    // the range maps the domain to values from 0 to the width minus the left and right margins (used to space out the visualization)
    var x = d3.scale.linear()
        .domain(padExtent(d3.extent(data, function (d) {
        return d.price;
    })))
   ...