Published
Edited
Jun 20, 2020
1 star
chart.drawData(week)
md`Calling \`enter.transition()\` directly causes Observable to explode with the unhelpful message "Error", while doing this for update and exit is fine. I'm really not clear on why. To workaround it, I can use \`call\`:
~~~js
enter
…
.call(rect => rect
.transition(d3.transition().duration(500))
.attr('y', d => y(d.y))
.attr('height', d => height - margin.bottom - y(d.y))
)
~~~
`
x = {
let domain = d3
.map(data, d => d.dayOfWeek)
.keys()
.sort()
let xScale = d3.scaleBand()
.domain(data.map(d => d.dayOfWeek).slice(2,9))
.range([margin.left, width - margin.right])
.padding(0.1);
return xScale;
}
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).tickSizeOuter(0)); //.tickFormat(d => d3.timeFormat("%a")(d).substring(0, 1)));
y = d3.scaleLinear()
.domain([0, d3.max(data, d => d.y)]).nice()
.range([height - margin.bottom, margin.top]);
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y))
.call(g => g.select(".domain").remove())
.call(g => g.select(".tick:last-of-type text").clone()
.attr("dy", "-1.5em")
.attr("x", -30)
.attr("text-anchor", "start")
.style("font-weight", 800)
.text(data.yAxisLabel));
accessibleDataTable = render_data_table(data, {caption: data.tableCaption, columns: data.slice[0], focusable: false})
weeks = d3.map(data, d => d.weekOfYear).keys()
data[0]
import { 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.
