2c:null 2d:["$","title",null,{"children":"Humidity in 2019 for Freiburg im Breisgau, Germany | Stefan Reifenberg | Observable"}] 32: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) } }33:T437,html``34:[] 30:{"id":"e59a3af9ab2959d3","slug":"humidity-in-2018-for-freiburg-im-breisgau-germany","title":"Humidity in 2019 for Freiburg im Breisgau, Germany","thumbnail":"7f22227e3984161f752d7b4e22ab1123189c2bd4638d4c79ee7aeae1c79f17dd","access_level":"public","create_time":"$D2019-11-15T18:47:14.973Z","update_time":"$D2020-04-23T13:15:23.536Z","view_time":null,"first_public_time":"$D2019-11-20T17:06:01.859Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"04db303633682fd6","login":"stefanreifenberg","name":"Stefan Reifenberg","avatar_url":"https://avatars-next.observableusercontent.com/d735f032fca99f985804a37915ca6302b07310c4b17f13aa4f12424c916256ae","tier":"starter_2024"},"version":70,"publish_version":70,"role":null,"authored":false,"authors":[{"type":"individual","id":"b1543f5b04f82ef1","login":"stefanreifenberg","name":"Stefan Reifenberg","avatar_url":"https://avatars-next.observableusercontent.com/d735f032fca99f985804a37915ca6302b07310c4b17f13aa4f12424c916256ae","tier":null}],"members":[{"type":"individual","id":"b1543f5b04f82ef1","login":"stefanreifenberg","name":"Stefan Reifenberg","avatar_url":"https://avatars-next.observableusercontent.com/d735f032fca99f985804a37915ca6302b07310c4b17f13aa4f12424c916256ae","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"b15eced9dd04a2ff","slug":"fullstack-d3","title":"fullstack d3","owner":{"id":"04db303633682fd6","login":"stefanreifenberg","name":"Stefan Reifenberg"}},"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined"},{"id":4,"value":"{\n yield html`\n

\n Humidity: \n

\n days\n

`;\n drawBars();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 31:"$30:body"