40:null 41:["$","title",null,{"children":"Daily Temperature Line Chart for One Year | mpohorilak | Observable"}] 47: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`; }48:T446,html` `49:[{"id":"096f8cb2da06919932ec67f069e6226d1158fa2bb2920cbc5bd2b228040f5102444313c6119c69889a3627f78f95e15a5360fbdd8fabdc06d2e385ae90da4b81","href":"https://static.observableusercontent.com/files/096f8cb2da06919932ec67f069e6226d1158fa2bb2920cbc5bd2b228040f5102444313c6119c69889a3627f78f95e15a5360fbdd8fabdc06d2e385ae90da4b81","name":"my_weather_data2.json","type":"application/json","lastModified":1615501074686.65,"size":403006},{"id":"b93eb9fca684a3458767b3e2efa40346d4171f1839349ae0e1e692f651137224fb85c52f5cf5427d68937d97f06fbebc571069dc1493877c394086210d486cd5","href":"https://static.observableusercontent.com/files/b93eb9fca684a3458767b3e2efa40346d4171f1839349ae0e1e692f651137224fb85c52f5cf5427d68937d97f06fbebc571069dc1493877c394086210d486cd5","name":"my_weather_data@1.json","type":"application/json","lastModified":1615501083258.358,"size":403005}] 45:{"id":"f7ccb6f557559731","slug":"daily-temperature-line-chart-for-one-year","title":"Daily Temperature Line Chart for One Year","thumbnail":"6480ef3163837eeaa062da3d6dc17dbb76ff7878cc5f67811fa53a3e3b420b74","access_level":"public","create_time":"$D2021-03-11T22:15:29.762Z","update_time":"$D2021-03-12T20:20:52.477Z","view_time":null,"first_public_time":"$D2021-03-11T22:21:45.009Z","has_unpublished_edits":null,"fork":{"id":"69f0d0d66d94e8f9","slug":"daily-temperature-line-chart-for-a-year","title":"Daily Temperature Line Chart for One Year","owner":{"id":"207f12ceec18efb8","login":"fnick851","name":"Noah Song"}},"stars":0,"starred":false,"owner":{"type":"team","id":"f8c7987bb6cd7e33","login":"mpohorilak","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3e379e076f4c240c6667289c6416e5ad6bb3497f1fb5fa5cd60e273e0981308a","tier":"starter_2024","bio":"","following":false},"version":197,"publish_version":197,"role":null,"authored":false,"authors":[{"type":"individual","id":"bd4ccab4fb6453d4","login":"mpohorilak","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3e379e076f4c240c6667289c6416e5ad6bb3497f1fb5fa5cd60e273e0981308a","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"bd4ccab4fb6453d4","login":"mpohorilak","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3e379e076f4c240c6667289c6416e5ad6bb3497f1fb5fa5cd60e273e0981308a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"html`\n

\n\n

\n \n

\n Maximum Temperature: \n

\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"//dataset = FileAttachment('my_weather_data2.json').json()\ndataset = FileAttachment('my_weather_data@1.json').json()\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"md`### Helpers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"md`### Styles`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"md`### Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 46:"$45:body"