D3 Block-a-Day: Day 12, January 12th, 2017

D3 Block-a-Day: Day 12, January, 12th 2017

New Year's Resolution for 2017: Make a D3 Block a day to teach myself D3. This is Number 12. This example steps away from maps. It's a pie/donut chart with a couple of mouseover effects. HUGE struggle to figure out how to get the count into the hole of the donut (Thanks @bclinkinbeard). Also playing with some CSS (a separate file for this example) to see what's possible.

<!DOCTYPE html>
<meta charset="utf-8">
<head>
    <title>D3 Block-a-Day: Day 12, January 12, 2017</title>
    <link rel="stylesheet" href="normalize.css">
</head>
<body>
    <script src="//d3js.org/d3.v4.min.js"></script>
    <div id="chart"></div>
    <script>

var dataset = [
          { label: 'Abulia', count: 10 },
          { label: 'Betelgeuse', count: 20 },
          { label: 'Cantaloupe', count: 30 },
          { label: 'Dijkstra', count: 40 }
        ];

var width = 960;
        var height = 600;
        var radius = Math.min(width, height) / 3;

var color = d3.scaleOrdinal(d3.schemeCategory20b);

var svg = d3.select('#chart')
          .append('svg')
          .attr('width', width)
          .attr('height', height)
          .append('g')
          .attr('transform', 'translate(' + (width / 2) +
            ',' + (height / 2) + ')');

var svgContainer = d3.select("#chart")
        	.append("svg")
          .attr("width", width)
          .attr("height", height);
         
        var arc = d3.arc()
          .innerRadius(100)
          .outerRadius(radius);

var pie = d3.pie()
          .value(function(d) { return d.count; })
          .sort(null);

var tooltip = d3.select('#chart')
          .append('div')
		      .attr('class', 'hidden tooltip');

https://d3js.org/d3.v4.min.js