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 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment