dataviz & research
Published
Edited
Jan 28, 2022
Grouped bar chart
Lien vers le notebook avec stocks data https://observablehq.com/d/b7241bb20e5daaff
height = 200
grouped_chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
// affichage des années
const x = d3.scaleBand()
.domain(years)
.range([0, width])
.padding(.2)
const x2 = d3.scaleBand()
.domain(symbols)
.range([0, x.bandwidth()])
// affichage des entreprises / années
const y = d3.scaleLinear()
.domain([0, d3.max(data, d => d.price)])
.range([0, height])
const c = d3.scaleOrdinal(d3.schemeCategory10).domain(symbols)
const g = svg.selectAll("g").data(Array.from(grouped_data)).enter().append("g")
.attr("transform", d => "translate(" + x(d[0]) +", 0)")
const rect = g.selectAll("rect")
.data(d => { return Array.from(d[1]) })
.enter().append("rect")
.attr("width", x2.bandwidth())
.attr("height", d => y(d[1]))
.attr("y", d => height - y(d[1]))
.attr("x", d => x2(d[0]))
.attr("fill", d=>c(d[0]))
g.append("text")
.attr("y", 20)
.attr("x", x.bandwidth()/2)
.text(d => d[0])
return svg.node()
}
Array.from(grouped_data)
years = Array.from(grouped_data).map(d => d[0])
symbols = Array.from(Array.from(grouped_data)[0][1]).map(d=>d[0])
grouped_data = d3.rollup(data, v => d3.mean(v, v => v.price), d => d.date.getFullYear(), d => d.symbol)
grouped_data2 = d3.rollup(data, v => {
let r = {}
r.m = d3.mean(v, v => v.price)
r.d = data
return r;
}, d => d.date.getFullYear(), d => d.symbol)
data = d3.csv("https://raw.githubusercontent.com/LyonDataViz/MOS5.5-Dataviz/master/data/stocks.csv", d => {
d.price = +d.price
d.date = parseDate(d.date)
return d
})
parseDate = d3.timeParse("%b %Y")
fruits = [
{month: new Date(2015, 0, 1), apples: 3840, bananas: 1920, cherries: 960, dates: 400},
{month: new Date(2015, 1, 1), apples: 1600, bananas: 1440, cherries: 960, dates: 400},
{month: new Date(2015, 2, 1), apples: 640, bananas: 960, cherries: 640, dates: 400},
{month: new Date(2015, 3, 1), apples: 320, bananas: 480, cherries: 640, dates: 400}
];
stack = d3.stack()
.keys(["apples", "bananas", "cherries", "dates"])
.order(d3.stackOrderNone)
.offset(d3.stackOffsetNone);
data_stacked = stack(fruits)
max = d3.max(data_stacked[data_stacked.length - 1].map(d => d[1]))
months = data_stacked[0].length
stacked_chart()
stacked_chart = d => {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
const x = d3.scaleBand()
.domain(d3.range(months))
.range([0, width])
.padding(.2)
const y = d3.scaleLinear()
.domain([0, max])
.range([height, 0])
const c = d3.scaleOrdinal(d3.schemeCategory10).domain(symbols)
const g = svg.selectAll("g")
.data(data_stacked).enter().append("g")
.attr("transform", (d, i) => "translate(" + x(i) +", 0)")
.selectAll("rect")
.data(d => d)
.enter().append("rect")
.attr("x", function(d, i) { return x(i); })
.attr("y", function(d) { return y(d[0]); })
.attr("height", function(d) { return y(d[1] - d[0]); })
.attr("width",x.bandwidth())
.attr("stroke", "black")
.attr("fill", (d, i) => c(i))
// const rect = g.selectAll("rect")
// .data(d => { return Array.from(d[1]) })
// .enter().append("rect")
// .attr("width", x2.bandwidth())
// .attr("height", d => y(d[1]))
// .attr("y", d => height - y(d[1]))
// .attr("x", d => x2(d[0]))
// .attr("fill", d=>c(d[0]))
return svg.node()
}
s = html`<input type="range" min="0" max="10">`
s.value
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.
