D3 Histogram BAR CHART
chart= {
const target= html`<svg viewBox="0 0 ${width} ${height}">`;
const svg= d3.select(target);
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
g.selectAll(".bar")
.data(grouped_data)
.join("rect")
.attr("class", "bar")
.attr("x", grp => x(grp[0])) // select the first grouped element
.attr("width", x.bandwidth())
.attr("height", gr => iheight - y(gr[1].length))
.attr("y", grp => y(grp[1].length))
.style("fill", "blue");
// 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 ) - 10)
.text(gr => gr[1].length)
.style("fill", "black");
return target;
}
iwidth= width - margin.left - margin.right
iheight= height - margin.top - margin.bottom
grouped_data= d3.groups( data, d=> d[x_attr])
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.4)
y.domain()
y= d3.scaleLinear()
.domain([ 0, d3.max(grouped_data, grp => grp[1].length)])
.range([ iheight,0])
.nice()
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"
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.
