md`# LapiGauge `
chart = {
var width = 150, height = 150, margin = 5, endAngle = Math.PI/2, startAngle = -endAngle, radius= width/2 - (margin*2);
var crOuterRadius = radius, crInnerRadius = crOuterRadius*0.95;
var gWidth = 20, gOuterRadius = crInnerRadius * 0.95, gInnerRadius = gOuterRadius - gWidth;
var crColorsClasses = ['sector_one','sector_two','sector_three','sector_four'];
var neddleTop = crOuterRadius + 2;
var values = [12.3349, 23.498, 31.1243, 45.6404, 113.4442];
const svg = d3.create("svg").attr('viewBox', '0 0 '+width+' '+height*0.6)
.attr('class','lapi-gauge');
//svg.call(dropShadow);
const g = svg.append('g').attr('transform', 'translate(' + width/2 + ',' + (height/2) + ')');
//const gn = svg.append('g').attr('transform', 'translate(' + width/2 + ',' + (height/2) + ')');
g.call(dropShadow);
let scale = d3.scaleLinear().range([startAngle, endAngle]).domain([d3.min(values), d3.max(values)]);
let arco = d3.arc().innerRadius(gInnerRadius).outerRadius(gOuterRadius)
.startAngle(el => el[0]).endAngle(el => el[1]);
let backarc = g.append('path').attr('d', arco([startAngle, endAngle])).attr('class','backarc');
let referencia = g.append('path').attr('class','reference')
.attr('d', arco([-Math.PI/2,scale(96)]));
let setores = arcs(values,crInnerRadius, crOuterRadius);
g.selectAll('path.setores').data(setores).enter().append('path').attr('class','setores')
.attr('class', (el,i) => crColorsClasses[i])
.attr('d', el => el);
let neddle = g.append('path').attr('class', 'neddle')
.attr('filter', 'url(#fDrop)')
.attr('d', d3.line()([[-2, -30],[2,-30],[0,-neddleTop],[-2, -30]]))
.attr('transform', 'rotate(-90)');
neddle.transition().duration(5000)
.attr('transform', 'rotate(45)');
g.append('text').attr('x', (gInnerRadius+gWidth/2)).attr('y', 10)
.attr('class', 'gauge-texto').attr('text-anchor','middle')
.text(d3.max(values).toFixed(2));
g.append('text').attr('x', -(gInnerRadius+gWidth/2)).attr('y', 10)
.attr('class', 'gauge-texto').attr('text-anchor','middle')
.text(d3.min(values).toFixed(2));//.style('fill','white');
g.append('text').attr('x', 0).attr('y', 10)
.attr('class', 'gauge-texto subtitle').attr('text-anchor','middle')
.text('Subtítulo');
g.append('text').attr('x', 0).attr('y', -5)
.attr('class', 'gauge-texto center-value').attr('text-anchor','middle')
.text('96,00');
return svg.node();
}
html`<style>
.lapi-gauge{
background-color:#323232;
}
.neddle{
fill:#85868a;
/*stroke:black;
stroke-width:0.01em;*/
}
.gauge-texto{
font-family: Verdana, Arial, Helvetica, sans-serif;
fill:white;
font-size:0.25em;
}
.subtitle{
font-size:0.35em;
}
.center-value{
font-size:0.65em;
}
path.reference{
fill:#e08f32;
}
path.backarc{
fill:#515152;
}
path.sector_one{
fill:#EE462C;
}
path.sector_two{
fill:#f48803
}
path.sector_three{
fill:#c0ba22
}
path.sector_four{
fill:#32965d
}
</style>`
d3 = require('d3@5');
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
