31:Teb4,viz = { // render canvas const root = d3.select('#wrapper'); const wrapper = root .append('svg') .attr('role', 'figure') // a11y .attr("tabindex", "0") // a11y .attr('width', dimensions.width) .attr('height', dimensions.height); wrapper .append("title") // a11y .text("Histogram looking at the distribution of humidity in 2016"); const bound = wrapper .append('g') .attr('width', boundWidth) .attr('height', boundHeight) .attr( 'transform', `translate(${dimensions.margin.left}, ${dimensions.margin.top})` ); // render bins const binsGroup = bound .append('g') .attr('class', 'bins') .attr("tabindex", "0") // a11y .attr("role", "list") // a11y .attr("aria-label", "histogram bars"); // a11y const binGroups = binsGroup .selectAll("g") .data(bins) .join('g') .attr("tabindex", "0") // a11y .attr("role", "listitem") // a11y .attr( // a11y "aria-label", d => `There were ${yAccessor(d)} days between ${d.x0 .toString() .slice(0, 4)} and ${d.x1.toString().slice(0, 4)} humidity levels.` ); const barRects = binGroups .append("rect") .attr("x", d => xScale(d.x0) + barPadding / 2) .attr("y", d => yScale(yAccessor(d))) .attr("width", d => d3.max([0, xScale(d.x1) - xScale(d.x0) - barPadding])) .attr("height", d => boundHeight - yScale(yAccessor(d))) .attr("fill", "cornflowerblue"); // render bin labels const barText = binGroups .filter(yAccessor) .append("text") .text(yAccessor) .attr("x", d => xScale(d.x0) + (xScale(d.x1) - xScale(d.x0)) / 2) .attr("y", d => yScale(yAccessor(d)) - 5) .attr("text-anchor", "middle") .attr("fill", "darkgrey") .attr("font-size", "12px") .attr("font-family", "sans-serif"); // render mean line const meanLine = bound .append("line") .attr('class', 'mean') .attr("x1", xScale(mean)) .attr("x2", xScale(mean)) .attr("y1", -15) .attr("y2", boundHeight) .attr("stroke", "maroon") .attr("stroke-dasharray", "2px 4px"); // render mean line label const meanLabel = bound .append("text") .text("mean") .attr("x", xScale(mean)) .attr("y", -20) .attr("fill", "maroon") .attr("font-size", "12px") .attr('text-anchor', 'middle'); // render x axis const xAxis = bound .append('g') .call(xAxisGenerator) .attr('class', 'x-axis') .attr('transform', `translate(0, ${boundHeight})`); // render axis label const xAxisLabel = xAxis .append("text") .text("Humidity") .attr('class', 'x-axis-label') .attr("x", boundWidth / 2) .attr("y", dimensions.margin.bottom - 10) .attr("fill", "black") .attr("font-size", "1.4em"); wrapper // a11y .selectAll("text") .attr("role", "presentation") .attr("aria-hidden", "true"); // interactions binGroups .select("rect") .on("mouseenter", onMouseEnter) .on("mouseleave", onMouseLeave); const tooltip = d3.select("#tooltip"); function onMouseEnter(datum) { tooltip.select("#count").text(yAccessor(datum)); const formatHumidity = d3.format(".2f"); 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() { tooltip.style("opacity", 0); } return `Renders the chart`; }32:T43c,html` `33:[{"id":"b93eb9fca684a3458767b3e2efa40346d4171f1839349ae0e1e692f651137224fb85c52f5cf5427d68937d97f06fbebc571069dc1493877c394086210d486cd5","href":"https://static.observableusercontent.com/files/b93eb9fca684a3458767b3e2efa40346d4171f1839349ae0e1e692f651137224fb85c52f5cf5427d68937d97f06fbebc571069dc1493877c394086210d486cd5","name":"my_weather_data.json","type":"application/json","lastModified":1576798683831.711,"size":403005}] 2f:{"title":"Accessible Humidity Histogram with Tooltip","cells":[{"id":0,"value":"md`# Accessible Humidity Histogram with Tooltip\nRockville, MD, as of Dec. 19 2019, back up to 365 days\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":193,"value":"html`\n

\n Humidity: \n

\n days\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"md`### Helpers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"dimensions = {\n return {\n width,\n height: width * 0.6,\n margin: {\n top: 30,\n right: 10,\n bottom: 50,\n left: 50\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"boundWidth = dimensions.width - dimensions.margin.left - dimensions.margin.right","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"boundHeight = dimensions.height -\n dimensions.margin.top -\n dimensions.margin.bottom","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"barPadding = 1","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"metricAccessor = d => d.humidity","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"yAccessor = d => d.length","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"xScale = d3\n .scaleLinear()\n .domain(d3.extent(dataset, metricAccessor))\n .range([0, boundWidth])\n .nice()","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"xAxisGenerator = d3.axisBottom().scale(xScale)","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"binsGenerator = d3\n .histogram()\n .domain(xScale.domain())\n .value(metricAccessor)\n .thresholds(12)","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"bins = binsGenerator(dataset)","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"yScale = d3\n .scaleLinear()\n .domain([0, d3.max(bins, yAccessor)])\n .range([boundHeight, 0])\n .nice()","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"mean = d3.mean(dataset, metricAccessor)","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"md`### Styles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":155,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"dataset = FileAttachment('my_weather_data.json').json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"md`### Libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}