Skip to content

Instantly share code, notes, and snippets.

@SevenChan07

SevenChan07/.block

Last active June 8, 2018 02:56
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 SevenChan07/d2a0efcfb2e10e94d4d93fd6734b395a to your computer and use it in GitHub Desktop.
Save SevenChan07/d2a0efcfb2e10e94d4d93fd6734b395a to your computer and use it in GitHub Desktop.
Download ZIP
spark
Raw
.block
license: gpl-3.0
height: 700
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
</style>
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
let width = 600,
height = 500
let svg = d3.select("body").insert("svg")
.attr("width", width)
.attr("height", height)
let margin = {top: 200, right: 180, bottom: 30, left: 200},
g = svg.append('g').attr('transform', `translate(${margin.left}, ${margin.top})`)
let stack = d3.stack()
let color = d3.scaleOrdinal(d3.schemeCategory20)
let newData = []
for (let i = 0 ; i < 100 ; i += 1) {
const a = parseInt(Math.random() * 30)
const b = parseInt(Math.random() * 30)
const c = parseInt(Math.random() * 30)
const sum = a + b + c
newData.push({
name: 'arc' + i,
aaa: a,
bbb: b,
ccc: c,
total: sum
})
}
newData.columns = [
'name',
'aaa',
'bbb',
'ccc'
]
const newArr = stack.keys(['aaa', 'bbb', 'ccc'])(newData)
newArr.forEach((item, i) => {
item.forEach((e, j) => {
var arc = d3.arc()
.innerRadius(e[0])
.outerRadius(e[1])
.startAngle(2 * Math.PI * j / item.length)
.endAngle(2 * Math.PI * (j + 1) /item.length)
g.append('path')
.style('fill', color(i))
.attr('d', arc)
})
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment