Skip to content

Instantly share code, notes, and snippets.

@LauraCortes

LauraCortes/.block

Last active May 22, 2017 01:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save LauraCortes/020b0a4dc8e25070a42421382324109d to your computer and use it in GitHub Desktop.
Save LauraCortes/020b0a4dc8e25070a42421382324109d to your computer and use it in GitHub Desktop.
Download ZIP
Scatterplot
Raw
.block
license: mit
height: 650
Raw
README.md
Raw
data.json
[{"process":"process1","role":"role1", "hours":120},
{"process":"process2","role":"role1", "hours":50},
{"process":"process2","role":"role2", "hours":85},
{"process":"process3","role":"role2", "hours":0},
{"process":"process3","role":"role3", "hours":180},
{"process":"process3","role":"role4", "hours":45},
{"process":"process3","role":"role5", "hours":40},
{"process":"process4","role":"role2", "hours":2},
{"process":"process4","role":"role4", "hours":95}]
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style media="screen">
body {
font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: rgb(128,128,128);
}
h1{
font-weight: normal;
font-size: 25px;
color: #777;
}
circle:hover{
opacity: .8;
}
.axis path,
.axis line {
fill: none;
stroke: rgb(197,197,197);
shape-rendering: crispEdges;
}
.axis text {
fill: rgb(128,128,128);
}
.axis text {
font-size: 12px;
}
</style>
<body>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,300" rel="stylesheet" type="text/css">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="http://d3-legend.susielu.com/d3-legend.min.js"></script>
<script>
//margin convention
var margin = {top: 10, right: 20, bottom: 60, left: 30},
width = 960 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
//create x and y scale. We'll set the domain later
var xScale = d3.scalePoint()
.range([ height , 0]);
var yScale = d3.scalePoint()
.range([ height , 0]);
//create svg container
var svg = d3.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
//load data
d3.json("data.json",function(error, data){
if(error)
{
console.warn('data.json error', error);
}
var color = d3.scaleSequential(d3.interpolateRgb("#0000FF","#FF0000"))
.domain([d3.min(data, function(d) { return d.hours; }),d3.max(data, function(d) { return d.hours; })]);
var legend = d3.legendColor()
.labelFormat(d3.format(".2f"))
.shapeWidth(30)
.cells(10)
.scale(color);
svg.append("g")
.attr("class", "legendQuant")
.attr("transform", "translate("+400+",20)");
svg.select(".legendQuant")
.call(legend);
//set scales domain
xScale.domain(data.map( function(d) {
return d.process;
}));
yScale.domain(data.map( function(d) {
return d.role;
}));
// x-axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate("+margin.top+"," + height + ")")
.call(d3.axisBottom(xScale))
.append("text")
.attr("class", "label")
.attr("x", width)
.attr("y", -6)
.style("text-anchor", "end")
.text("Processes");
// y-axis
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate("+ margin.top+",0)")
.call(d3.axisLeft(yScale))
.append("text")
.attr("class", "label")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Roles");
// draw dots
svg.selectAll(".dot")
.data(data)
.enter().append("circle")
.attr("class", "dot")
.attr("r", 3.5)
.attr("cx", function(d){return xScale(d.process) + margin.top;})
.attr("cy", function(d){return yScale(d.role);})
.style("fill", function(d) { return color(d.hours);})
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment