Built with blockbuilder.org
Learning about the difference between svg and g
Inspired by Sergui Firez -- Admin Dashboard Sketch
Built with blockbuilder.org
Learning about the difference between svg and g
Inspired by Sergui Firez -- Admin Dashboard Sketch
<!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> |
label | count | |
---|---|---|
Design | 74 | |
Front-End | 46 | |
Back-End | 62 |