Skip to content

Instantly share code, notes, and snippets.

@rpruim

rpruim/index.html

Created January 20, 2020 22:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rpruim/2eaaf3f0ba80953c23ecfa935b93a017 to your computer and use it in GitHub Desktop.
Save rpruim/2eaaf3f0ba80953c23ecfa935b93a017 to your computer and use it in GitHub Desktop.
Download ZIP
Pie Chart
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title></title>
<script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>
<style>
div {
border: 3px solid red;
border-radius: 5;
margin: auto;
}
</style>
<h1>Pie Chart</h1>
<div class="pie-chart">
<svg class="pie-chart"></svg>
</div>
<script>
let width = 300
let height = 300
let pieRadius = 100
let cornerRadius = 5
let someData = [
{ class: 'soph', num_students: 10 },
{ class: 'junr', num_students: 20 },
{ class: 'senr', num_students: 27 },
]
colorScale = d3
.scaleOrdinal()
.domain(someData.map(d => d.class))
.range(['red', 'green', 'blue'])
let pieGenerator = d3
.pie()
.value(d => d.num_students)
.padAngle(0.03)
let arcGenerator = d3
.arc()
.innerRadius(0.3 * pieRadius)
.outerRadius(pieRadius)
.cornerRadius(cornerRadius)
d3.selectAll('div.pie-chart')
.style('width', width + 'px')
.style('height', height + 'px')
d3.selectAll('svg.pie-chart')
.attr('width', width)
.attr('height', height)
d3.select('svg.pie-chart')
.append('g')
.attr('transform', `translate(${1.5 * pieRadius}, ${1.5 * pieRadius})`)
.selectAll('path')
.data(pieGenerator(someData))
.enter()
.append('path')
.attr('d', arcGenerator) // think: d => arcGenerator(d)
.style('stroke', 'navy')
.style('fill', d => colorScale(d.data.class))
.style('fill-opacity', 0.3)
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment