{"version":3,"sources":["notes/20200515000814-d3/20200520220030.static.mjs"],"names":["jsdom","d3","fs","width","height","margin","left","top","right","bottom","async","line3","csv","readFile","data","csvParse","toString","d","date","Date","temperature","Number","temp","hours","h","getUTCHours","hour","push","Object","values","avg","mean","sde","deviation","Math","sqrt","length","x","scaleTime","domain","extent","range","nice","ydomain","min","max","y","scaleLinear","svg","select","JSDOM","window","document","body","append","attr","style","pallete","text","xaxis","axisBottom","tickFormat","timeFormat","call","yaxis","axisLeft","line","circle","symbol","type","symbolCircle","size","selectAll","join","enter","g","p","path","moveTo","lineTo","writeFile","node","outerHTML"],"mappings":"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","file":"20200520220030.static.mjs","sourcesContent":["#!/usr/bin/node\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 line3() {\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\t// Process Data\n\n\tlet hours = {}\n\n\tfor (let d of data) {\n\t\tlet h = d.date.getUTCHours()\n\t\tif (!hours[h])\n\t\t\thours[h] = {\n\t\t\t\thour: new Date(2011, 0, 0, h),\n\t\t\t\tdata: []\n\t\t\t}\n\t\thours[h].data.push(d.temperature)\n\t}\n\n\tfor (let h of Object.values(hours)) {\n\t\th.avg = d3.mean(h.data)\n\t\th.sde = d3.deviation(h.data) / Math.sqrt(h.data.length)\n\t\tdelete h.data\n\t}\n\n\thours = Object.values(hours)\n\n\t// Create empty graph\n\n\tlet x = d3.scaleTime()\n\t\t.domain(d3.extent(hours, d => d.hour))\n\t\t.range([margin.left, width - margin.right])\n\t\t.nice()\n\n\tlet ydomain = [\n\t\td3.min(hours, d => d.avg) - d3.max(hours, d => d.sde),\n\t\td3.max(hours, d => d.avg) + d3.max(hours, d => d.sde)\n\t]\n\n\tlet y = d3.scaleLinear()\n\t\t.domain(ydomain)\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(\"Hour\");\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// Draw Graph\n\n\tlet line = d3.line()\n\t\t.x(d => x(d.hour))\n\t\t.y(d => y(d.avg))\n\n\tsvg.append(\"path\")\n\t\t.attr(\"d\", line(hours))\n\t\t.attr(\"stroke\", \"var(--theme-0)\")\n\t\t.attr(\"stroke-linejoin\", \"round\")\n\t\t.attr(\"fill\", \"none\")\n\n\tlet circle = d3.symbol()\n\t\t.type(d3.symbolCircle)\n\t\t.size(16)()\n\n\tsvg.append(\"g\")\n\t\t.selectAll(\"g\")\n\t\t.data(hours)\n\t\t.join(enter => {\n\t\t\tlet g = enter.append(\"g\")\n\n\t\t\tg.append(\"path\")\n\t\t\t\t.attr(\"d\", d => {\n\t\t\t\t\tlet p = d3.path()\n\t\t\t\t\tp.moveTo(x(d.hour), y(d.avg - d.sde))\n\t\t\t\t\tp.lineTo(x(d.hour), y(d.avg + d.sde))\n\t\t\t\t\tp.moveTo(x(d.hour) - 4, y(d.avg - d.sde))\n\t\t\t\t\tp.lineTo(x(d.hour) + 4, y(d.avg - d.sde))\n\t\t\t\t\tp.moveTo(x(d.hour) - 4, y(d.avg + d.sde))\n\t\t\t\t\tp.lineTo(x(d.hour) + 4, y(d.avg + d.sde))\n\t\t\t\t\treturn p.toString()\n\t\t\t\t})\n\t\t\t\t.attr(\"stroke\", \"var(--theme-0)\")\n\t\t\t\t.attr(\"stroke-width\", 1)\n\n\t\t\tg.append(\"path\")\n\t\t\t\t.attr(\"d\", circle)\n\t\t\t\t.attr(\"transform\", d => `translate(${x(d.hour)}, ${y(d.avg)})`)\n\t\t})\n\n\t// Save svg\n\tfs.writeFile(\"line3.svg\", svg.node().outerHTML)\n}\n\nline3()\n"]}