Built with blockbuilder.org
forked from anonymous's block: gauge with gradient
xxxxxxxxxx
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
.tooltip {
background-color: rgba(0,0,0,0.75);
padding: 15px;
border-radius: 2px;
font-family: sans-serif;
color: white;
pointer-events: none;
box-shadow: 0 0 5px #999999;
}
.chart-svg {
border: 1px solid #ddd;
}
.chart-legend {
font-family: 'Open Sans', sans-serif;
}
</style>
</head>
<body>
<script>
class Gauge {
constructor(options) {
this.options = options;
var {data, width, height, element} = this.options;
const svg = d3.select(element)
.append('svg')
.attr('class', 'chart-svg')
.attr('width', width)
.attr('height', height)
;
this.tooltip = d3.select(element)
.append('div')
.attr('class', 'tooltip')
.style('display', 'none')
;
const color = d3.scaleOrdinal(d3.schemeCategory20c)
;
const r = Math.min(width, height) / 3;
const arc = d3.arc()
.innerRadius(r - 60)
.outerRadius(r)
;
const pie = d3.pie()
.value(d => d.value)
;
const g = svg.append('g')
.attr('transform', `translate(${width/2},${height/2})`)
;
g.selectAll('.chart-arc')
.data(pie(data))
.enter()
.append('path')
.attr('class', 'chart-arc')
.attr('d', arc)
.style('fill', d => color(d.data.label))
.on('mouseover', this.mouseover.bind(this))
.on('mousemove', this.mousemove.bind(this))
.on('mouseout', this.mouseout.bind(this))
;
const l = svg.append('g')
.attr('transform', `translate(0,${height-20})`);
;
const xl = d3.scaleBand()
.range([0, width])
.padding(0.3)
.domain(data.map(d => d.label))
;
const legend = l.selectAll('.chart-legend')
.data(color.domain())
.enter()
.append('g')
.attr('class', 'chart-legend')
.attr('transform', (d, i) => `translate(${xl(d)},0)`)
;
legend.append('rect')
.attr('width', 12)
.attr('height', 12)
.style('fill', color)
;
legend.append('text')
.attr('x', 20)
.attr('y', 10)
.text(d => d)
;
}
mouseover() {
this.tooltip
.style('display', 'inline-block')
.style('position', 'absolute')
;
}
mousemove() {
this.tooltip
.text([d3.event.pageX, d3.event.pageY].join(','))
.style('left', d3.event.pageX + 10 + "px")
.style('top', d3.event.pageY + 10 + "px")
;
}
mouseout() {
this.tooltip
.style('display', 'none')
;
}
render() {
// move rendering logic down here
}
}
new Gauge({
element: 'body',
width: 600,
height: 400,
data: [
{value: 37, label: 'green'},
{value: 63, label: 'maroon'},
{value: 12, label: 'white'},
{value: 97, label: 'heck'}
]
});
</script>
</body>
https://d3js.org/d3.v4.min.js