forked from AntonOrlov's block: Radial Bar Chart built with D3
forked from eamonm95's block: Radial Bar Chart built with D3
license: gpl-3.0 |
forked from AntonOrlov's block: Radial Bar Chart built with D3
forked from eamonm95's block: Radial Bar Chart built with D3
name | value | |
---|---|---|
Jan | 432 | |
Feb | 340 | |
Mar | 382 | |
Apr | 398 | |
May | 410 |
<!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) * 1.1]) | |
.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> |
Year | Species | MetricTons | Pounds | $ | |
---|---|---|---|---|---|
1950 | OYSTEREASTERN | 13,586.8 | 29,953,500 | 11,094,772 | |
1951 | OYSTEREASTERN | 13,425.7 | 29,598,200 | 11,968,871 | |
1952 | OYSTEREASTERN | 15,611.7 | 34,417,600 | 14,876,975 | |
1953 | OYSTEREASTERN | 16,758.1 | 36,944,900 | 14,726,665 | |
1954 | OYSTEREASTERN | 18,864.1 | 41,587,800 | 18,860,250 | |
1955 | OYSTEREASTERN | 17,793.5 | 39,227,500 | 17,802,245 | |
1956 | OYSTEREASTERN | 16,812.2 | 37,064,100 | 18,692,542 | |
1957 | OYSTEREASTERN | 15,795.1 | 34,821,900 | 17,448,637 | |
1958 | OYSTEREASTERN | 17,023.7 | 37,530,400 | 20,793,964 | |
1959 | OYSTEREASTERN | 15,114.4 | 33,321,100 | 20,608,422 | |
1960 | OYSTEREASTERN | 12,297.1 | 27,110,100 | 19,309,170 | |
1961 | OYSTEREASTERN | 12,474.0 | 27,500,100 | 21,734,499 | |
1962 | OYSTEREASTERN | 9,043.6 | 19,937,500 | 15,956,201 | |
1963 | OYSTEREASTERN | 8,289.2 | 18,274,300 | 13,728,271 | |
1964 | OYSTEREASTERN | 10,023.5 | 22,097,900 | 15,805,701 | |
1965 | OYSTEREASTERN | 9,611.0 | 21,188,500 | 16,696,533 | |
1966 | OYSTEREASTERN | 9,630.5 | 21,231,300 | 14,542,519 | |
1967 | OYSTEREASTERN | 11,701.8 | 25,797,800 | 17,321,862 | |
1968 | OYSTEREASTERN | 10,286.9 | 22,678,500 | 15,259,201 | |
1969 | OYSTEREASTERN | 10,050.7 | 22,157,800 | 13,996,533 | |
1970 | OYSTEREASTERN | 11,189.6 | 24,668,500 | 15,080,438 | |
1971 | OYSTEREASTERN | 11,593.2 | 25,558,400 | 16,045,514 | |
1972 | OYSTEREASTERN | 10,916.8 | 24,067,200 | 15,316,352 | |
1973 | OYSTEREASTERN | 11,522.1 | 25,401,700 | 16,765,816 | |
1974 | OYSTEREASTERN | 11,349.9 | 25,022,000 | 17,551,613 | |
1975 | OYSTEREASTERN | 10,269.2 | 22,639,500 | 18,125,791 | |
1976 | OYSTEREASTERN | 9,509.4 | 20,964,400 | 21,747,615 | |
1977 | OYSTEREASTERN | 8,171.0 | 18,013,700 | 19,932,776 | |
1978 | OYSTEREASTERN | 10,187.9 | 22,460,200 | 24,865,360 | |
1979 | OYSTEREASTERN | 9,836.5 | 21,685,500 | 26,983,088 | |
1980 | OYSTEREASTERN | 10,338.0 | 22,791,100 | 29,323,120 | |
1981 | OYSTEREASTERN | 9,800.5 | 21,606,200 | 29,296,875 | |
1982 | OYSTEREASTERN | 7,949.2 | 17,524,700 | 25,768,326 | |
1983 | OYSTEREASTERN | 5,278.7 | 11,637,500 | 19,833,603 | |
1984 | OYSTEREASTERN | 5,608.3 | 12,364,000 | 26,201,124 | |
1985 | OYSTEREASTERN | 5,951.9 | 13,121,518 | 22,796,898 | |
1986 | OYSTEREASTERN | 6,233.3 | 13,742,039 | 29,122,608 | |
1987 | OYSTEREASTERN | 3,922.5 | 8,647,600 | 23,654,269 | |
1988 | OYSTEREASTERN | 2,420.3 | 5,335,800 | 15,005,011 | |
1989 | OYSTEREASTERN | 1,951.9 | 4,303,100 | 13,907,654 | |
1990 | OYSTEREASTERN | 2,048.0 | 4,515,113 | 15,919,310 | |
1991 | OYSTEREASTERN | 1,533.7 | 3,381,160 | 10,164,068 | |
1992 | OYSTEREASTERN | 995.4 | 2,194,468 | 6,756,722 | |
1993 | OYSTEREASTERN | 259.2 | 571,393 | 1,651,660 | |
1994 | OYSTEREASTERN | 507.3 | 1,118,410 | 3,459,752 | |
1995 | OYSTEREASTERN | 723.9 | 1,595,979 | 4,264,697 | |
1996 | OYSTEREASTERN | 475.6 | 1,048,469 | 3,314,827 | |
1997 | OYSTEREASTERN | 786.0 | 1,732,768 | 5,466,988 | |
1998 | OYSTEREASTERN | 1,217.3 | 2,683,729 | 8,292,803 | |
1999 | OYSTEREASTERN | 1,263.8 | 2,786,229 | 8,078,433 | |
2000 | OYSTEREASTERN | 1,148.2 | 2,531,302 | 7,671,056 | |
2001 | OYSTEREASTERN | 672.6 | 1,482,830 | 4,359,957 | |
2002 | OYSTEREASTERN | 301.3 | 664,182 | 2,488,701 | |
2003 | OYSTEREASTERN | 107.3 | 236,512 | 969,258 | |
2004 | OYSTEREASTERN | 39.6 | 87,233 | 377,128 | |
2005 | OYSTEREASTERN | 334.7 | 737,853 | 3,434,963 | |
2006 | OYSTEREASTERN | 124.3 | 274,060 | 1,240,486 | |
2007 | OYSTEREASTERN | 990.7 | 2,184,175 | 5,920,938 | |
2008 | OYSTEREASTERN | 465.0 | 1,025,130 | 5,377,700 | |
2009 | OYSTEREASTERN | 592.7 | 1,306,663 | 7,594,295 | |
2010 | OYSTEREASTERN | 734.1 | 1,618,365 | 9,587,200 | |
2011 | OYSTEREASTERN | 851.7 | 1,877,638 | 10,522,942 | |
2012 | OYSTEREASTERN | 1,170.6 | 2,580,754 | 17,658,958 | |
2013 | OYSTEREASTERN | 1,830.6 | 4,035,704 | 32,674,424 | |
2014 | OYSTEREASTERN | 2,250.3 | 4,961,090 | 44,785,315 | |
2015 | OYSTEREASTERN | 2,615.0 | 5,765,008 | 51,359,590 | |
2016 | OYSTEREASTERN | 2,254.5 | 4,970,184 | 46,102,267 |
�PNG | |