Dashboard

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>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js