Published
Edited
Sep 30, 2019
3 forks
Importers
8 stars
md`# Matthias D3 | Simple bar-chart with tooltip-hover`
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, chart_width, chart_height]);
svg.selectAll('rect')
.data(data)
.enter()
.append('rect')
.attr( 'x', function( d, i ){
return x_scale(i);
})
.attr( 'y', function(d ){
return chart_height - y_scale( d );
})
.attr( 'width', x_scale.bandwidth() )
.attr( 'height', function( d ){
return y_scale( d );
})
.attr( 'fill', '#7ED26D' )
.on('mouseover', function(){
d3.select(this)
.transition()
.attr('fill', '#0C9CDF');
})
.on('mouseout', function(){
d3.select(this)
.transition()
.attr('fill', '#7ED26D');
})
.attr('fill', '#7ED26D')
.append('title')
.text(function(d){
return d;
})
return svg.node();
}
d3 = require("d3@5")
chart_width = 800;
chart_height = 400;
data = [6,20,10,8,11,30,45,35,26]
x_scale = d3.scaleBand()
.domain(d3.range(data.length))
.rangeRound([0, chart_width])
.paddingInner(0.05);
y_scale = d3.scaleLinear()
.domain([
0,
d3.max(data)
])
.range([0, chart_height]);
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.
