{"version":3,"sources":["notes/20200515000814-d3/20200614150519.static.mjs"],"names":["jsdom","d3","fs","width","height","margin","left","top","right","bottom","async","drag","csv","readFile","data","csvParse","toString","d","date","Date","temperature","Number","temp","start","end","x","scaleTime","domain","range","nice","y","scaleLinear","extent","svg","select","JSDOM","window","document","body","append","attr","style","pallete","text","xaxis","axisBottom","call","yaxis","axisLeft","mask","line","writeFile","node","outerHTML"],"mappings":"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","file":"20200614150519.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 drag() {\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// Create empty graph\n\n\tlet start = new Date(2010, 5, 15, 0, 0)\n\tlet end = new Date(2010, 5, 15, 23, 59)\n\n\tlet x = d3.scaleTime()\n\t\t.domain([start, end])\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\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// Add a mask\n\n\tlet mask = svg.append(\"mask\")\n\t\t.attr(\"id\", \"mask\")\n\n\tmask.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\t\t.attr(\"fill\", \"white\")\n\n\tmask.append(\"rect\")\n\t\t.attr(\"x\", 0)\n\t\t.attr(\"y\", 0)\n\t\t.attr(\"width\", width - margin.right)\n\t\t.attr(\"height\", margin.top)\n\t\t.attr(\"fill\", \"black\")\n\n\tmask.append(\"rect\")\n\t\t.attr(\"x\", width - margin.right)\n\t\t.attr(\"y\", 0)\n\t\t.attr(\"width\", margin.right)\n\t\t.attr(\"height\", height - margin.bottom)\n\t\t.attr(\"fill\", \"black\")\n\n\tmask.append(\"rect\")\n\t\t.attr(\"x\", margin.left)\n\t\t.attr(\"y\", height - margin.bottom)\n\t\t.attr(\"width\", width - margin.right)\n\t\t.attr(\"height\", margin.bottom)\n\t\t.attr(\"fill\", \"black\")\n\n\tmask.append(\"rect\")\n\t\t.attr(\"x\", 0)\n\t\t.attr(\"y\", margin.top)\n\t\t.attr(\"width\", margin.left)\n\t\t.attr(\"height\", height - margin.top)\n\t\t.attr(\"fill\", \"black\")\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(data))\n\t\t.attr(\"stroke\", \"var(--theme-0)\")\n\t\t.attr(\"stroke-linejoin\", \"round\")\n\t\t.attr(\"fill\", \"none\")\n\t\t.attr(\"mask\", \"url(#mask)\")\n\n\t// Save svg\n\tfs.writeFile(\"drag.svg\", svg.node().outerHTML)\n}\n\ndrag()\n"]}