horizontalBarChart= (data, options)=> { options = options || {} const axisInc = options["axisInc"] || 10 const spacing = options["spacing"] || 6 const title = options["title"] || "" const description = options["description"] || "" const lineHeight = 8 const xAxisTickFormatFn = options["xAxisTickFormatFn"] || ((x)=>(x)) const betweenSectionPadding = 0.1 const barFn = options["barFn"] || ((data, params) => { const {x, y, margin} = params; return data.map( (d,i) => ( svg` `))}) const margin = ({top: 30, right: 20, bottom: 0, left: 110, spacing: spacing}) const width = 320; const height = 3*spacing * data.length; const xMax = Math.ceil(d3.max(data, d => d.value) / 10.0) * 10; const x = d3.scaleLinear() .domain([0, xMax]) .range([margin.left, width - margin.right]); const axisTop= d3.axisTop(x).tickFormat( xAxisTickFormatFn ) const xAxis = (g) => ( g .attr("transform", `translate(0,${margin.top-margin.spacing})`) .call(axisTop.tickValues(d3.range(0, xMax+1, axisInc))) .call(axisTop.tickSizeOuter(0).tickSize(4)) .call(g => (g.selection ? g.selection() : g).select(".domain").remove())) const y0Values = Array.from(new Set(data.map(d => d.names[0]))) const y0 = d3.scaleBand() .paddingInner(betweenSectionPadding) .domain(y0Values) .range([margin.top, height-margin.bottom]) // .align(0); const axisLeft1 = d3.axisLeft(y0) const y0Axis = (g) => g .attr("transform", `translate(${margin.spacing}, ${-y0.step()*0.5 + (y0.step()*betweenSectionPadding*0.5) + margin.spacing*0.7 })`) .call(axisLeft1.tickSize(0)) .call(g => (g.selection ? g.selection() : g).selectAll("text").style("text-anchor", "start")) .call(g => (g.selection ? g.selection() : g).select(".domain").remove()) const background = y0Values.map( (n,i) => { if (i!==0) { return svg` `}}) const rollup= d3.nest() .key(d=>d.names[0]) .object(data) const sections = Object.keys(rollup).map(name0=>{ const yValues = Array.from(new Set(rollup[name0].map(d => d.names[1]))) const y = d3.scaleBand() // .padding(0).paddingOuter(margin.spacing / y0.bandwidth()) .domain(yValues) .range([0, y0.bandwidth()]); // return y0.bandwidth() const axisLeft = d3.axisLeft(y).tickFormat((x)=>x) const yAxis = (g) => ( g .attr("transform", `translate(${margin.left-margin.spacing*0.5}, ${-margin.spacing*0.5})`) .call(axisLeft.tickSizeOuter(0).tickSize(0)) .call(g => (g.selection ? g.selection() : g).select(".domain").remove()) ) return svg` ${barFn(rollup[name0], {x, y, margin, width})} ${d3.select(svg``).call(yAxis).node()} `}) // return sections return html`

${title}

${description}

` }