31:Tf35,viz = { // accessor set up const dateParser = d3.timeParse('%Y-%m-%d'); // date format string should be exact const yAccessor = d => d.temperatureMax; const xAccessor = d => dateParser(d.date); // bound size set up const boundedWidth = dimensions.width - dimensions.margin.left - dimensions.margin.right; const boundedHeight = dimensions.height - dimensions.margin.top - dimensions.margin.bottom; // get DOM const root = d3.select('#wrapper'); const wrapper = root.append('svg'); // in Chrome, by default, SVG is 300*150 // set SVG to the wrapper size wrapper.attr('width', dimensions.width).attr('height', dimensions.height); // bound set up const bounds = wrapper .append('g') .attr( 'transform', `translate(${dimensions.margin.left}, ${dimensions.margin.right})` ); // scale set up const yScale = d3 .scaleLinear() .domain(d3.extent(dataset, yAccessor)) .range([boundedHeight, 0]); const xScale = d3 .scaleTime() .domain(d3.extent(dataset, xAccessor)) .range([0, boundedWidth]); // block out freezing temperatures const freezingTemperaturePlacement = yScale(32); const freezingTemperatures = bounds .append("rect") .attr("x", 0) .attr("width", boundedWidth) .attr("y", freezingTemperaturePlacement) .attr("height", boundedHeight - freezingTemperaturePlacement) .attr("fill", "#e0f3f3"); // line set up const lineGenerator = d3 .line() .x(d => xScale(xAccessor(d))) .y(d => yScale(yAccessor(d))); // append line const line = bounds .append("path") .attr("d", lineGenerator(dataset)) .attr("fill", "none") .attr("stroke", "#af9358") .attr("stroke-width", 1); // axis set up const yAxisGenerator = d3.axisLeft().scale(yScale); const xAxisGenerator = d3.axisBottom().scale(xScale); // append axis const yAxis = bounds.append("g").call(yAxisGenerator); const xAxis = bounds .append("g") .call(xAxisGenerator) .attr("transform", `translate(0, ${boundedHeight})`); // set up interactions const listeningRect = bounds .append("rect") .attr("class", "listening-rect") .attr("width", boundedWidth) .attr("height", boundedHeight) .on("mousemove", onMouseMove) .on("mouseleave", onMouseLeave); const tooltip = d3.select("#tooltip"); const tooltipCircle = bounds .append("circle") .attr("class", "tooltip-circle") .attr("r", 4) .attr("stroke", "#af9358") .attr("fill", "white") .attr("stroke-width", 2) .style("opacity", 0); function onMouseMove() { const mousePosition = d3.mouse(this); const hoveredDate = xScale.invert(mousePosition[0]); const getDistanceFromHoveredDate = d => Math.abs(xAccessor(d) - hoveredDate); const closestIndex = d3.scan( dataset, (a, b) => getDistanceFromHoveredDate(a) - getDistanceFromHoveredDate(b) ); const closestDataPoint = dataset[closestIndex]; const closestXValue = xAccessor(closestDataPoint); const closestYValue = yAccessor(closestDataPoint); const formatDate = d3.timeFormat("%B %A %-d, %Y"); tooltip.select("#date").text(formatDate(closestXValue)); const formatTemperature = d => `${d3.format(".1f")(d)}°F`; tooltip.select("#temperature").text(formatTemperature(closestYValue)); const x = xScale(closestXValue) + dimensions.margin.left; const y = yScale(closestYValue) + dimensions.margin.top; tooltip.style( "transform", `translate(` + `calc( -50% + ${x}px),` + `calc(-100% + ${y}px)` + `)` ); tooltip.style("opacity", 1); tooltipCircle .attr("cx", xScale(closestXValue)) .attr("cy", yScale(closestYValue)) .style("opacity", 1); } function onMouseLeave() { tooltip.style("opacity", 0); tooltipCircle.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":1576786151179.779,"size":403005}] 2f:{"title":"Daily Temperature Line Chart for One Year","cells":[{"id":0,"value":"md`\n# Daily Temperature Line Chart for One Year \n### with fluid tooltip\nRockville MD, as of Dec. 19 2019, back up to 365 days\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"html`\n

\n\n

\n \n

\n Maximum Temperature: \n

\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"dataset = FileAttachment('my_weather_data.json').json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":171,"value":"md`### Helpers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"// wrapper dimensions\ndimensions = {\n return {\n width,\n height: (width * 2) / 3,\n margin: {\n top: 15,\n right: 15,\n bottom: 40,\n left: 60\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":174,"value":"md`### Styles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"md`### Libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}