Skip to content

Instantly share code, notes, and snippets.

@jfost00

jfost00/README.md

Last active March 6, 2016 05:27
Show Gist options
  • Save jfost00/61253c746b2c93acb672 to your computer and use it in GitHub Desktop.
Save jfost00/61253c746b2c93acb672 to your computer and use it in GitHub Desktop.
Download ZIP
Dashboard
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<style>
body {
margin: 0;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #5e6d7d;
}
/* svg { width:100%; height: 100% } */
.arcchart {
margin-left: 50px;
float: left;
color:white;
}
</style>
</head>
<body>
<div id=Design class="arcchart"></div>
<div id=Front-End class="arcchart"></div>
<div id=Back-End class="arcchart"></div>
<script>
var width = 200;
var height = 500;
var radius = Math.min(width, height) / 2;
var donutWidth = 20;
// Design chart //
var dcolor = ["#fdfd96", "#778899"]
var designdata = [{
"label": "Design",
"count": 74
}, {
"label": "off",
"count": 26
}]
var dsvg = d3.select('#Design')
.append('svg')
.attr('width', width)
.attr('height', height)
.append('g')
.attr('transform', 'translate(' +
(width / 2) + ',' + (height / 2) + ')');
var arc = d3.svg.arc()
.innerRadius(radius - donutWidth)
.outerRadius(radius);
var pie = d3.layout.pie()
.value(function(d) {
return d.count;
})
.sort(null);
var path = dsvg.selectAll('path')
.data(pie(designdata))
.enter()
.append('path')
.attr('d', arc)
.attr('fill', function(d, i) {
return dcolor[i];
})
.each(function(d) {
this._current = d;
});
dsvg.append("text")
.attr("x", 100)
.attr("y", 100)
.text("hello")
// front end chart //
var frontdata = [{
"label": "front",
"count": 46
}, {
"label": "off",
"count": 54
}]
var fcolor = ["#FF7878", "#778899"]
var fsvg = d3.select('#Front-End')
.append('svg')
.attr('width', width)
.attr('height', height)
.append('g')
.attr('transform', 'translate(' +
(width / 2) + ',' + (height / 2) + ')');
var arc = d3.svg.arc()
.innerRadius(radius - donutWidth)
.outerRadius(radius);
var path = fsvg.selectAll('path')
.data(pie(frontdata))
.enter()
.append('path')
.attr('d', arc)
.attr('fill', function(d, i) {
return fcolor[i];
})
.each(function(d) {
this._current = d;
});
// back end chart //
var backdata = [{
"label": "back",
"count": 62
}, {
"label": "off",
"count": 38
}]
var bcolor = ["#bdecb6", "#778899"]
var bsvg = d3.select('#Back-End')
.append('svg')
.attr('width', width)
.attr('height', height)
.append('g')
.attr('transform', 'translate(' +
(width / 2) + ',' + (height / 2) + ')');
var arc = d3.svg.arc()
.innerRadius(radius - donutWidth)
.outerRadius(radius);
var path = bsvg.selectAll('path')
.data(pie(backdata))
.enter()
.append('path')
.attr('d', arc)
.attr('fill', function(d, i) {
return bcolor[i];
})
.each(function(d) {
this._current = d;
});
</script>
</body>
Raw
performance.csv
label count
Design 74
Front-End 46
Back-End 62
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment