Skip to content

Instantly share code, notes, and snippets.

@jekkilekki jekkilekki/.block
Last active Jan 18, 2017

Embed
What would you like to do?
D3 Pie Chart - Year in Review
license: gpl-3.0

This is a pie chart I'm going to use in my Year in Review site. Currently running D3 version 3 - but I want to update to version 4 (different function calls).

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style-base.css">
<link rel="stylesheet" href="style.css">
<script src="https://d3js.org/d3.v3.min.js"></script>
</head>
<body>
<div class="wrap">
<section id="chart"></section>
</div>
<script src="script.js"></script>
</body>
</html>
var width = 960,
height = 450,
radius = Math.min(width, height) / 2;
var piedata = [
{
type: 'Business',
quantity: 12
},
{
type: 'Personal Development',
quantity: 6
},
{
type: 'Biography',
quantity: 4
},
{
type: 'Psychology',
quantity: 3
},
{
type: 'Fiction',
quantity: 2
}
];
var pie = d3.layout.pie()
.value( function(d) {
return d.quantity;
});
var arc = d3.svg.arc()
.outerRadius( radius )
.innerRadius( radius - 100 );
var pieChart = d3.select( '#chart' ).append( 'svg' )
.style( 'background', '#3399cc' )
.attr( 'width', width )
.attr( 'height', height )
.append( 'g' )
.attr( 'transform', 'translate(' + width / 2 + ',' + height / 2 + ')' )
.selectAll( 'path' ).data( pie(piedata) )
.enter().append( 'g' )
.attr( 'class', 'slice' );
var slices = d3.selectAll( 'g.slice' )
.append( 'path' )
.attr( 'fill', function(d,i) { return 'rgba(0,0,0,' + 1/(++i) + ')'; })
.attr( 'stroke', 'white' )
.attr( 'stroke-width', '3px' )
.transition().delay(function(d,i) { return i*360; }).duration(360).ease('linear')
.attrTween('d', function(d) {
var i = d3.interpolate(d.startAngle, d.endAngle);
return function(t) {
d.endAngle = i(t);
return arc(d);
}
});
var labels = d3.selectAll( 'g.slice' )
.append( 'text' ).transition().delay(function(d,i) { return i*500; })
.text( function(d,i) {
console.log(d);
return d.data.type;
})
.attr( 'text-anchor', 'middle' )
.attr( 'fill', 'white' )
.attr( 'font-size', '16px' )
.attr( 'transform', function(d) {
d.innerRadius = 0;
d.outerRadius = radius;
return 'translate(' + arc.centroid(d) + ')'
});
@import url('https://fonts.googleapis.com/css?family=Maven+Pro:400,700|Play:400,700');
/* Eric Meyer's Reset CSS v2.0 - http://meyerweb.com/eric/tools/css/reset/ - v2.0 | 20110126 - License: none (public domain) */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
/* Palette
blue #3399cc
periwinkle #91a8d0
gray #738290
darkgray #2b303a
wine #896978
green #839791
*/
* { position: relative; box-sizing: border-box; }
img { display: block; }
body { font-size: 16px; font-weight: 400; line-height: 1.2; font-family: 'Maven Pro', sans-serif; color: #738290; background: white; }
strong {
font-weight: 700;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Play', sans-serif;
font-weight: 700;
color: #2b303a;
margin-bottom: 1.2em;
}
h6 { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 1px; }
h5 { font-size: 1.1rem; text-transform: uppercase; }
h4 { font-size: 1.35rem; }
h3 { font-size: 1.5rem; }
h2 { font-size: 2rem; }
h1 { font-size: 3rem; }
p {
margin-bottom: 0.6em;
}
.container {
width: 80%;
max-width: 1200px;
margin: 0 auto;
margin-top: 1em;
}
@media all and (max-width: 500px) {
h2 {
padding-left: 1em;
text-align: center;
}
.container {
width: 100%;
}
}
#chart {
margin: 0 auto;
}
.wrap {
background: #3399cc;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.