Skip to content

Instantly share code, notes, and snippets.

@gelicia gelicia/_.md

Last active Aug 29, 2015
Embed
What would you like to do?
approval matrix/magic quadrant
{"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"}
//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;});
.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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.