{ const margin = {top: 36, left: 0} const svg = html`` const xScale = d3.scaleBand() .domain(_.keys(data)) .range([0, example.width]) .padding(example.padding) const max = d3.max(data, d => d) const yScale = d3.scaleLinear() .domain([0, max]) .range([example.height, 0]) const group = d3.select(svg).append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`) // bars group.selectAll('rect') .data(data).enter().append('rect') .attr('x', (d, i) => xScale(i)) .attr('y', d => yScale(d)) .attr('height', d => example.height - yScale(d)) .attr('width', xScale.bandwidth()) .attr('stroke-width', 3) .attr('stroke', 'plum') .attr('fill', 'pink') const text = group.selectAll('text') .data(data).enter().append('text') .attr('y', d => yScale(d)) .style('font-family', 'monospace') .style('font-size', '.75em') text.selectAll('tspan') .data((d, i) => { const x = xScale(i) + xScale.bandwidth() / 2 return [{ x, dy: '-1.5em', text: `x: ${_.round(xScale(i))}px`, // text: `xScale(${i})//${_.round(xScale(i))}px`, }, { x, dy: '1.1em', text: `y: ${_.round(yScale(d))}px`, // text: `yScale(${d})//${_.round(yScale(d))}px`, }] }).enter().append('tspan') .attr('x', d => d.x) .attr('text-anchor', 'middle') .attr('dy', d => d.dy) .text(d => d.text) // return html` // ${svg} //

${data.map((d, i) => {
//     return `
// xScale(${i}) // x: ${_.round(xScale(i))}
// yScale(${d}) // y: ${_.round(yScale(d))}
//     ` 
//   })}

// ` return svg }