31:Te02,async function drawBars() { const dataset = await d3.json("https://gist.githubusercontent.com/stefanreifenberg/38c210ccfd90fa7daa4a2a5e1b461094/raw/66cadecac46057bfb52b266709da0adde5ad69db/climate_freiburg_2019.json") let dimensions = ({ height:500, width:window.innerWidth * 0.9, margin: { top: 20, right: 30, bottom: 70, left: 40, } }) dimensions.boundedWidth = dimensions.width - dimensions.margin.left - dimensions.margin.right dimensions.boundedHeight = dimensions.height - dimensions.margin.top - dimensions.margin.bottom const wrapper = d3.select("#wrapper") .append("svg") .attr("width", dimensions.width) .attr("height", dimensions.height) const bounds = wrapper.append("g") .style("transform", `translate(${dimensions.margin.left}px, ${dimensions.margin.top}px)`) bounds.append("g") .attr("class", "bins") bounds.append("line") .attr("class", "mean") bounds.append("g") .attr("class", "x-axis") .style("transform", `translateY(${dimensions.boundedHeight}px)`) .append("text") .attr("class", "x-axis-label") const metricAccessor = d => d.humidity const yAccessor = d => d.length const xScale = d3.scaleLinear() .domain(d3.extent(dataset, metricAccessor)) .range([0, dimensions.boundedWidth]) .nice() const binsGenerator = d3.histogram() .domain(xScale.domain()) .value(metricAccessor) .thresholds(12) const bins = binsGenerator(dataset) const yScale = d3.scaleLinear() .domain([0, d3.max(bins, yAccessor)]) .range([dimensions.boundedHeight, 0]) .nice() const barPadding = 1 let binGroups = bounds.select(".bins") .selectAll(".bin") .data(bins) binGroups.exit() .remove() const newBinGroups = binGroups.enter().append("g") .attr("class", "bin") newBinGroups.append("rect") newBinGroups.append("text") binGroups = newBinGroups.merge(binGroups) const barRects = binGroups.select("rect") .attr("x", d => xScale(d.x0) + barPadding) .attr("y", d => yScale(yAccessor(d))) .attr("height", d => dimensions.boundedHeight - yScale(yAccessor(d))) .attr("width", d => d3.max([0, xScale(d.x1) - xScale(d.x0) - barPadding])) const mean = d3.mean(dataset, metricAccessor) const meanLine = bounds.selectAll(".mean") .attr("x1", xScale(mean)) .attr("x2", xScale(mean)) .attr("y1", 0.5) .attr("y2", dimensions.boundedHeight) const xAxisGenerator = d3.axisBottom() .scale(xScale) const xAxis = bounds.select(".x-axis") .call(xAxisGenerator) const xAxisLabel = xAxis.select(".x-axis-label") .attr("x", dimensions.boundedWidth / 2) .attr("y", dimensions.margin.bottom - 20) .text("Humidity") binGroups.select("rect") .on("mouseenter", onMouseEnter) .on("mouseleave", onMouseLeave) const tooltip = d3.select("#tooltip") const formatHumidity = d3.format(".2f") function onMouseEnter(datum) { tooltip.select("#count") .text(yAccessor(datum)) tooltip.select("#range") .text([formatHumidity(datum.x0), formatHumidity(datum.x1)].join(" - ")) const x = xScale(datum.x0) + (xScale(datum.x1) - xScale(datum.x0)) / 2 + dimensions.margin.left const y = yScale(yAccessor(datum)) + dimensions.margin.top tooltip.style("transform", `translate(calc( -50% + ${x}px), calc( -100% + ${y}px))`) tooltip.style("opacity", 1) } function onMouseLeave(datum) { tooltip.style("opacity", 0) } }32:T437,html``33:[] 2f:{"title":"Humidity in 2019 for Freiburg im Breisgau, Germany","cells":[{"id":0,"value":"md`# Humidity in 2019 for Freiburg im Breisgau, Germany`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"{\n yield html`\n

\n Humidity: \n

\n days\n

`;\n drawBars();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"md`# Reference
\ndata source: https://darksky.net/dev
\nthanks to Amelia Wattenberger for the d3 tutorials (https://twitter.com/Wattenberger)`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}