basic

8 years ago · c3c9038d23
parent f84371eacc
commit c3c9038d23
2 changed files with 40 additions and 2 deletions
--- a/index.html
+++ b/index.html
@ -7,7 +7,9 @@
        <script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
    </head>
    <body>
-        <svg></svg>
+        <svg>
+            <g></g>
+        </svg>
        <script src="index.js" charset="utf-8"></script>
    </body>
 </html>
--- a/index.js
+++ b/index.js
@ -1 +1,37 @@
-console.log(d3);
+var WIDTH = 360;
+var HEIGHT = 360;
+
+var dataset = [
+    { label: 'Abulia', count: 10 },
+    { label: 'Betelgeuse', count: 20 },
+    { label: 'Cantaloupe', count: 30 },
+    { label: 'Dijkstra', count: 40 }
+];
+
+var radius = Math.min(WIDTH, HEIGHT) / 2;
+
+var color = d3.scaleOrdinal(d3.schemeCategory10);
+
+d3.select('svg')
+    .attr('width', WIDTH)
+    .attr('height', HEIGHT);
+
+var container = d3.select('g')
+    .attr('transform', 'translate(' + (WIDTH / 2) + ',' + (HEIGHT / 2) + ')'); //pie center is at 0,0
+
+var arc = d3.arc()
+    .innerRadius(100)
+    .outerRadius(radius);
+
+var pie = d3.pie()
+    .value(function(d) { return d.count; })
+    .sort(null);
+
+var path = container.selectAll('path')
+    .data(pie(dataset))
+    .enter()
+    .append('path')
+    .attr('d', arc)
+    .attr('fill', function(d) {
+        return color(d.data.label);
+    });