31:T527,usData = { /*for (var i = 0; i < usDataSubset.length; i++) for (var j = 0; j < datetime.length; j++) usDataSubset[i][datetime[j]] = parseInt(usDataSubset[i][datetime[j]]) for (var i = 0; i < usDataSubset.length; i++) { if ((usDataSubset[i]["Province/State"].includes(",")) && (usDataSubset[i]["Province/State"].split(",")[1] != " D.C.")) { const smallState = usDataSubset[i]["Province/State"].split(",")[1] const actualState = states[smallState.substr(1)] console.log(actualState) datetime.forEach(function(e) { for (var j = 0; j < usDataSubset.length; j++) { //console.log(usDataSubset[j]["Province/State"],actualState) if (usDataSubset[j]["Province/State"]==actualState) { usDataSubset[j][e] = usDataSubset[j][e] + (+usDataSubset[i][e]) } } }) } } return usDataSubset.filter(d=>!(d["Province/State"].includes(","))) */ cases.filter(d=>d["Province/State"]=="Diamond Princess")[0].Long="-122.2792" cases.filter(d=>d["Province/State"]=="Diamond Princess")[0].Lat="37.7957" return usDataSubset.filter(d=>((+d.Lat>usMainLand[1][0]) && (+d.LatusMainLand[0][0]) && (+d.Longd.date)); y.domain([0, d3.max(usDataTime, d=>d.value)]); //const scale = d3.scaleOrdinal(d3.schemeCategory10); const color = d3.scaleLinear().range([0,1]).domain(d3.extent(usDataTime,function(d,i) { return d})); const palette = d3.interpolateViridis; var xAxis = d3.axisBottom() .scale(x) //.tickValues(x.domain().filter(function(d,i){ return !(i%4)})); var yAxis = d3.axisLeft() .scale(y) .ticks(4); svg.append("g") .attr("class", "x axis") .attr('transform', `translate(0,${ height - margin.bottom })`) .call(xAxis.tickFormat(d3.timeFormat("%m-%d"))) .selectAll("text") .style("text-anchor", "end") .attr("dx", "-.8em") .attr("dy", "-.55em") .attr("transform", "rotate(-90)" ); svg.append("g") .attr('transform', `translate(${ margin.left },0)`) .attr("class", "y axis") .call(yAxis) svg.append("g") .append("text") .attr("transform", "rotate(-90)") .attr("x", -(height/2)) .attr("dy", ".71em") .style("fill","black") .style("text-anchor", "middle") .text("Cases - Confirmed") const wbar = 5 svg.selectAll("bar") .data(usDataTime) .enter().append("rect") .style("fill", "steelblue") .attr("x", function(d) { return x(d.date)-(((width/usDataTime.length)-wbar)/2); }) .attr("width", (width/usDataTime.length)-wbar) .attr("y", function(d) { return y(d.value); }) .attr('height', d => y(0) - y(d.value)) svg.selectAll("text.value") .data(usDataTime) .enter().append("text") .attr("class","value") .style("fill", "black") .style("font-size","10px") //.attr("transform", "rotate(-90)" ) .attr("x", function(d) { return x(d.date); }) .style("text-anchor", "middle") .attr("y", function(d) { return y(d.value)-10; }) .text(d=>d.value) return svg.node(); } 33:Tbe1,{ const svg = d3.select(DOM.svg(width, height)); xLog.domain(d3.extent(usDataTime, d=>d.date)); yLog.domain([d3.max([1,d3.min(usDataTime, d=>d.value)]),d3.max(usDataTime, d=>d.value)]) //const scale = d3.scaleOrdinal(d3.schemeCategory10); const color = d3.scaleLinear().range([0,1]).domain(d3.extent(usDataTime,function(d,i) { return d})); const palette = d3.interpolateViridis; var xAxis = d3.axisBottom() .scale(xLog) //.tickValues(x.domain().filter(function(d,i){ return !(i%4)})); var yAxis = d3.axisLeft() .scale(yLog) .ticks(4); svg.append("g") .attr("class", "x axis") .attr('transform', `translate(0,${ height - margin.bottom })`) .call(xAxis.tickFormat(d3.timeFormat("%m-%d"))) .selectAll("text") .style("text-anchor", "end") .attr("dx", "-.8em") .attr("dy", "-.55em") .attr("transform", "rotate(-90)" ); svg.append("g") .attr('transform', `translate(${ margin.left },0)`) .attr("class", "y axis") .call(yAxis) svg.append("g") .append("text") .attr("transform", "rotate(-90)") .attr("x", -(height/2)) .attr("dy", ".71em") .style("fill","black") .style("text-anchor", "middle") .text("Cases - Confirmed (Log)") svg.append("g").selectAll("path").data(doubling_periods).join("path") .attr("class", "guidelines") .attr("stroke", "orange").attr("stroke-opacity", 0.8).attr("stroke-dasharray", 2) .attr("d", d => d3.line()([ [xLog(usDataTime[0].date), yLog(d3.max([1,d3.min(usDataTime, d=>d.value)]))], [xLog(usDataTime[usDataTime.length -1].date), yLog(d3.max([1,d3.min(usDataTime, d=>d.value)])*Math.pow(2, (deltaDays)/d))] ])); svg.append("g").selectAll("text").data(doubling_periods).join("text") .text(d => d) .attr("font-size", 12) .style("text-anchor", "end") .attr("fill", "orange") .attr("x", d => xLog(usDataTime[10].date)) .attr("y", d => yLog(d3.max([1,d3.min(usDataTime, d=>d.value)])*Math.pow(2, (10)/d))); /*svg .append("line") .attr("x1", margin.left) .attr("y1", height - margin.bottom) .attr("x2", width - margin.right - margin.left) .attr("y2", margin.top) .style("stroke", "darkgrey")*/ const wbar = 5 svg.selectAll("bar") .data(usDataTime) .enter().append("circle") .style("stroke", "steelblue") .style("fill","white") .attr("cx", function(d) { return xLog(d.date); }) .attr("r", (width/usDataTime.length)/2) .attr("cy", d=> (d.value)?yLog(d.value):yLog(1)) svg.selectAll("text.value") .data(usDataTime) .enter().append("text") .attr("class","value") .style("fill", "black") .style("font-size","10px") //.attr("transform", "rotate(-90)" ) .attr("x", function(d) { return xLog(d.date); }) .style("text-anchor", "middle") .style("alignment-baseline","middle") .attr("y", d=> (d.value)?yLog(d.value):yLog(1)) .text(d=>d.value) return svg.node(); } 34:T88d,{ const svg = d3.select(DOM.svg(width, height)); const x = d3.scaleTime().range([ margin.left, width - margin.right - margin.left ]); const y = d3.scaleLinear().range([ height - margin.bottom, margin.top ]); x.domain(d3.extent(usDataTimeDelta , d=>d.date)); y.domain([0, d3.max(usDataTimeDelta , d=>d.value)]); //const scale = d3.scaleOrdinal(d3.schemeCategory10); const color = d3.scaleLinear().range([0,1]).domain(d3.extent(usDataTimeDelta ,function(d,i) { return d})); const palette = d3.interpolateViridis; var xAxis = d3.axisBottom() .scale(x) //.tickValues(x.domain().filter(function(d,i){ return !(i%4)})); var yAxis = d3.axisLeft() .scale(y) .ticks(4); svg.append("g") .attr("class", "x axis") .attr('transform', `translate(0,${ height - margin.bottom })`) .call(xAxis.tickFormat(d3.timeFormat("%m-%d"))) .selectAll("text") .style("text-anchor", "end") .attr("dx", "-.8em") .attr("dy", "-.55em") .attr("transform", "rotate(-90)" ); svg.append("g") .attr('transform', `translate(${ margin.left },0)`) .attr("class", "y axis") .call(yAxis) svg.append("g") .append("text") .attr("transform", "rotate(-90)") .attr("x", -(height/2)) .attr("dy", ".71em") .style("fill","black") .style("text-anchor", "middle") .text("Cases - Confirmed Delta (Day - Last Day)") const wbar = 5 svg.selectAll("bar") .data(usDataTimeDelta ) .enter().append("rect") .style("fill", "steelblue") .attr("x", function(d) { return x(d.date)-(((width/usDataTime.length)-wbar)/2); }) .attr("width", (width/usDataTime.length)-wbar) .attr("y", function(d) { return y(d.value); }) .attr('height', d => y(0) - y(d.value)) svg.selectAll("text.value") .data(usDataTimeDelta ) .enter().append("text") .attr("class","value") .style("fill", "black") .style("font-size","10px") //.attr("transform", "rotate(-90)" ) .attr("x", function(d) { return x(d.date); }) .style("text-anchor", "middle") .attr("y", function(d) { return y(d.value)-10; }) .text(d=>d.value) return svg.node(); } 35:T858,{ const svg = d3.select(DOM.svg(width, height)); const x = d3.scaleTime().range([ margin.left, width - margin.right - margin.left ]); const y = d3.scaleLinear().range([ height - margin.bottom, margin.top ]); x.domain(d3.extent(paDataTime, d=>d.date)); y.domain([0, d3.max(paDataTime, d=>d.value)]); //const scale = d3.scaleOrdinal(d3.schemeCategory10); const color = d3.scaleLinear().range([0,1]).domain(d3.extent(paDataTime,function(d,i) { return d})); const palette = d3.interpolateViridis; var xAxis = d3.axisBottom() .scale(x) //.tickValues(x.domain().filter(function(d,i){ return !(i%4)})); var yAxis = d3.axisLeft() .scale(y) .ticks(4); svg.append("g") .attr("class", "x axis") .attr('transform', `translate(0,${ height - margin.bottom })`) .call(xAxis.tickFormat(d3.timeFormat("%m-%d"))) .selectAll("text") .style("text-anchor", "end") .attr("dx", "-.8em") .attr("dy", "-.55em") .attr("transform", "rotate(-90)" ); svg.append("g") .attr('transform', `translate(${ margin.left },0)`) .attr("class", "y axis") .call(yAxis) svg.append("g") .append("text") .attr("transform", "rotate(-90)") .attr("x", -(height/2)) .attr("dy", ".71em") .style("fill","black") .style("text-anchor", "middle") .text("Cases - Confirmed") const wbar = 5 svg.selectAll("bar") .data(paDataTime) .enter().append("rect") .style("fill", "steelblue") .attr("x", function(d) { return x(d.date)-(((width/usDataTime.length)-wbar)/2); }) .attr("width", (width/usDataTime.length)-wbar) .attr("y", function(d) { return y(d.value); }) .attr('height', d => y(0) - y(d.value)) svg.selectAll("text.value") .data(paDataTime) .enter().append("text") .attr("class","value") .style("fill", "black") .style("font-size","10px") //.attr("transform", "rotate(-90)" ) .attr("x", function(d) { return x(d.date); }) .style("text-anchor", "middle") .attr("y", function(d) { return y(d.value)-10; }) .text(d=>d.value) return svg.node(); } 36:T88d,{ const svg = d3.select(DOM.svg(width, height)); const x = d3.scaleTime().range([ margin.left, width - margin.right - margin.left ]); const y = d3.scaleLinear().range([ height - margin.bottom, margin.top ]); x.domain(d3.extent(paDataTimeDelta , d=>d.date)); y.domain([0, d3.max(paDataTimeDelta , d=>d.value)]); //const scale = d3.scaleOrdinal(d3.schemeCategory10); const color = d3.scaleLinear().range([0,1]).domain(d3.extent(paDataTimeDelta ,function(d,i) { return d})); const palette = d3.interpolateViridis; var xAxis = d3.axisBottom() .scale(x) //.tickValues(x.domain().filter(function(d,i){ return !(i%4)})); var yAxis = d3.axisLeft() .scale(y) .ticks(4); svg.append("g") .attr("class", "x axis") .attr('transform', `translate(0,${ height - margin.bottom })`) .call(xAxis.tickFormat(d3.timeFormat("%m-%d"))) .selectAll("text") .style("text-anchor", "end") .attr("dx", "-.8em") .attr("dy", "-.55em") .attr("transform", "rotate(-90)" ); svg.append("g") .attr('transform', `translate(${ margin.left },0)`) .attr("class", "y axis") .call(yAxis) svg.append("g") .append("text") .attr("transform", "rotate(-90)") .attr("x", -(height/2)) .attr("dy", ".71em") .style("fill","black") .style("text-anchor", "middle") .text("Cases - Confirmed Delta (Day - Last Day)") const wbar = 5 svg.selectAll("bar") .data(paDataTimeDelta ) .enter().append("rect") .style("fill", "steelblue") .attr("x", function(d) { return x(d.date)-(((width/usDataTime.length)-wbar)/2); }) .attr("width", (width/usDataTime.length)-wbar) .attr("y", function(d) { return y(d.value); }) .attr('height', d => y(0) - y(d.value)) svg.selectAll("text.value") .data(paDataTimeDelta ) .enter().append("text") .attr("class","value") .style("fill", "black") .style("font-size","10px") //.attr("transform", "rotate(-90)" ) .attr("x", function(d) { return x(d.date); }) .style("text-anchor", "middle") .attr("y", function(d) { return y(d.value)-10; }) .text(d=>d.value) return svg.node(); } 37:T782,chart = { const w = 900; const h = 600; const projection = d3.geoAlbersUsa(); const path = d3.geoPath().projection(projection); projection .scale(1) .translate([0, 0]); // https://github.com/d3/d3-geo#projections const svg = d3.select(DOM.svg(w, h)) .style("width", w) .style("height", h); const map = {} map.type = "FeatureCollection" map.features = us.features const g = svg.append("g") .attr("transform", "translate(0,40)"); var scale = scalingMagic(map.features,w,h) console.log(scale[1]) projection .scale(scale[0]*3) .translate([500, 300]); var color = d3.scaleLinear().range([0,1]).domain([0,50]); var palette = d3.interpolatePlasma; // https://github.com/d3/d3-scale-chromatic svg.append("g") .selectAll("path") .data(map.features) .enter().append("path") .attr("fill", d => palette(color(+d.properties.STATEFP))) .style("fill-opacity", .5) .attr("d", path) .attr("stroke", "white") const area = d3.scalePow().exponent(0.5).range([3, 15]).domain([1,d3.max(usData,d=>+d[datetime[datetime.length - 1]])]); svg .selectAll("cicle") .data(usData) .enter().append("circle") .style("fill", "black") .attr("cx", d=>console.log(+d.Long,+d.Lat,projection([+d.Long,+d.Lat]))) .attr("cx", d=>projection([+d.Long,+d.Lat])[0]) .attr("cy", d=>projection([+d.Long,+d.Lat])[1]) .attr("r",d=>area(+d[datetime[datetime.length - 1]])) .style("stroke", "white") .style("opacity",.7) .on("mouseover", function(){d3.select(this).style("stroke-width", "5px")}) .on("mouseout", function(){d3.selectAll("circle").style("stroke-width", "1px")}) .append("title") //.text(d=>d[datetime[datetime.length - 1]]) .text(function(d){ var temp = [] datetime.forEach(e=>temp.push(+d[e])) return d3.max(temp) }) return svg.node(); }38:T63c,function scalingMagic(shapefile,width,height) { //////////////////////////////////////////////////////////////// /// Map Scaling Magic //////////////////////////////////////////////////////////////// var vertices = []; const projection = d3.geoMercator(); projection .scale(1) .translate([0, 0]); // https://github.com/d3/d3-geo#projections shapefile.forEach(function(d) { if (d.geometry.type=="Polygon") { d.geometry.coordinates.forEach(function(e) { e.forEach(function(f) { vertices.push(f);}) }) } else if (d.geometry.type=="MultiPolygon") { d.geometry.coordinates[0].forEach(function(e) { e.forEach(function(f) { vertices.push(f);}) }) } }) var xmin = 10000000000; var ymin = 10000000000; var xmax = -10000000000; var ymax = -10000000000; vertices.forEach(function(d) { if (xmin>d[0]) xmin = d[0]; if (ymin>d[1]) ymin = d[1]; if (xmax (d[\"Country/Region\"] == \"US\") )","pinned":false,"hidden":false,"mode":"ojs"},{"id":409,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":295,"value":"md`#### Reclassifying the Lat/Lng for the \"Diamond Princess\" or \"Unassigned Location (From Diamond Princess)\" to Oakland Port`","pinned":false,"hidden":false,"mode":"ojs"},{"id":282,"value":"\n//usData.filter(d=>d[\"Province/State\"]==\"Unassigned Location (From Diamond Princess)\")[0].Long=\"-122.2792\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":284,"value":"//usData.filter(d=>d[\"Province/State\"]==\"Unassigned Location (From Diamond Princess)\")[0].Lat=\"37.7957\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"usDataTime = {\n var temp = {}\n datetime.forEach(d=> temp[d] = +0 )\n usData.forEach(d=> datetime.forEach(e=> temp[e] = temp[e] + (+d[e]) ) )\n \n var temp2 = []\n for (const i in temp) temp2.push({\"date\":i,\"value\":temp[i]})\n for (var i = 0; i < temp2.length; i++) {\n var m = temp2[i].date.split(\"/\")[0]\n var d = temp2[i].date.split(\"/\")[1]\n var y = temp2[i].date.split(\"/\")[2]\n if (m.length == 1) m = \"0\"+m\n if (d.length == 1) d = \"0\"+d\n temp2[i].date = m+\"-\"+d+\"-\"+y\n }\n const parseTime = d3.timeParse(\"%m-%d-%y\");\n temp2.forEach(function(d) {\n d.date = parseTime(d.date);\n d.value = +d.value;\n });\n yield temp2\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":554,"value":" yLog = d3.scaleLog().range([ height - margin.bottom, margin.top ]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":556,"value":"xLog = d3.scaleTime().range([ margin.left, width - margin.right - margin.left ]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":187,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":522,"value":"viewof deltaDays = slider({\n title: \"Set the timespan\",\n min: 10, \n max: 50,\n step: 1, \n value: 30,\n format: v => `Show ${v} days`,\n// description: \"Days since ? cases\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":221,"value":"usDataTimeDelta = {\n var temp = []\n for (var i = 1; i < usDataTime.length; i++) {\n temp.push({\"date\":usDataTime[i].date,\"value\":(usDataTime[i].value-usDataTime[i-1].value)})\n }\n yield temp\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":224,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"md`## PA Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":239,"value":"paData = usData.filter(d=> (d[\"Province/State\"].split(\",\")[1] == \" PA\") || d[\"Province/State\"] == \"Pennsylvania\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":243,"value":"paDataTime = {\n var temp = {}\n datetime.forEach(d=> temp[d] = +0 )\n paData.forEach(d=> datetime.forEach(e=> temp[e] = temp[e] + (+d[e]) ) )\n \n var temp2 = []\n for (const i in temp) temp2.push({\"date\":i,\"value\":temp[i]})\n for (var i = 0; i < temp2.length; i++) {\n var m = temp2[i].date.split(\"/\")[0]\n var d = temp2[i].date.split(\"/\")[1]\n var y = temp2[i].date.split(\"/\")[2]\n if (m.length == 1) m = \"0\"+m\n if (d.length == 1) d = \"0\"+d\n temp2[i].date = m+\"-\"+d+\"-\"+y\n }\n const parseTime = d3.timeParse(\"%m-%d-%y\");\n temp2.forEach(function(d) {\n d.date = parseTime(d.date);\n d.value = +d.value;\n });\n yield temp2\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":247,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":354,"value":"paDataTimeDelta = {\n var temp = []\n for (var i = 1; i < paDataTime.length; i++) {\n temp.push({\"date\":paDataTime[i].date,\"value\":(paDataTime[i].value-paDataTime[i-1].value)})\n }\n yield temp\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":352,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"us = d3.json(\"https://gist.githubusercontent.com/dudaspm/89da9e990236d2bc73a3a6ee00c18bb6/raw/144da9932934819edcf8c37ca5c04da530dca85f/usCounties.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":494,"value":"usMainLand = {\n return [[-171.791110603,-66.96466],[18.91619,71.3577635769]]\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":252,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"margin = ({\n top: 20,\n right: 10,\n bottom:50,\n left: 55\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"width = window.innerWidth","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"height = window.innerWidth*(1/3)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":587,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":551,"value":"function get_text_rotation_angle(doubling_period) {\n const radians = 0.0174532925;\n return -Math.atan( (yLog(0)-yLog(0*2))/(xLog(doubling_period)-xLog(0)) ) / radians;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":603,"value":"doubling_periods = [1,2,3,4,7]","pinned":true,"hidden":false,"mode":"ojs"},{"id":597,"value":"doubling_period_labels = doubling_periods.map(function(d) {\n d = Number(d);\n const candidate_n = xLog(datetime[datetime.length -1]) / d;\n const candidate_y = Math.pow(2, candidate_n) * d3.max([1,d3.min(usDataTime, d=>d.value)]);\n if (candidate_y < d3.max(usDataTime, d=>d.value)) {\n return { 'period': d, 'x': usDataTime[usDataTime.length -1].date, 'y': candidate_y };\n } else {\n return { 'period': d, 'x': Math.log2((d3.max(usDataTime, d=>d.value))/(d3.max([1,d3.min(usDataTime, d=>d.value)]))) * d, 'y': (d3.max(usDataTime, d=>d.value)) };\n }\n});","pinned":true,"hidden":false,"mode":"ojs"},{"id":260,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":251,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":389,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":393,"value":"states = {\n var temp = {}\n for (var i = 0; i < statesAbbreviations.length; i++) temp[statesAbbreviations[i][1]] = statesAbbreviations[i][0];\n return temp;\n \n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3a","stdlib":"1","titling":"auto"}