31:T1209,viz = { // remove the previously rendered svg d3.select('#_svg').remove(); // render the canvas const root = d3.select('#wrapper'); const wrapper = root .append('svg') .attr('id', '_svg') .attr('width', dimensions.width) .attr('height', dimensions.height); const bounds = wrapper .append('g') .attr('width', boundWidth) .attr('height', boundHeight) .attr( 'transform', `translate(${dimensions.margin.left}, ${dimensions.margin.top})` ); // render dots const dots = bounds .selectAll('circle') .data(dataset) .join("circle") .attr("cx", d => xScale(xAccessor(d))) .attr("cy", d => yScale(yAccessor(d))) .attr("r", 3) .attr("fill", d => colorScale(colorAccessor(d))); // render axis const xAxis = bounds .append('g') .call(xAxisGenerator) .attr('transform', `translate(0, ${boundHeight})`); const yAxis = bounds.append('g').call(yAxisGenerator); // render axis labels const xAxisLabel = xAxis .append("text") .attr("x", boundWidth / 2) .attr("y", dimensions.margin.bottom - 10) .attr("fill", "black") .style("font-size", "1.4em") .html("Dew point (°F)"); const yAxisLabel = yAxis .append("text") .attr("x", -boundHeight / 2) .attr("y", -dimensions.margin.left + 10) .attr("fill", "black") .attr("font-size", "1.4em") .attr('transform', 'rotate(-90)') .attr('text-anchor', 'middle') .text("Relative humidity"); // draw peripherals const legendGroup = wrapper .append("g") .attr( "transform", `translate(${dimensions.width / 6},${dimensions.height / 5})` ); const legendTitle = legendGroup .append("text") .text("Cloudiness") .attr('y', '-5') .attr('font-size', '12') .attr('text-anchor', 'middle'); const defs = wrapper.append("defs"); const legendGradientId = "legend-gradient"; const gradient = defs .append("linearGradient") .attr("id", legendGradientId) .selectAll("stop") .data(colorScale.range()) .enter() .append("stop") .attr("stop-color", d => d) .attr( "offset", (d, i) => `${ (i * 100) / 2 // 2 is one less than our array's length }%` ); const legendWidth = 120; const legendHeight = 16; const legendGradient = legendGroup .append("rect") .attr("x", -legendWidth / 2) .attr("height", legendHeight) .attr("width", legendWidth) .style("fill", `url(#${legendGradientId})`); const legendValueRight = legendGroup .append("text") .attr("class", "legend-value") .attr("x", legendWidth / 2 + 10) .attr("y", '13') .text(d3.extent(dataset, colorAccessor)[1]); const legendValueLeft = legendGroup .append("text") .attr("class", "legend-value") .attr("x", -legendWidth / 2 - 10) .attr("y", '13') .text(d3.extent(dataset, colorAccessor)[0]) .style("text-anchor", "end"); // set up interactions const delaunay = d3.Delaunay.from( dataset, d => xScale(xAccessor(d)), d => yScale(yAccessor(d)) ); const voronoi = delaunay.voronoi(); voronoi.xmax = boundWidth; voronoi.ymax = boundHeight; bounds .selectAll(".voronoi") .data(dataset) .enter() .append("path") .attr("class", "voronoi") .attr("d", (d, i) => voronoi.renderCell(i)) .on("mouseenter", onMouseEnter) .on("mouseleave", onMouseLeave); const tooltip = d3.select("#tooltip"); function onMouseEnter(datum) { const dayDot = bounds .append("circle") .attr("class", "tooltipDot") .attr("cx", xScale(xAccessor(datum))) .attr("cy", yScale(yAccessor(datum))) .attr("r", 7) .style("fill", "maroon") .style("pointer-events", "none"); const formatHumidity = d3.format(".2f"); tooltip.select("#humidity").text(formatHumidity(yAccessor(datum))); const formatDewPoint = d3.format(".2f"); tooltip.select("#dew-point").text(formatDewPoint(xAccessor(datum))); const dateParser = d3.timeParse("%Y-%m-%d"); const formatDate = d3.timeFormat("%B %A %-d, %Y"); tooltip.select("#date").text(formatDate(dateParser(datum.date))); const x = xScale(xAccessor(datum)) + 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() { d3.selectAll(".tooltipDot").remove(); tooltip.style("opacity", 0); } return `Renders the chart`; }32:T446,html` `33:[{"id":"b93eb9fca684a3458767b3e2efa40346d4171f1839349ae0e1e692f651137224fb85c52f5cf5427d68937d97f06fbebc571069dc1493877c394086210d486cd5","href":"https://static.observableusercontent.com/files/b93eb9fca684a3458767b3e2efa40346d4171f1839349ae0e1e692f651137224fb85c52f5cf5427d68937d97f06fbebc571069dc1493877c394086210d486cd5","name":"my_weather_data.json","type":"application/json","lastModified":1576795167455.298,"size":403005}] 2f:{"title":"Dew Point and Humidity Correlation Scatterplot","cells":[{"id":0,"value":"md`# Dew Point and Humidity Correlation Scatterplot \n\n### with voronoi assisted tooltip\n\nRockville MD, as of Dec. 19 2019, back up to 365 days`","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"html`\n

\n\n

\n \n

\n Humidity: \n

\n Dew Point: \n

\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"md`### Helpers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"dimensions = {\n return {\n width,\n height: width,\n margin: {\n top: 10,\n right: 10,\n bottom: 50,\n left: 50\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"boundWidth = dimensions.width - dimensions.margin.left - dimensions.margin.right","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"boundHeight = dimensions.height -\n dimensions.margin.top -\n dimensions.margin.bottom","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"xAccessor = d => d.dewPoint","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"yAccessor = d => d.humidity","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"colorAccessor = d => d.cloudCover","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"xScale = d3\n .scaleLinear()\n .domain(d3.extent(dataset, xAccessor))\n .range([0, boundWidth])\n .nice()","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"yScale = d3\n .scaleLinear()\n .domain(d3.extent(dataset, yAccessor))\n .range([boundHeight, 0])\n .nice()","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"colorScale = d3\n .scaleLinear()\n .domain(d3.extent(dataset, colorAccessor))\n .range(['skyblue', 'darkslategrey'])","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"xAxisGenerator = d3.axisBottom().scale(xScale)","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"yAxisGenerator = d3\n .axisLeft()\n .scale(yScale)\n .ticks(4)","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"md`### Styles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"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":10,"value":"d3base = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"Delaunay = require('d3-delaunay')","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"d3 = {\n return {\n ...d3base,\n ...Delaunay\n };\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}