Skip to content

Instantly share code, notes, and snippets.

@smokbel

smokbel/.block

Last active February 13, 2018 21:49
Show Gist options
  • Save smokbel/18cc22fbba1651b847f932a24776e2e6 to your computer and use it in GitHub Desktop.
Save smokbel/18cc22fbba1651b847f932a24776e2e6 to your computer and use it in GitHub Desktop.
Download ZIP
practice-d3
Raw
.block
license: MIT
border: no
scrolling: no
Raw
README.md
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horizontal Floating (Span) Chart</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
</body>
<script type="text/javascript" src="main.js"></script>
</html>
Raw
main.js
var data=[
{"category": "Datasets in Production", "title": 'Dataset Creation', "to": 2, "from": 0},
{"category": "Datasets in Production", "title": 'MO Briefing', "to": 2, "from":1},
{"category": "Datasets in Production", "title": 'Dataset Review - Open Data Team', "to": 5, "from":2},
{"category": "Datasets in Production", "title": 'Initial Risk Assessment Review', "to": 5, "from": 4},
{"category": "Datasets in Production", "title": 'Communication Plan - SP Portal', "to": 8, "from":5},
{"category": "Datasets in Approval", "title": 'Dataset Review - All Staff', "to": 8, "from": 5},
{"category": "Datasets in Approval", "title": 'Dataset Revisions (Staff Feedback)', "to": 9, "from": 8},
{"category": "Datasets in Approval", "title": 'Dataset Review - Service Providers', "to": 12, "from":9},
{"category": "Datasets in Approval", "title": 'Dataset Revisions (Services Provider Feedback)', "to": 13, "from": 12},
{"category": "Datasets in Approval", "title": 'Dataset Review/Approvals', "to": 18, "from": 13},
{"category": "Datasets in Approval", "title": 'Communication Plan - Dataset Postings', "to": 18, "from": 15},
{"category": "Datasets in Approval", "title": 'Submission to TBS', "to": 19, "from": 18},
{"category": "Released Datasets", "title": 'Posting on Geohub', "to": 19, "from": 18},
{"category": "Released Datasets", "title": 'Posting by TBS on Data Catalogue', "to": 20, "from": 19}
]
var margin = {top: 100, right: 50, bottom: 50, left: 250},
width = 900 - margin.left - margin.right,
height = 490 - margin.top - margin.bottom;
var y = d3.scale.ordinal()
.rangeRoundBands([0, height]);
var x = d3.scale.linear()
.range([0,width]);
var colors = d3.scale.linear()
.domain([0, data.length])
.range(["#68e6d8",
"#8584ec",
"#57aaa5",
"#86a0d6",
"#70c4e0"])
y.domain(data.map(function(d) { return d.title; }));
x.domain([d3.min(data,function(d){return d.from;}), d3.max(data,function(d){return d.to;})]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(10);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(14);
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 + ")");
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("x", width-70)
.attr("dy", "2.8em")
.text("Duration (Weeks)");
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
var chart =
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("y", function(d) { return y(d.title); })
.attr("height", (height-50)/data.length)
.attr("x", 0 )
.attr("width", 0 )
.attr("rx", 3.5)
.attr("fill", function(d,i){
return colors(i)
});
var tooltip = d3.select("body")
.append('div')
.attr('class', 'tooltip');
tooltip.append('div')
.attr('class', 'title');
tooltip.append('div')
.attr('class', 'dur');
tooltip.append('div')
.attr('class', 'category');
tooltip.append('div')
.attr('class', 'links');
svg.selectAll(".bar")
.on('mouseover', function(d,i) {
d3.select(this).transition()
.ease("quad")
.delay("100")
.duration("200")
.attr("r", 100)
tooltip.select('.title').html("<b>" + d.title + "</b>");
tooltip.select('.dur').html("<b>Duration: </b>" + (d.to - d.from) + " week(s)");
tooltip.select('.category').html("<b>Stage: </b>" + d.category);
tooltip.select('.links').html("View current Datasets in this stage")
tooltip.style('display', 'block');
tooltip.style('opacity',2);
})
.on('mousemove', function(d) {
tooltip.style('top', (d3.event.layerY + 10) + 'px')
.style('left', (d3.event.layerX - 25) + 'px');
})
.on('mouseout', function() {
tooltip.style('display', 'none');
tooltip.style('opacity',0);
});
chart.transition()
.attr("width", function(d) { return x(d.to)-x(d.from) })
.attr("x", function(d) { return x(d.from); })
.delay(function(d,i) {return i*50})
.duration(1000)
.ease(d3.easeSinInOut)
Raw
style.css
html {
background-color: ;
}
.bar {
}
.bar:hover {
opacity: 0.6;
}
.axis {
font: 11px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.tooltip {
background: rgba(70,206,224, 0.9);
box-shadow: 0 0 5px #999999;
border: 0.1rem solid #456d71;
color: #474747;
font-size: 12px;
font: 12.5px sans-serif;
left: 10px;
padding: 10px;
position: fixed;
text-align: center;
top: 95px;
z-index: 10;
display: block;
opacity: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment