chart = {
const margin = ({top: 30, right: 30, bottom: 30, left: 30})
const bgColor = "#efefef"
const width = 800 - margin.left - margin.right
const height = 600 - margin.top - margin.bottom
const svg = d3.create("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
let chart = svg
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
// background
chart
.append("rect")
.attr("height", height)
.attr("width", width)
.attr("fill", bgColor)
// mock data
let data = [
{ name: "A", value: 100 },
{ name: "B", value: 40 },
{ name: "C", value: 75 },
{ name: "D", value: 17 },
{ name: "E", value: 3 }
];
d3.interval(function() {
data = data.map( function(d) {
d.value = Math.floor(Math.random() * 100);
return d;
});
draw(data);
}, 2500)
// categorical scale
const cat_scale = [
{ name: "A", start: 0, end: 20},
{ name: "B", start: 20, end: 40},
{ name: "C", start: 40, end: 60},
{ name: "D", start: 60, end: 80},
{ name: "E", start: 80, end: 100}
];
var n_scr = data.length
const barWidth = (width / n_scr) * .5
var scX = d3.scaleLinear().domain([0, n_scr]).range([ 0, width]);
var scY = d3.scaleLinear().domain([0, 100]).range([height, 0]);
var scCol = d3.scaleOrdinal(d3.schemeRdYlGn[5]);
// draw scale in background
const stripeWidth = scY(0) - scY(20)
chart
.append("g")
.selectAll("rect")
.data(cat_scale)
.enter()
.append("rect")
.attr("fill", (d, i) => d3.rgb(scCol(i)).copy({opacity: 0.2}))
.attr("x", (d) => 0 ).attr( "y", (d) => scY(d.start) - stripeWidth)
.attr("width", width ).attr( "height", stripeWidth )
// draw bars
let sliderGroup = chart
.append("g")
function draw(data) {
var bars = sliderGroup.selectAll("rect")
.data(data, (d) => d.name)
bars
.enter()
.append("rect")
.style("fill", (d,i) => d3.rgb(scCol(i)).toString())
.attr("x", (d,i) => scX(i)).attr("y", (d,i) => scY(0) - scY(d.value))
.attr("width", barWidth * 1.7 ).attr( "height", d => scY(d.value))
.attr("rx", 5).attr("ry", 5)
//.attr("transform", (d,i) => "translate(" + scX(i) + ",0)")
// merge with new sliders
.merge(bars)
.transition().duration(500).delay(100)
.attr( "height", d => scY(d.value)).attr("y", (d,i) => scY(0) - scY(d.value))
.style("fill", (d,i) => d3.rgb(scCol(i)).toString())
}
draw(data)
return svg.node();
}
d3
height = 500
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.
