Published
Edited
Dec 17, 2018
1 fork
3 stars
md`# Progress Bar`
htmlElement = html`<div id="htmlSpace"></div>`
margin = { return {top:50, right: 20, bottom: 30, left: 40} }
x = d3.scaleLinear().range([0, width])
y = d3.scaleBand().range([height, 0]).padding(0.1)
y.domain(data.map((d) => { return d.salesperson }))
svg.selectAll(".bar").data(data).enter().append("rect").attr("class", "bar").attr('rx', 5).attr('ry', 5).attr('x', 0).attr("width", (d) => { 0 } ).attr("y", (d) => { return y(d.salesperson); } ).attr('height', 10).attr('transform', 'translate(' + 0 + ',' + ((y.bandwidth()/2)- 5) + ')').transition().duration(1500).delay((d, i) => { return i*250 }).attr('width', (d) => { return x(d.sales) }).attr('fill', (d,i) => { return colorScheme[i] } )
svg.selectAll("bar-background").data(data).enter().append("rect").attr("class", "bar-background").attr('rx', 5).attr('ry', 5).attr("width", width).attr("y", (d) => { return y(d.salesperson); } ).attr('height', 10).attr('transform', 'translate(' + 0 + ',' + ((y.bandwidth()/2)- 5) + ')').attr('fill', '#EBEBEB')
// svg.append("g").attr('transform', "translate(0 " + ',' + height + ')').attr('class', "x axis").call(d3.axisBottom(x))
// svg.append('g').attr('class', 'y axis').call(d3.axisLeft(y))
svg.selectAll('name').data(data).enter().append('text').attr('class', 'name').text((d) => {
return d.salesperson }).attr('x',0).attr('y', (d) => { return y(d.salesperson) }).attr('transform', 'translate(' + 0 + ',' + ((y.bandwidth()/2) - 15) + ')')
svg.selectAll('value').data(data).enter().append('text').attr('class', 'value').text((d) => {
return d.sales}).attr('x', width - margin.left).attr('y', (d) => { return y(d.salesperson) }).attr('transform', 'translate(' + 0 + ',' + ((y.bandwidth()/2) - 15) + ')')
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
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.
