Published
Edited
Apr 20, 2021
2 stars
function chart(){
let tempY = extentsMoney;
const ssvg = d3.create("svg")
.attr("width", dimensions.width+margin.right+margin.left)
.attr("height", dimensions.height+margin.top+margin.bottom)
.style("background-color", "floralwhite");
xAxis(ssvg, extentsYear, [margin.left, dimensions.width]);
yAxis(ssvg, extentsMoney, [margin.bottom, dimensions.height - margin.top]);
let xscale = d3.scaleLinear()
.domain(extentsYear)
.range([margin.left, dimensions.width]);
let yscale = d3.scaleLinear()
.domain(extentsMoney)
.range([margin.bottom, dimensions.height - margin.top]);
let yearScale = d3.scaleLinear()
.domain([0,57])
.range([1962,2019]);
let colors = ['#B33300', '#CC80CC', '#66664D', '#991AFF', '#E666FF',
'#4DB3FF', '#1AB399','#E666B3', '#33991A', '#CC9999',
'#B3B31A', '#00E680', '#4D8066', '#809980', '#E6FF80',
'#1AFF33', '#999933','#FF3380', '#CCCC00', '#66E64D',
'#4D80CC', '#9900B3','#E64D66', '#4DB380', '#FF4D4D',
'#99E6E6','#FF6633', '#FFB399', '#FF33FF', '#FF0000',
'#00B3E6' ]
var y = d3.scaleBand() // x = d3.scaleBand()
.rangeRound([0, dimensions.height]) // .rangeRound([0, width])
.paddingInner(0.05)
.align(0.1);
var x = d3.scaleLinear()
.domain([0, extentsMoney[1]])
.range([margin.left, dimensions.width]);
// stack the data?
var stackedData = d3.stack()
.order(d3.stackOrderAscending)
.keys(keys2)
(transposedNonEstimate)
//stacked bars
// console.log(stackedData[0]);
// console.log(stackedData[1]);
for (let m = 0; m < keys2.length; m++) {
ssvg
.selectAll("mylayers")
.data(stackedData[m])
.enter()
.append("rect")
.attr("x", (d,i)=> xscale(parseInt(d.data.Year))-4)
.attr("y", (d,i)=> dimensions.height-yscale(d[1]))
.attr("width", 8)
.attr("height", d=> yscale(d[1])-yscale(d[0]))
.style("fill", colors[m])
.style("opacity", "0.5");
}
ssvg
.selectAll("legend")
.data(keys2)
.enter()
.append("rect")
.attr("x", (d,i)=>margin.left+(i%6)*120)
.attr("y", (d,i)=> dimensions.height+margin.bottom*1.5-(i%5)*25)
.attr("width", 10)
.attr("height", 10)
.style("fill", (d,i)=>colors[i])
.style("opacity", "0.5");
ssvg
.selectAll("legend")
.data(keys2)
.enter()
.append("text")
.attr("x", (d,i)=>margin.left+15+(i%6)*120)
.attr("y", (d,i)=> dimensions.height+margin.bottom*1.5-(i%5)*25 +7)
.style("font", "8px consolas")
.style("opacity", "1")
.text(d=>{console.log(d); return d})
return ssvg.node()
}
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.
