approval matrix/magic quadrant

_.md

[ Launch: asdasdasd ] 5a7681ddb2347afd5e74 by gelicia

config.json

{"description":"approval matrix/magic quadrant ","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/SBXmOwH.png"}

inlet.js

//https://gist.github.com/veltman/7295691


var width = 480,
    height = 480,
    dotRadius = 4,
    gridSpacing = 10;

var svg = d3.select("svg")
    .attr("width",width)
    .attr("height",height);

//Scales for item positions
var x = d3.scale.linear().domain([-10,10]).range([0,width]);
var y = d3.scale.linear().domain([-10,10]).range([height,0]);

//gridlines
svg.append("path")
  .attr("class","grid")
  .attr("d",function() {
    var d = "";

    for (var i = gridSpacing; i < width; i += gridSpacing ) {
      d += "M"+i+",0 L"+i+","+height;
    }

    for (var i = gridSpacing; i < height; i += gridSpacing ) {
      d += "M0,"+i+" L"+width+","+i;
    }

    return d;
  })

//x axis
svg.append("path")
  .attr("class","axis")
  .attr("d","M0,"+height/2+" L"+width+","+height/2);

//y axis
svg.append("path")
  .attr("class","axis")
  .attr("d","M"+width/2+",0 L"+width/2+","+height);

//Data - x and y can be anything positive or negative
//Domains for scales need to be wide enough.
//Currently -10 to +10
var itemList = [
  {
    x: 5,
    y: 5,
    description: "I'm in the upper-right quadrant!"
  },
  {
    x: -5,
    y: -5,
    description: "I'm in the lower-left quadrant!"
  }
];

//One group per item
var items = svg.selectAll("g.item").data(itemList).enter().append("g")
  .attr("class","item");

//Add a dot
items.append("circle")
  .attr("r",dotRadius)
  .attr("cx",function(d){
    return x(d.x);
  })
  .attr("cy",function(d){
    return y(d.y);
  });

//Add a label
//would need to use .getBBox() to make sure this doesn't hit the sides
items.append("text")
  .attr("x",function(d){
    return x(d.x);
  })
  .attr("y",function(d){
    return y(d.y);
  })
  .attr("dy","1.25em")
  .attr("text-anchor","middle")
  .text(function(d){return d.description;});

style.css

.grid {
  stroke-width: 0.5px;
  stroke: steelblue;
  fill: none;
  opacity: 0.5;
}

.axis {
  stroke-width: 3px;
  stroke: black;
  fill: none;
}

g.item circle {
  fill: black;
  stroke: none;
}

svg {
  border: 1px solid #ccc;
}

text {
  font: 12px sans-serif;
}