Published
Edited
Apr 12, 2021
Insert cell
Insert cell
chart = {

var totalWidth = width + margin.left + margin.right;
var totalHeight = height + margin.top + margin.bottom;
const svg = d3.create("svg")
.attr("viewBox", [0, 0, totalWidth, totalHeight]);

var graphGroup = svg.append('g')
.attr('transform', "translate(" + margin.left + "," + margin.top + ")");

graphGroup.append("g")
.selectAll("g")
.data(stackedData)
.enter()
.append("g")
.selectAll("rect")
.data(function(d) {
return d;
})
.enter()
.append("rect")
.attr("fill", function(d) {
return colorScale(d.key);
})
.attr("x", function(d) {
return xScale(d.data.Date);
})
.attr("y", function(d) {
return yScale(d[1]);
})
.attr("height", function(d) {
return yScale(d[0]) - yScale(d[1]);
})
.attr("width", xScale.bandwidth());

return svg.node();
}
Insert cell
stackedData = data.map(function(d, i) {
/* var orderedKeys = subgroups.slice().sort(function(a, b) {
return d[a] - d[b];
});
*/
var orderedKeys = Object.keys(data[i]).slice(2);
console.log(orderedKeys);
var bottom = 0;

var result = orderedKeys.map(function(key) {
var value = d[key];
var result = [bottom, bottom + value];
result.data = d;
result.key = key;
bottom += value;
return result;
});
result.key = d.Date;
return result;
});
Insert cell
data = [
{"Date":"6/6/97","Location":"Brad Sands","Intro":119,"Verse1":156,"Coda":242, "Jam":0, "Verse3": 0},
{"Date":"8/11/98","Location":"Noblesville","Intro":74,"Verse1":216,"Coda":362, "Jam":120, "Verse3": 20},
{"Date":"8/1/98","Location":"Noblesville","Intro":74,"Verse1":216,"Coda":362, "Verse3":120, "Jam": 300}
]
Insert cell
subgroups = Object.keys(data[0]).slice(2);
Insert cell
colorScale = d3.scaleOrdinal()
.domain(subgroups)
.range(d3.schemeSpectral[subgroups.length]);
Insert cell
xScale = d3.scaleBand()
.domain(['6/6/97', '8/11/98', '8/1/98'])
.range([0, width])
.padding([.5]);
Insert cell
yScale = d3.scaleLinear()
.domain([0, 1500])
.range([height, 0]);
Insert cell
Insert cell
Insert cell
Insert cell
d3 = require("d3@6")
Insert cell

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.
Learn more