forked from AntonOrlov's block: Radial Bar Chart built with D3
Created
June 12, 2020 15:03
-
-
Save ayala-usma/79726367a18f5f08e271d8fae1a47aba to your computer and use it in GitHub Desktop.
Radial Bar Chart built with D3
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: gpl-3.0 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
name | value | |
---|---|---|
agricultura | 22.6 | |
comercio | 20.6 | |
arte | 12.4 | |
manufactura | 9.5 | |
alojamiento | 9.0 | |
transporte | 7.5 | |
construccion | 6.9 | |
otros | 11.6 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>Household monthly electricity consumption</title> | |
<style> | |
body { | |
font: 12px sans-serif; | |
} | |
svg { | |
margin: 0px auto; | |
display: block; | |
} | |
path.arc { | |
opacity: 0.9; | |
transition: opacity 0.5s; | |
} | |
path.arc:hover { | |
opacity: 0.7; | |
} | |
.axis line, .axis circle { | |
stroke: #cccccc; | |
stroke-width: 1px | |
} | |
.axis circle { | |
fill: none; | |
} | |
.r.axis text { | |
text-anchor: end | |
} | |
.tooltip { | |
position: absolute; | |
display: none; | |
background: rgba(0, 0, 0, 0.6); | |
border-radius: 3px; | |
box-shadow: -3px 3px 15px #888; | |
color: white; | |
padding: 6px; | |
} | |
</style> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
</head> | |
<body> | |
<script> | |
const width = 960, | |
height = 500, | |
chartRadius = height / 2 - 40; | |
const color = d3.scaleOrdinal(d3.schemeCategory10); | |
let svg = d3.select('body').append('svg') | |
.attr('width', width) | |
.attr('height', height) | |
.append('g') | |
.attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')'); | |
let tooltip = d3.select('body').append('div') | |
.attr('class', 'tooltip'); | |
const PI = Math.PI, | |
arcMinRadius = 10, | |
arcPadding = 10, | |
labelPadding = -5, | |
numTicks = 10; | |
d3.csv('energy.csv', (error, data) => { | |
let scale = d3.scaleLinear() | |
.domain([0, d3.max(data, d => d.value) * 3.5]) | |
.range([0, 2 * PI]); | |
let ticks = scale.ticks(numTicks).slice(0, -1); | |
let keys = data.map((d, i) => d.name); | |
//number of arcs | |
const numArcs = keys.length; | |
const arcWidth = (chartRadius - arcMinRadius - numArcs * arcPadding) / numArcs; | |
let arc = d3.arc() | |
.innerRadius((d, i) => getInnerRadius(i)) | |
.outerRadius((d, i) => getOuterRadius(i)) | |
.startAngle(0) | |
.endAngle((d, i) => scale(d)) | |
let radialAxis = svg.append('g') | |
.attr('class', 'r axis') | |
.selectAll('g') | |
.data(data) | |
.enter().append('g'); | |
radialAxis.append('circle') | |
.attr('r', (d, i) => getOuterRadius(i) + arcPadding); | |
radialAxis.append('text') | |
.attr('x', labelPadding) | |
.attr('y', (d, i) => -getOuterRadius(i) + arcPadding) | |
.text(d => d.name); | |
let axialAxis = svg.append('g') | |
.attr('class', 'a axis') | |
.selectAll('g') | |
.data(ticks) | |
.enter().append('g') | |
.attr('transform', d => 'rotate(' + (rad2deg(scale(d)) - 90) + ')'); | |
axialAxis.append('line') | |
.attr('x2', chartRadius); | |
axialAxis.append('text') | |
.attr('x', chartRadius + 10) | |
.style('text-anchor', d => (scale(d) >= PI && scale(d) < 2 * PI ? 'end' : null)) | |
.attr('transform', d => 'rotate(' + (90 - rad2deg(scale(d))) + ',' + (chartRadius + 10) + ',0)') | |
.text(d => d); | |
//data arcs | |
let arcs = svg.append('g') | |
.attr('class', 'data') | |
.selectAll('path') | |
.data(data) | |
.enter().append('path') | |
.attr('class', 'arc') | |
.style('fill', (d, i) => color(i)) | |
arcs.transition() | |
.delay((d, i) => i * 200) | |
.duration(1000) | |
.attrTween('d', arcTween); | |
arcs.on('mousemove', showTooltip) | |
arcs.on('mouseout', hideTooltip) | |
function arcTween(d, i) { | |
let interpolate = d3.interpolate(0, d.value); | |
return t => arc(interpolate(t), i); | |
} | |
function showTooltip(d) { | |
tooltip.style('left', (d3.event.pageX + 10) + 'px') | |
.style('top', (d3.event.pageY - 25) + 'px') | |
.style('display', 'inline-block') | |
.html(d.value); | |
} | |
function hideTooltip() { | |
tooltip.style('display', 'none'); | |
} | |
function rad2deg(angle) { | |
return angle * 180 / PI; | |
} | |
function getInnerRadius(index) { | |
return arcMinRadius + (numArcs - (index + 1)) * (arcWidth + arcPadding); | |
} | |
function getOuterRadius(index) { | |
return getInnerRadius(index) + arcWidth; | |
} | |
}); | |
</script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
�PNG | |