function chart({
padding = 0,
paddingInner = padding,
paddingOuter = padding,
align = 0.5
} = {}) {
const height = 120;
const data = [{name: "One", value: 1750}, {name: "Two", value: 1640}];
const margin = {top: 0, right: 20, bottom: 20, left: 60};
const x = d3.scaleLinear()
.domain([0, d3.max(data, d => d.value)]).nice()
.rangeRound([margin.left, Math.min(640, width) - margin.right]);
const y = d3.scaleBand()
.domain(data.map(d => d.name))
.rangeRound([margin.top, height - margin.bottom])
.paddingInner(paddingInner)
.paddingOuter(paddingOuter)
.align(align);
return html`<svg style="width:100%;height:auto;" viewBox="0 0 ${width} ${height}">
<g transform="translate(0,${height - margin.bottom})">
${d3.create("svg:g")
.call(d3.axisBottom(x)
.ticks(Math.min(640, width) / 80)
.tickSize(-height)
.tickPadding(8))
.call(g => g.selectAll(".tick line").attr("stroke", (d, i) => i ? "#ccc" : null))
.call(g => g.select(".domain").remove())
.node()}
</g>
<g fill="steelblue">${data.map(d => svg`
<rect x="${x(0)}" y="${y(d.name)}" width="${x(d.value) - x(0)}" height="${y.bandwidth()}">`)}
</g>
<g transform="translate(${margin.left},0)">
${d3.create("svg:g")
.call(d3.axisLeft(y)
.tickSize(0)
.tickPadding(8))
.node()}
</g>
</svg>`;
}