33:T42b,datesTable = { const svg = d3.select(DOM.svg(width, height)); svg.append("g") .call(xAxisTime); svg.append("g") .selectAll("g") .data(stackedDates) .join("g") .attr("stroke", "white") .selectAll("rect") .data(d => d) .join("rect") .attr("x", d => margin.left + d[0]) .attr("y", d => y(d.data.key)) .attr("width", d=> (d[1]) - d[0]) .attr("height", y.bandwidth()) .attr("fill", function(d) { const week = d3.select(this.parentNode).datum().key; const tract = d.data.key; return modelingColor(d.data[week]); }) .on('mouseover', function(d) { const week = d3.select(this.parentNode).datum().key; const tract = d.data.key const accessor = d.data[week]; d3.select("#something").text(`${tract} – ${week} – Cases: ${d.data[week]}`) }) .on('mouseout', d => d3.select("#something").text(``)) svg.append("g") .call(yAxis); svg.selectAll(".tick line").attr("stroke", "#8A9BA8") return svg.node(); }34:[] 32:{"title":"Flu incidence","cells":[{"id":0,"value":"md`# Flu incidence`","pinned":false,"hidden":false,"mode":"ojs"},{"id":869,"value":"md `#### Debugging`","pinned":false,"hidden":false,"mode":"ojs"},{"id":473,"value":"y = d3.scaleBand()\n .domain(patientsByRegion.map(d => d.key))\n .range([margin.top, height - margin.bottom])\n .padding(0.5)\n .align(0)\n .round(true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":664,"value":"height = patientsByRegion.map(d => d.key).length*(28)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1747,"value":"patientsByRegion","pinned":true,"hidden":false,"mode":"ojs"},{"id":621,"value":"y.bandwidth()","pinned":false,"hidden":false,"mode":"ojs"},{"id":675,"value":"y.step()","pinned":false,"hidden":false,"mode":"ojs"},{"id":449,"value":"md `## Select a Region Density and a Data Dimension`","pinned":false,"hidden":false,"mode":"ojs"},{"id":430,"value":"viewof regionDensities = html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1038,"value":"viewof dimensions = \nhtml`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"table = {\n const svg = d3.select(DOM.svg(width, height)); \n \n svg.append(\"g\")\n .call(xAxis);\n\n svg.append(\"g\")\n .selectAll(\"g\")\n .data(stackedData)\n .join(\"g\")\n .attr(\"fill\", d => color(d.key))\n .attr(\"stroke\", \"white\")\n .selectAll(\"rect\")\n .data(d => d)\n .join(\"rect\")\n .attr(\"x\", d => x(d[0]))\n .attr(\"y\", d => y(d.data.key))\n .attr(\"width\", d=> x(d[1]) - x(d[0]))\n .attr(\"height\", y.bandwidth())\n\n \n svg.append(\"g\")\n .call(yAxis);\n \n svg.selectAll(\".tick line\").attr(\"stroke\", \"#8A9BA8\")\n \n svg.append(\"g\")\n .attr(\"transform\", `translate(${margin.left},${20})`)\n .call(legend);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1734,"value":"viewof test = html`\n

Hover over the heatmap to see more information...

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1579,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":1772,"value":"i = d3.interpolateNumber(2.29e-7, 0.095161105)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1778,"value":"i(0.2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1161,"value":"DOM.download(() => serialize(table), undefined, \"Save as SVG\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1163,"value":"md `\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1053,"value":"viewof currentCategory = {\n let node = html``\n \n for(var i = 0; i < categories.length; i++) {\n var opt = categories[i];\n var el = document.createElement(\"option\");\n el.textContent = opt;\n el.value = opt;\n node.appendChild(el);\n }\n return node; \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":838,"value":"map = {\n const svg = d3.select(DOM.svg(width, mapHeight));\n \n const g = svg.append(\"g\");\n \n g.selectAll(\"path\")\n .data(mapData[regionDensities].features)\n .enter().append(\"path\")\n .attr(\"fill\", d => {\n const regionAccesor = locationLookup[regionDensities];\n return mapColor(pieData[ d.properties[regionAccesor] ][currentCategory])\n })\n .attr(\"stroke\", \"white\")\n .attr(\"d\", path)\n .each(d => {\n// const center = regionDensities === \"censusTract\"\n// ? polylabel(d.geometry.coordinates, 1.0)\n// : polylabel(d.geometry.coordinates[0], 1.0);\n\n// const projectedCenter = projection(center);\n\n// g.append(\"circle\")\n// .attr(\"cx\", projectedCenter[0])\n// .attr(\"cy\", projectedCenter[1])\n// .attr(\"r\", 2)\n// .attr(\"fill\", \"red\");\n })\n \n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1158,"value":"DOM.download(() => serialize(map), undefined, \"Save as SVG\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":351,"value":"md `## Data Objects`","pinned":false,"hidden":false,"mode":"ojs"},{"id":767,"value":"md `### Table`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"data = {\n const data = d3.csv('https://raw.githubusercontent.com/seattleflu/simulated-data/master/simulatedSubjectDatabase.csv', parseData);\n \n return data\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1220,"value":"md `#### Metadata`","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"stackedData = d3.stack()\n .keys(categories)\n (flatData)","pinned":false,"hidden":false,"mode":"ojs"},{"id":387,"value":"flatData = flattenNest(patientsByRegion)","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"patientsByRegion = getPatientCount(regionDensities, dimensions)","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"categories = getKeys(data, dimensions)","pinned":false,"hidden":false,"mode":"ojs"},{"id":305,"value":"maxCount = d3.max(stackedData.map(d => d3.max(d, v => d3.max(v))))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1224,"value":"md `#### Time and Modeling`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1404,"value":"stackedDates = d3.stack()\n .keys(allWeeksWHO)\n .value(weekLength)\n (flatDate)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1227,"value":"flatDate = flattenNest(patientsByDate)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1234,"value":"uniqueDates = d3.set(data, d => d.date).values()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1212,"value":"patientsByDate = getPatientCountByDate(regionDensities, \"week\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":769,"value":"md `### Map`","pinned":false,"hidden":false,"mode":"ojs"},{"id":771,"value":"maps = ({\n craName: 'https://raw.githubusercontent.com/seattleflu/seattle-geojson/master/seattle_geojsons/2016_seattle_cra.geojson',\n neighborhood: 'https://raw.githubusercontent.com/seattleflu/seattle-geojson/master/seattle_geojsons/2016_seattle_neighborhoods.geojson',\n censusTract: 'https://raw.githubusercontent.com/seattleflu/seattle-geojson/master/seattle_geojsons/2016_seattle_censusTracts.geojson'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":776,"value":"mapData = Promise.all([\n d3.json(maps.craName),\n d3.json(maps.neighborhood),\n d3.json(maps.censusTract)\n])\n.then(([craName, neighborhood, censusTract]) => {\n console.log(craName)\n return {\n craName,\n neighborhood,\n censusTract\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":916,"value":"pieData = {\n let key;\n let values;\n let obj = {};\n\n for (let i = 0; i < patientsByRegion.length; i++) {\n const response = [];\n key = patientsByRegion[i].key;\n values = patientsByRegion[i].values;\n let spread = [...values];\n obj[key] = {};\n \n for (let j = 0; j < spread.length; j++) {\n obj[key][spread[j].key] = spread[j].value;\n }\n }\n return obj\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1012,"value":"maxPerCats = getMaxPerCategory(flatData)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1110,"value":"locationLookup = ({\n neighborhood: \"NEIGHBO\",\n craName: \"CRA_NAM\",\n censusTract: \"GEOID\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"md `## Data Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1507,"value":"md `### Modeling`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1694,"value":"function getMaxPatientCount(data, cats) {\n // go through every category and get the max values\n // so that we can create color scales\n const obj = {};\n const arr = [];\n \n for (let i = 0; i < cats.length; i++) {\n const maxPerCat = d3.max(data, d => {\n if (d.key !== \"NA\") {\n if (d[cats[i]] !== undefined) { return d[cats[i]] }\n }\n })\n arr.push(maxPerCat);\n }\n \n return d3.max(arr)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1510,"value":"getPatientCountByDate = function(region, dateKey) {\n const regions = d3.nest()\n .key(d => d[region])\n .key(d => d[dateKey])\n .rollup(d => d.length)\n .entries(data)\n \n console.log(regions)\n \n return regions.map(d =>\n ({\n key: d.key,\n values: d.values\n }))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":828,"value":"md `### Table`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"parseData = function(d) {\n return {\n id: d.id,\n sex: d.sex,\n age: +d.age,\n fluShot: +d.fluShot === 1 ? \"Yes\" : \"No\",\n censusTract: d.GEOID,\n neighborhood: d.NEIGHBORHOOD_DISTRICT_NAME,\n craName: d.CRA_NAME,\n samplingLocation: d.samplingLocation,\n pathogen: d.pathogen,\n date: parseTime(d.encountered_date), //ISO standard date e.g. '2018-11-22T00:00'\n week: parseWeek(d.encountered_date) //ISO WHO Weeks e.g. '2018-W47'\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1174,"value":"parseTime = function(timeStr){ //YYYY-MM-DD\n let date;\n const dateObj = DateTime.fromISO(timeStr);\n if (dateObj.invald == null) {\n date = new Date (dateObj.toISO());\n }\n return date\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1431,"value":"parseWeek = function(timeStr){ //YYYY-MM-DD\n let date;\n const dateObj = DateTime.fromISO(timeStr);\n if (dateObj.invald == null) {\n date = dateObj.toFormat(\"kkkk-'W'WW\")\n }\n return date\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":383,"value":"function flattenNest(nest) {\n let arr = [];\n \n nest.map((d) => {\n let rObj = {};\n d.values.map(d => {\n rObj[d.key] = d.value;\n return rObj;\n })\n rObj.key = d.key;\n arr.push(rObj);\n})\n return arr;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"function getPatientCount(region, variable) {\n const regions = d3.nest()\n .key(d => d[region])\n .key(d => d[variable])\n .rollup(d => d.length)\n .entries(data)\n \n return regions.map(d =>\n ({\n key: d.key,\n values: d.values,\n }))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"function getKeys(datum, variable) {\n return d3.map(datum, d => d[variable]).keys()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":830,"value":"md `### Map`","pinned":false,"hidden":false,"mode":"ojs"},{"id":817,"value":"projection = geo.geoMercator().fitSize([width, mapHeight], mapData[regionDensities])","pinned":false,"hidden":false,"mode":"ojs"},{"id":819,"value":"path = geo.geoPath()\n .projection(projection);","pinned":false,"hidden":false,"mode":"ojs"},{"id":821,"value":"pie = d3.pie()\n .sort(null)\n .value(d => d.value)","pinned":false,"hidden":false,"mode":"ojs"},{"id":823,"value":"arc = d3.arc()\n .innerRadius(0)\n .outerRadius(Math.min(width, height) / 2 - 1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1696,"value":"getMaxPatientCount(flatDate, allWeeksWHO)","pinned":false,"hidden":false,"mode":"ojs"},{"id":953,"value":"function getMaxPerCategory(data) {\n // go through every category and get the max values\n // so that we can create color scales\n const obj = {};\n \n for (let i = 0; i < categories.length; i++) {\n obj[categories[i]] = d3.max(data, d => {\n if (d.key !== \"NA\") {\n if (d[categories[i]] !== undefined) { return d[categories[i]] }\n }\n })\n }\n return obj\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"md `## Chart functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1496,"value":"md `### Modeling`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1517,"value":"weekLength = (width - margin.right - margin.left) / allWeeks.length","pinned":false,"hidden":false,"mode":"ojs"},{"id":1203,"value":"time = d3.scaleTime()\n .domain(d3.extent(uniqueDates.map(d => new Date(d))))\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1700,"value":"modelingColor = d3.scaleSequential(d3.interpolateReds)\n.unknown(\"#ccc\")\n.domain([0, getMaxPatientCount(flatDate, allWeeksWHO)])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1450,"value":"allWeeks = time.ticks(d3.timeWeek.every(1))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1454,"value":"allWeeksWHO = allWeeks.map(d => {\n const ISOdate = d.toISOString();\n return DateTime.fromISO(ISOdate).toFormat(\"kkkk-'W'WW\")\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1208,"value":"xAxisTime = g => g\n .attr(\"transform\", `translate(0,${margin.top})`)\n .call(d3.axisTop(time)\n .ticks(d3.timeMonth.every(1))\n // .ticks(width / 100, \"s\")\n .tickSizeInner(-height + margin.top + margin.bottom + y.step())\n )\n .call(g => g.selectAll(\".domain\").remove())","pinned":false,"hidden":false,"mode":"ojs"},{"id":813,"value":"md `### Table`","pinned":false,"hidden":false,"mode":"ojs"},{"id":470,"value":"x = d3.scaleLinear()\n .domain([0, maxCount])\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"color = d3.scaleOrdinal()\n .unknown(\"#ccc\")\n .domain(categories)\n .range(d3.quantize(t => d3.interpolateSpectral(t * 0.8 + 0.1), categories.length).reverse())","pinned":false,"hidden":false,"mode":"ojs"},{"id":521,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${margin.top})`)\n .call(d3.axisTop(x)\n .ticks(width / 100, \"s\")\n .tickSizeInner(-height + margin.top + margin.bottom + y.step())\n )\n .call(g => g.selectAll(\".domain\").remove())","pinned":false,"hidden":false,"mode":"ojs"},{"id":517,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).tickSizeOuter(0))\n .call(g => g.selectAll(\".domain\").remove())","pinned":false,"hidden":false,"mode":"ojs"},{"id":537,"value":"legend = svg => {\n const g = svg\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 10)\n .attr(\"text-anchor\", \"end\")\n .attr(\"id\", \"legend\")\n .selectAll(\"g\")\n .data(categories)\n .join(\"g\")\n .attr(\"transform\", (d, i) => `translate(${i * 90},${0})`);\n\n g.append(\"rect\")\n .attr(\"x\", -16)\n .attr(\"y\", -16)\n .attr(\"width\", 16)\n .attr(\"height\", 16)\n .attr(\"fill\", color);\n\n g.append(\"text\")\n .attr(\"x\", -20)\n .attr(\"y\", -8)\n .attr(\"dy\", \"0.35em\")\n .text(d => d);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"margin = ({top: 40, right: 50, bottom: 30, left: 120})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1152,"value":"width = 700","pinned":false,"hidden":false,"mode":"ojs"},{"id":815,"value":"md `### Map`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1017,"value":"mapColor = d3.scaleSequential(d3.interpolateBlues)\n.unknown(\"#ccc\")\n.domain([0, maxPerCats[currentCategory]])","pinned":false,"hidden":false,"mode":"ojs"},{"id":836,"value":"mapHeight = 535","pinned":false,"hidden":false,"mode":"ojs"},{"id":425,"value":"md `## Libs`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require('d3@v5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":808,"value":"geo = require(\"d3-geo\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":810,"value":"polylabel = require('https://bundle.run/polylabel@1.0.2')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1314,"value":"luxon = require('luxon@1.12.0/build/global/luxon.min.js').catch(() => window.luxon)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1321,"value":"DateTime = luxon.DateTime;","pinned":false,"hidden":false,"mode":"ojs"},{"id":1155,"value":"serialize = {\n const xmlns = \"http://www.w3.org/2000/xmlns/\";\n const xlinkns = \"http://www.w3.org/1999/xlink\";\n const svgns = \"http://www.w3.org/2000/svg\";\n return function serialize(svg) {\n svg = svg.cloneNode(true);\n const fragment = window.location.href + \"#\";\n const walker = document.createTreeWalker(svg, NodeFilter.SHOW_ELEMENT, null, false);\n while (walker.nextNode()) {\n for (const attr of walker.currentNode.attributes) {\n if (attr.value.includes(fragment)) {\n attr.value = attr.value.replace(fragment, \"#\");\n }\n }\n }\n svg.setAttributeNS(xmlns, \"xmlns\", svgns);\n svg.setAttributeNS(xmlns, \"xmlns:xlink\", xlinkns);\n const serializer = new window.XMLSerializer;\n const string = serializer.serializeToString(svg);\n return new Blob([string], {type: \"image/svg+xml\"});\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1215,"value":"function getRandomInt(min, max) {\n min = Math.ceil(min);\n max = Math.floor(max);\n return Math.floor(Math.random() * (max - min)) + min; //The maximum is exclusive and the minimum is inclusive\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}