Published
Edited
Sep 7, 2022
3 stars
Inputs.table custom barchart
This notebook shows how to create your custom CSS barchart. Unlike the css barchart from inputs.Table notebook (see col1), this one handles negative values.
viewof selection = Inputs.table(data, {
columns: ["col1", "col2", "col3", "col4", "col5"],
header: {
col1: "col1",
col2: "col2",
col3: "col3",
col4: "col4",
col5: "col5"
},
format: {
col1: sparkbar(d3.max(data, d => d.col1)),
col2: mySparkbar(data.map(d => d.col2)),
col3: mySparkbar(data.map(d => d.col3)),
col4: mySparkbar(data.map(d => d.col4)),
col5: mySparkbar(data.map(d => d.col5))
}
}
)
data = d3.csvParse(`col1,col2,col3,col4,col5
1,1,9,-129211000,4035223
1,1,-0.038,-32548971,889488
3,3,0.315,-21405704,763153
1,1,0.957,-6113122,-3216988
-1,-1,-0.655,-2891304,-3738550
-2,-2,-0.197,2224970,-12984175
-6,-6,-0.140,2254267,-19741879
4,4,-0.230,19862231,-45711750
3,3,0.749,21000000,5000000
-1,-1,0.503,`, d3.autoType)
function mySparkbar(vals) {
var max = Math.max(...vals)
var min = Math.min(...vals)
var absMax = Math.max(Math.abs(min), max)
var scaleMultiplier = (50 - 2) / absMax
function sparkbarHelper(val, scaleMultiplier){
if( val >= 0 ){
var color = "green"
var start = 50
var end = 50 + val * scaleMultiplier + 2
var trns1 = 50
var trns2 = end
} else {
var color = "red"
var start = 50 - 2 - Math.abs(val) * scaleMultiplier
var end = 50
var trns1 = start
var trns2 = 50
}
return `background: linear-gradient(90deg, transparent, transparent ${trns1}%, ${color} ${start}%, ${color} ${end}%, transparent ${trns2}%)`
}
return x => htl.html`<div style=${sparkbarHelper(x, scaleMultiplier)}>${x}`
}
function sparkbar(max) {
return x => htl.html`<div style="
background: lightblue;
width: ${100 * x / max}%;
float: right;
padding-right: 3px;
box-sizing: border-box;
overflow: visible;
display: flex;
justify-content: end;">${x.toLocaleString("en")}`
}
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.
