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}, 30)`)
.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));
// .attr("transform", `translate(0, height- margin.top -margin.bottom`);
g.select(".yAxis")
.call(d3.axisLeft(y));
// CREATE BAR chart from GROUPED data
// GET x=> first element which is CATEGORICAL
// Y => length of the SECOND grouped element
// WIDTH of the Categorical values
/// 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(stacked_data)
.join("g")
.attr("class", "series")
.attr("fill", d=> color(d.key))
.selectAll(".bar")
.data( d=> d)
.join("rect")
.attr("class", "bar")
.attr("x", d => x(d.data[x_attr])) // select the first grouped element
.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])) // SELECT second element
// .style("fill", "steelblue");
// TEXT-VALUE
// g.selectAll(".value")
// .data(grouped_data)
// .join("text")
// .attr("class", "value")
// .attr("x", grp => x(grp[0] + x.bandwidth() / 2 )) // select the first grouped element
// .attr("y", grp => y(grp[1].length ) - 3)
// .text(gr => gr[1].length)
// .style("fill", "black");
return svg.node();
}
// Attribute from the data: Island
colorAttr= "Island"
color= d3.scaleOrdinal( d3.schemePastel1)
.domain(data.map( d=> d[colorAttr]))
iwidth= width - margin.left - margin.right
iheight= height - margin.top - margin.bottom
// requires pivot
tableData= groupToStack( data, x_attr, colorAttr)
stacked_data= d3.stack().keys(color.domain())(tableData)
grouped_data= d3.groups( data, d=> d[x_attr], d => d[colorAttr])
x.domain()
// x scale from x-attribute
x= d3.scaleBand()
//.domain([0, d3.max(data, d => d[x_attr])])
.domain( data.map(d => d[x_attr]))
.range([0, iwidth])
.padding(0.3)
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()
// test
y.domain()
y
attrs= Object.keys(data [0])
quant= attrs.filter( a => typeof data[0][a] === "number")
categorical= attrs.filter( y => data[0][y] !== "number")
x_attr= "Species"
y_attr= "Count"
margin= ({ left: 40, top: 20, bottom: 50, right: 20})
data= vegaData["penguins.json"]()
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.
