{"version":3,"sources":["notes/20200515000814-d3/20200614150519.mjs"],"names":["width","height","margin","left","top","right","bottom","async","graph","data","d3","csv","d","date","Date","temperature","Number","temp","x","scaleTime","domain","extent","range","nice","y","scaleLinear","svg","select","this","parentNode","insert","attr","style","remove","gx","append","text","xaxis","call","axisBottom","gy","axisLeft","l","draw","line","zoom","scaleExtent","translateExtent","on","xz","event","transform","rescaleX","html","day","getDate","month","getMonth","scaleTo"],"mappings":"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","file":"20200614150519.mjs","sourcesContent":["import \"./d3.min.js\"\n\nconst width = 680,\n\theight = 280,\n\tmargin = {\n\t\tleft: 50,\n\t\ttop: 10,\n\t\tright: 50,\n\t\tbottom: 40\n\t}\n\nasync function graph() {\n\n\t// Load the data\n\n\tlet data = await d3.csv(\"seattle-temps.csv\",\n\t\td => ({\n\t\t\tdate: new Date(d.date),\n\t\t\ttemperature: Number(d.temp)\n\t\t}))\n\n\t// Create empty graph\n\n\tlet x = d3.scaleTime()\n\t\t.domain(d3.extent(data, d => d.date))\n\t\t.range([margin.left, width - margin.right])\n\t\t.nice()\n\n\tlet y = d3.scaleLinear()\n\t\t.domain(d3.extent(data, d => d.temperature))\n\t\t.range([height - margin.bottom, margin.top])\n\t\t.nice()\n\n\tlet svg = d3.select(\"#fig\\\\:line\")\n\t\t.select(function() {\n\t\t\treturn this.parentNode\n\t\t})\n\t\t.insert(\"svg\", \"figcaption\")\n\t\t.attr('xmlns', 'http://www.w3.org/2000/svg')\n\t\t.style(\"user-select\", \"none\")\n\t\t.style(\"font-family\", \"sans-serif\")\n\t\t.attr(\"viewBox\", [0, 0, width, height])\n\n\td3.select(\"#fig\\\\:line\").remove()\n\n\n\t// x axis\n\n\tlet gx = svg.append(\"g\")\n\t\t.attr(\"transform\", `translate(0,${height - margin.bottom})`)\n\n\tgx.append(\"g\")\n\t\t.append(\"text\")\n\t\t.attr(\"x\", (width + margin.left - margin.right) / 2)\n\t\t.attr(\"y\", margin.bottom - 4)\n\t\t.attr(\"text-anchor\", \"middle\")\n\t\t.style(\"font-size\", \"16px\")\n\t\t.style(\"fill\", \"currentColor\")\n\t\t.text(\"Date\")\n\n\tlet xaxis = gx.append(\"g\")\n\t\t.call(d3.axisBottom(x))\n\n\t// y axis\n\n\tlet gy = svg.append(\"g\")\n\t\t.attr(\"transform\", `translate(${margin.left},0)`)\n\n\tgy.append(\"g\")\n\t\t.append(\"text\")\n\t\t.attr(\"y\", -margin.left + 16)\n\t\t.attr(\"x\", (-height + margin.bottom - margin.top) / 2)\n\t\t.attr(\"text-anchor\", \"middle\")\n\t\t.attr(\"transform\", \"rotate(-90)\")\n\t\t.style(\"font-size\", \"16px\")\n\t\t.style(\"fill\", \"currentColor\")\n\t\t.text(\"Temperature (F°)\");\n\n\tlet yaxis = gy.append(\"g\")\n\t\t.call(d3.axisLeft(y))\n\n\t// Add a clip path\n\n\tsvg.append(\"clipPath\")\n\t\t.attr(\"id\", \"clip\")\n\t\t.append(\"rect\")\n\t\t.attr(\"x\", margin.left)\n\t\t.attr(\"y\", margin.top)\n\t\t.attr(\"width\", width - margin.left - margin.right)\n\t\t.attr(\"height\", height - margin.top - margin.bottom);\n\n\t// Draw graph\n\n\tlet l =\tsvg.append(\"path\")\n\t\t.attr(\"clip-path\", \"url(#clip)\")\n\t\t.attr(\"stroke\", \"var(--theme-0)\")\n\t\t.attr(\"stroke-linejoin\", \"round\")\n\t\t.attr(\"fill\", \"none\")\n\n\tfunction draw(x) {\n\t\tlet line = d3.line()\n\t\t\t.x(d => x(d.date))\n\t\t\t.y(d => y(d.temperature))\n\n\t\tl.attr(\"d\", line(data))\n\t}\n\n\tdraw(x)\n\n\t// Zoom\n\n\tfunction zoomhandler() {\n\t\tconst xz = d3.event.transform.rescaleX(x)\n\t\t// const yz = d3.event.transform.rescaleY(y)\n\t\tdraw(xz, y, data)\n\t\t// yaxis.text(\"\").call(d3.axisLeft(yz))\n\t\txaxis.html(\"\").call(d3.axisBottom(xz))\n\t}\n\n\tlet zoom = d3.zoom()\n\t\t.scaleExtent([1, 363])\n\t\t.extent([\n\t\t\t[margin.left, margin.top],\n\t\t\t[width - margin.right, height - margin.bottom]\n\t\t])\n\t\t.translateExtent([\n\t\t\t[margin.left, margin.top],\n\t\t\t[width - margin.right, height - margin.bottom]\n\t\t])\n\t\t.on(\"zoom\", zoomhandler)\n\n\tlet day = new Date().getDate()\n\tlet month = new Date().getMonth()\n\n\tsvg.call(zoom)\n\t\t.call(zoom.scaleTo, 363, [x(new Date(2010, month, day, 11, 0)), 0]);\n}\n\ngraph()\n"]}