{"version":3,"sources":["notes/20200515000814-d3/20200520191541.static.mjs"],"names":["jsdom","d3","fs","width","height","margin","left","top","right","bottom","async","line12","csv","readFile","data","csvParse","toString","d","date","Date","temperature","Number","temp","x","scaleTime","domain","extent","range","nice","y","scaleLinear","svg","select","JSDOM","window","document","body","append","attr","style","pallete","text","xaxis","axisBottom","tickFormat","timeFormat","call","yaxis","axisLeft","averages","minimum","maximum","toDateString","subdata","push","min","mean","max","line","writeFile","node","outerHTML","legend","label","color","legendcontainer","i","row"],"mappings":"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","file":"20200520191541.static.mjs","sourcesContent":["#!/usr/bin/node\n\n\nimport jsdom from \"jsdom\"\nimport d3 from \"d3\"\nimport {\n\tpromises as fs\n} from \"fs\"\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 line12() {\n\n\t// Load the data\n\n\tlet csv = await fs.readFile(\"seattle-temps.csv\")\n\tlet data = d3.csvParse(csv.toString(),\n\t\td => ({\n\t\t\tdate: new Date(d.date),\n\t\t\ttemperature: Number(d.temp)\n\t\t}))\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(new jsdom.JSDOM().window.document.body)\n\t\t.append(\"svg\")\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\tlet pallete = await fs.readFile(\"../../../styles/pallete.css\")\n\tsvg.append(\"style\")\n\t\t.text(pallete.toString())\n\n\tlet xaxis = d3.axisBottom(x)\n\t\t.tickFormat(d3.timeFormat(\"%b\"))\n\n\tsvg.append(\"g\")\n\t\t.attr(\"transform\", `translate(0,${height - margin.bottom})`)\n\t\t.call(xaxis)\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 yaxis = d3.axisLeft(y)\n\n\tsvg.append(\"g\")\n\t\t.attr(\"transform\", `translate(${margin.left},0)`)\n\t\t.call(yaxis)\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\t// Process data\n\n\tlet averages = []\n\tlet minimum = []\n\tlet maximum = []\n\tlet date = data[0].date.toDateString()\n\tlet subdata = []\n\tfor (let d of data) {\n\t\tif (d.date.toDateString() !== date) {\n\t\t\tdate = date + \" 12:00\"\n\t\t\tminimum.push({\n\t\t\t\tdate: new Date(date),\n\t\t\t\ttemperature: d3.min(subdata, d => d.temperature)\n\t\t\t})\n\t\t\taverages.push({\n\t\t\t\tdate: new Date(date),\n\t\t\t\ttemperature: d3.mean(subdata, d => d.temperature)\n\t\t\t})\n\t\t\tmaximum.push({\n\t\t\t\tdate: new Date(date),\n\t\t\t\ttemperature: d3.max(subdata, d => d.temperature)\n\t\t\t})\n\t\t\tdate = d.date.toDateString()\n\t\t\tsubdata = []\n\t\t} else {\n\t\t\tsubdata.push(d)\n\t\t}\n\t}\n\n\t// Draw Graph\n\n\tlet line = d3.line()\n\t\t.x(d => x(d.date))\n\t\t.y(d => y(d.temperature))\n\n\tsvg.append(\"path\")\n\t\t.attr(\"d\", line(averages))\n\t\t.attr(\"stroke\", \"var(--theme-0)\")\n\t\t.attr(\"stroke-linejoin\", \"round\")\n\t\t.attr(\"fill\", \"none\")\n\n\tfs.writeFile(\"line1.svg\", svg.node().outerHTML)\n\n\tsvg.append(\"path\")\n\t\t.attr(\"d\", line(minimum))\n\t\t.attr(\"stroke\", \"var(--theme-1)\")\n\t\t.attr(\"stroke-linejoin\", \"round\")\n\t\t.attr(\"fill\", \"none\")\n\n\tsvg.append(\"path\")\n\t\t.attr(\"d\", line(maximum))\n\t\t.attr(\"stroke\", \"var(--theme-2)\")\n\t\t.attr(\"stroke-linejoin\", \"round\")\n\t\t.attr(\"fill\", \"none\")\n\n\t// Add Legend\n\n\tlet legend = [{\n\t\t\tlabel: \"Maximum\",\n\t\t\tcolor: \"var(--theme-2)\"\n\t\t},\n\t\t{\n\t\t\tlabel: \"Average\",\n\t\t\tcolor: \"var(--theme-0)\"\n\t\t},\n\t\t{\n\t\t\tlabel: \"Minimum\",\n\t\t\tcolor: \"var(--theme-1)\"\n\t\t}\n\t]\n\n\tlet legendcontainer = svg.append(\"g\")\n\t\t.attr(\"transform\",\n\t\t\t`translate(${width - margin.right - 80}, ${margin.top})`)\n\t\t.style(\"font-size\", \"12px\")\n\n\tfor (let i in legend) {\n\t\tlet row = legendcontainer.append(\"g\")\n\t\tlet d = legend[i]\n\t\trow.append(\"text\")\n\t\t\t.attr(\"y\", i * 12 + 4)\n\t\t\t.attr(\"x\", \"22\")\n\t\t\t.text(d.label)\n\t\trow.append(\"line\")\n\t\t\t.attr(\"x1\", 0).attr(\"y1\", i * 12)\n\t\t\t.attr(\"x2\", 18).attr(\"y2\", i * 12)\n\t\t\t.attr(\"stroke\", d.color)\n\t}\n\n\t// Save svg\n\tfs.writeFile(\"line2.svg\", svg.node().outerHTML)\n}\n\nline12()\n"]}