chart= {
const svg= d3.create("svg").attr("viewBox", [0 , 0 , width, height])
const g= svg
.append("g")
.attr("class", "gDrawing")
.attr("transform", `translate( ${margin.left}, ${margin.top})`);
//append axxis
//append axis LABELS, require transform on axisLABEL again
// update on grouping
g.append("g")
.attr("class", "xAxis")
.attr("transform", `translate(0, ${height - margin.top - margin.bottom })`)
.append("text")
.attr("class", "axisLabel")
.style("fill", "black")
.attr("transform", `translate( ${width - margin.left - margin.right}, 60) `)
.style("text-anchor", "end");
g.append("g")
.attr("class", "yAxis")
.append("text")
.attr("transform", `translate(10, -20)`)
.attr("class", "axisLabel")
.style("fill", "black")
.style("text-anchor", "middle");
// AXIS labels
g.select(".xAxis")
.call(d3.axisBottom(x))
.selectAll("text")
.style("font-size", 8)
.attr("transform", `translate(-18, 20) rotate(-65)`)
// y-axis
g.select(".yAxis")
.call(d3.axisLeft(y));
/// INSTRUCTIONS:
// INFO: we create SERIES of groupings. Inside groupings we select every BAR
// 1. FIRST passing all STACKED data, passing `key` from the in-built ARRAY
// 2. SECOND data will be automatically nested dataset from the PARENT `.data(d => d)`
g.selectAll(".series")
//.data(series)
.data(stacked_data)
.join("g")
.attr("class", "series")
.attr("fill", d=> color(d.key))
.selectAll("rect")
.data( function(d) { return d; })
.enter()
.join("rect")
.append("rect")
// .attr("x", d => x(d.data[x_attr])) // select the first grouped element
.attr("x",function(d) { return x(x_attr)} )
.attr("y", function(d) { return y(d[0] + d[1] -0.025); })
.attr("height", d => iheight - y(d[1] - d[0]) ) // from where it starts and ends
.attr("width", x.bandwidth())
// .attr("y", function(d) { return y(att)})
// .selectAll(".bar")
// .data( d=> d)
// .join("rect")
// .attr("class", "bar")
// // .attr("x", d => x(d.data[x_attr])) // select the first grouped element
// .attr("x", d => x(d.data[x_attr]) )
// .attr("width", x.bandwidth())
// .attr("height", d => iheight - y(d[1] - d[0])) // from where it starts and ends
// .attr("y", d => y(d[1]));
// // .attr("y", function(d) { return y(att)})
return svg.node();
}
x_attr
attrs
stacked_data
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).tickSizeOuter(0))
//.call(g => g.selectAll(".domain").remove())
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y).ticks(null, "s"))
.call(g => g.selectAll(".domain").remove())
color
iwidth= width - margin.left - margin.right
iheight= height - margin.top - margin.bottom
// grouped_data= d3.groups( data_1, d=> d[x_attr], d => d[colorAttr])
// grouped_data= d3.stack()
// .keys(data_1.columns.slice(1))
// data_1.filter(d => d[x_attr])
x.domain()
x= d3.scaleBand()
.domain(x_attr)
.range([0, iwidth])
.padding(0.7)
y.domain()
y= d3.scaleLinear()
.domain([ 0, d3.max(stacked_data, d => d3.max(d, e => e[1]))]) // Retrieve the NESTED structure
.range([ iheight, 0])
.nice()
// y= d3.scaleLinear()
// //.domain([ 0, d3.max(series, d => d3.max(d, e => e[1]))]) // Retrieve the NESTED structure
// .domain([0, 2000])
// .range([ iheight, 0])
// .nice()
series= d3.stack()
.keys(data_1.columns.slice(0))
(data_1)
//.map(d => (d.forEach( v => v.key = d.key), d))
stacked_data= d3.stack().keys(color.domain())(tableData)
// requires pivot
tableData= groupToStack( data_1, x_attr, colorAttr)
data_1[0]
colorAttr= "Site"
color= d3.scaleOrdinal( d3.schemePastel1)
.domain(data_1.map( d=> d[colorAttr]))
// color= d3.scaleOrdinal( d3.schemeGnBu[9].slice(2))
// .domain(data_1.map( d=> d.Site))
// Object.keys(data_1[4])
attrs= data_1.map( d => d.Site)
x_attr= data_1.columns.slice(2, -1)
margin= ({ left: 40, top: 20, bottom: 50, right: 20})
Inputs.table(data_1)
workbook = FileAttachment("Target Stats - 230221_testing.xlsx").xlsx();
data_1= workbook.sheet(0, { headers: true})
// {
// // const zip = await FileAttachment("Target Stats - 230221.xlsx").zip();
// const workbook = await FileAttachment("Target Stats - 230221@1.xlsx").xlsx();
// return workbook.sheet(1, { headers: true });
// }
// data= FileAttachment("Target Stats - 230221.xlsx")
// vegaData= require("vega-datasets@2")
height= 400
d3= require("d3@6")
import { slider, select } from "@jashkenas/inputs"
// IMPORT group stack
import { groupToStack } from "@john-guerra/d3-stack-with-d3-group"
// LEGEND
import { swatches } from "@d3/color-legend"
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.
