2c:null 2d:["$","title",null,{"children":"InfoVis Project 3.3 | Morva Saaty | Observable"}] 32:T531,viewof GeoMap = { const selection = vl.selectSingle(); const map = vl.markGeoshape({stroke: '#aaa', strokeWidth: 1}) //creating map .data(vl.topojson(usa).feature('states')) .select(selection) .encode( vl.color().if(selection).value('grey'), vl.opacity().if(selection, vl.value(0.8)).value(0.1) ) .transform( //mapping states to find weather Air Quality measurements vl.lookup('id').from(vl.data(weather_data_monthly).key('id').fields(Interaction(selected_weather_type,selected_month))), ) .encode( vl.color().fieldQ(Interaction(selected_weather_type,selected_month)).scale({type: "sqrt", domain: [-60,0,190], scheme: 'lightmulti'}), //domain: [-4,0,20] vl.tooltip().fieldQ(Interaction(selected_weather_type,selected_month)) ) const points = vl.markCircle({size: 9}) //creating circles based on the number of Confirmed Covid cases .data(covid_data_geomap) .encode( vl.latitude().fieldQ('Latitude'), vl.longitude().fieldQ('Longtitude'), vl.tooltip([vl.fieldQ(Month(selected_month)), vl.fieldN('State')]), vl.size().fieldQ(Month(selected_month)).scale({range: [0, 1000]}).legend(null) ); return vl.layer(map,points) .project(vl.projection('albersUsa')) .width(800).height(650) .config({view: {stroke: null}}) .render() }33:T5d7,function Interaction(layout, type){ //finding proper measurement based on the selected item from radio button and checkbox if (layout == 'AQI'){ if (type == 'January') return 'AQI_JAN'; else if (type == 'February') return 'AQI_FEB'; else if (type == 'March') return 'AQI_MAR'; else if (type == 'April') return 'AQI_APR'; else if (type == 'May') return 'AQI_MAY'; else if (type == 'June') return 'AQI_JUN'; else if (type == 'July') return 'AQI_JUL'; else if (type == 'August') return 'AQI_AUG'; else if (type == 'September') return 'AQI_SEP'; else if (type == 'October') return 'AQI_OCT'; else if (type == 'November') return 'AQI_NOV'; } else if(layout == 'PMI2.5'){ if (type == 'January') return 'PMI_JAN'; else if (type == 'February') return 'PMI_FEB'; else if (type == 'March') return 'PMI_MAR'; else if (type == 'April') return 'PMI_APR'; else if (type == 'May') return 'PMI_MAY'; else if (type == 'June') return 'PMI_JUN'; else if (type == 'July') return 'PMI_JUL'; else if (type == 'August') return 'PMI_AUG'; else if (type == 'September') return 'PMI_SEP'; else if (type == 'October') return 'PMI_OCT'; else if (type == 'November') return 'PMI_NOV'; } }34:T1557,line_covid = { var element = html` `; const svg = d3.select(element); // const svg = d3.create("svg") // .attr("viewBox", [0, 0, width, height]) // .style("overflow", "visible"); svg.append("g") .call(xAxisLineCovid); svg.append("g") .call(yAxisLineCovid); // -------------------------- // LINE GRAPH FOR WEATHER // -------------------------- const path = svg.append("g") .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 5.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .selectAll("path") // .data(covid_data.series) .data(covid_date_selected_state) .join("path") .style("mix-blend-mode", "multiply") .attr("d", d => lineCovid(d.values)); // -------------------------- // LINE GRAPH TOOLTIP // -------------------------- const tooltipLine = svg.append("g"); svg.on("touchmove mousemove", function(event) { // const {date, value} = bisect(d3.pointer(event, this)[0]); // d3.event.preventDefault(); const mouse = d3.mouse(this); const xm = xScaleLineCovid.invert(mouse[0]); const ym = yScaleLineCovid.invert(mouse[1]); const i1 = d3.bisectLeft(covid_data.dates, xm, 1); const i0 = i1 - 1; const i = xm - covid_data.dates[i0] > covid_data.dates[i1] - xm ? i1 : i0; const s = d3.least(covid_date_selected_state, d => Math.abs(d.values[i] - ym)); // path.attr("stroke", d => d === s ? null : "#ddd").filter(d => d === s).raise(); // dot.attr("transform", `translate(${xScaleLineCovid(covid_data.dates[i])},${yScaleLineCovid(s.values[i])})`); // dot.select("text").text(`${date2string(covid_data.dates[i])}: ${s.values[i]}`); tooltipLine .attr("transform", `translate(${xScaleLineCovid(covid_data.dates[i])},${yScaleLineCovid(s.values[i])})`) .call(callout, `${s.name}\n${date2LongString(covid_data.dates[i])}: ${s.values[i]}`); }); svg.on("touchend mouseleave", () => tooltipLine.call(callout, null)); // -------------------------- // POLICY RECTANGLES // -------------------------- const tooltip = d3 .select("body") .append("div") .attr("class", "svg-tooltip") .style("position", "absolute") .style("visibility", "hidden"); const rects = svg.selectAll('rect') .data(policy_data_filtered.filter(d => d.state == selected_state)) .enter() .append('rect') .attr('fill', d => policyColor(d.policy_category)) .attr('opacity', 0.6) .attr('x', d => xScaleLineCovid(new Date(d.policy_start))) // .attr('y', margin.top) .attr('y', d => height - margin.bottom + 20 + policyPosition(d.policy_category)) .attr('width', d => dateWidthLine(d.policy_start, d.policy_end)) // .attr('height', height - margin.top - margin.bottom) .attr('height', 9) .on("mouseover", function(d) { // change the selection style d3.select(this) .attr('stroke-width', '2') .attr("stroke", "black"); // make the tooltip visible and update its text tooltip .style("visibility", "visible") .text(`${d.state}, ${d.policy_category}\nSub Category: ${d.policy_sub_category}\nfrom ${date2string(d.policy_start)} to ${date2string(d.policy_end)}`); // .text(`${date2LongString(d.policy_start)} to ${date2LongString(d.policy_end)}`); }) .on("mousemove", function() { tooltip .style("top", d3.event.pageY + 10 + "px") .style("left", d3.event.pageX + 10 + "px"); }) .on("mouseout", function() { // change the selection style d3.select(this).attr('stroke-width', '0'); tooltip.style("visibility", "hidden"); }); // -------------------------- // POLICY LEGEND // -------------------------- const scale = d3.scaleOrdinal() .domain(["Lockdown", "Quarantine", "Social Distancing", "Restriction and Regulation of Government Services", "Restriction and Regulation of Businesses", "External Border Restrictions", "Internal Border Restrictions", "Closure and Regulation of Schools"]) .range(["#86cbff", "#ffad9e", "#616161", "#fff686", "#ff7632", "#c2e5a0", "#e2ec81", "#dbdbdb"]); const legend = d3Legend .legendColor() .shape("path", d3.symbol().type(d3.symbolCircle).size(25)()) //.shape("circle") .shapePadding(15) .labelOffset(5) .scale(scale) .labels(["Lockdown", "Quarantine", "Social Distancing", "Restriction On Govt Services", "Restriction On Businesses", "External Border Restrictions", "Internal Border Restrictions", "Closure and Regulation of Schools"]); svg.append("g") .attr("class", "legend_auto") .style('font-size', 12) .style('font-family', 'sans-serif') .attr("transform", `translate(${margin.left - 60}, ${height - margin.bottom + 48})`) .call(legend) // svg.call(hoverLineCovid, path); return svg.node(); }35:T419,function policyPosition(policy_category) { const position = margin.bottom const initial_gap = 15 const inter_policy_gap = 14.1 if (policy_category == 'Lockdown') { return initial_gap + inter_policy_gap } else if (policy_category == 'Quarantine') { return initial_gap + inter_policy_gap * 2 } else if (policy_category == 'Social Distancing') { return initial_gap + inter_policy_gap * 3 } else if (policy_category == 'Restriction and Regulation of Government Services') { return initial_gap + inter_policy_gap * 4 } else if (policy_category == 'Restriction and Regulation of Businesses') { return initial_gap + inter_policy_gap * 5 } else if (policy_category == 'External Border Restrictions') { return initial_gap + inter_policy_gap * 6 } else if (policy_category == 'Internal Border Restrictions') { return initial_gap + inter_policy_gap * 7 } else if (policy_category == 'Closure and Regulation of Schools') { return initial_gap + inter_policy_gap * 8 } return position; }36:T901,function hoverLineCovid(svg, path) { if ("ontouchstart" in document) svg .style("-webkit-tap-highlight-color", "transparent") .on("touchmove", moved) .on("touchstart", entered) .on("touchend", left) else svg .on("mousemove", moved) .on("mouseenter", entered) .on("mouseleave", left); const dot = svg.append("g") .attr("display", "none"); dot.append("circle") .attr("r", 2.5); dot.append("text") .attr("font-family", "sans-serif") .attr("font-size", 20) .attr("fill", "blue") .attr("text-anchor", "middle") .attr("y", -8); // const tooltip = d3 // .select("body") // .append("div") // .attr("class", "svg-tooltip") // .style("position", "absolute") // .style("visibility", "hidden"); function moved() { d3.event.preventDefault(); const mouse = d3.mouse(this); const xm = xScaleLineCovid.invert(mouse[0]); const ym = yScaleLineCovid.invert(mouse[1]); const i1 = d3.bisectLeft(covid_data.dates, xm, 1); const i0 = i1 - 1; const i = xm - covid_data.dates[i0] > covid_data.dates[i1] - xm ? i1 : i0; const s = d3.least(covid_date_selected_state, d => Math.abs(d.values[i] - ym)); path.attr("stroke", d => d === s ? null : "#ddd").filter(d => d === s).raise(); dot.attr("transform", `translate(${xScaleLineCovid(covid_data.dates[i])},${yScaleLineCovid(s.values[i])})`); dot.select("text").text(`${date2string(covid_data.dates[i])}: ${s.values[i]}`); // tooltip // .style("visibility", "visible") // .text(`${date2string(covid_data.dates[i])}: ${s.values[i]}`); // // .text(`${d3.event.pageX}, ${d3.event.pageY}`); // tooltip // .style("top", yScaleLineCovid(s.values[i]) + "px") // .style("left", xScaleLineCovid(covid_data.dates[i]) + "px"); // tooltip // .style("top", d3.event.pageY + 10 + "px") // .style("left", d3.event.pageX + 10 + "px"); } function entered() { path.style("mix-blend-mode", null).attr("stroke", "#ddd"); dot.attr("display", null); } function left() { path.style("mix-blend-mode", "multiply").attr("stroke", null); dot.attr("display", "none"); // tooltip.style("visibility", "hidden"); } }37:T157b,line_weather = { var element = html` `; const svg = d3.select(element); // const svg = d3.create("svg") // .attr("viewBox", [0, 0, width, height]) // .style("overflow", "visible"); svg.append("g") .call(xAxisLineWeather); svg.append("g") .call(yAxisLineWeather); // -------------------------- // LINE GRAPH FOR WEATHER // -------------------------- const path = svg.append("g") .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .selectAll("path") // .data(data.series) .data(weather_data_selected_state) .join("path") .style("mix-blend-mode", "multiply") .attr("d", d => lineWeather(d.aqi_diff)); // -------------------------- // LINE TOOLTIP // -------------------------- const tooltipLine = svg.append("g"); svg.on("touchmove mousemove", function(event) { // const {date, value} = bisect(d3.pointer(event, this)[0]); // d3.event.preventDefault(); const mouse = d3.mouse(this); const xm = xScaleLineWeather.invert(mouse[0]); const ym = yScaleLineWeather.invert(mouse[1]); const i1 = d3.bisectLeft(covid_data.dates, xm, 1); const i0 = i1 - 1; const i = xm - covid_data.dates[i0] > covid_data.dates[i1] - xm ? i1 : i0; const s = d3.least(weather_data_selected_state, d => Math.abs(d.aqi_diff[i] - ym)); // path.attr("stroke", d => d === s ? null : "#ddd").filter(d => d === s).raise(); // dot.attr("transform", `translate(${xScaleLineCovid(covid_data.dates[i])},${yScaleLineCovid(s.values[i])})`); // dot.select("text").text(`${date2string(covid_data.dates[i])}: ${s.values[i]}`); tooltipLine .attr("transform", `translate(${xScaleLineWeather(covid_data.dates[i])},${yScaleLineWeather(s.aqi_diff[i])})`) .call(callout, `${s.state}\n${date2LongString(covid_data.dates[i])}: ${s.aqi_diff[i]}`); }); svg.on("touchend mouseleave", () => tooltipLine.call(callout, null)); // -------------------------- // POLICY RECTANGLES // -------------------------- const tooltip = d3 .select("body") .append("div") .attr("class", "svg-tooltip") .style("position", "absolute") .style("visibility", "hidden"); const rects = svg.selectAll('rect') .data(policy_data_filtered.filter(d => d.state == selected_state)) .enter() .append('rect') .attr('fill', d => policyColor(d.policy_category)) .attr('opacity', 0.6) .attr('x', d => xScaleLineCovid(new Date(d.policy_start))) .attr('y', d => height - margin.bottom + 20 + policyPosition(d.policy_category)) .attr('width', d => dateWidthLine(d.policy_start, d.policy_end)) .attr('height', 9) // -------------------------- // POLICY TOOLTIP // -------------------------- .on("mouseover", function(d) { // change the selection style d3.select(this) .attr('stroke-width', '2') .attr("stroke", "black"); // make the tooltip visible and update its text tooltip .style("visibility", "visible") .text(`${d.state}, ${d.policy_category}\nSub Category: ${d.policy_sub_category}\nfrom ${date2string(d.policy_start)} to ${date2string(d.policy_end)}`); // .text(`${date2LongString(d.policy_start)} to ${date2LongString(d.policy_end)}`); }) .on("mousemove", function() { tooltip .style("top", d3.event.pageY + 10 + "px") .style("left", d3.event.pageX + 10 + "px"); }) .on("mouseout", function() { // change the selection style d3.select(this).attr('stroke-width', '0'); tooltip.style("visibility", "hidden"); }); // -------------------------- // POLICY LEGEND // -------------------------- const scale = d3.scaleOrdinal() .domain(["Lockdown", "Quarantine", "Social Distancing", "Restriction and Regulation of Government Services", "Restriction and Regulation of Businesses", "External Border Restrictions", "Internal Border Restrictions", "Closure and Regulation of Schools"]) .range(["#86cbff", "#ffad9e", "#616161", "#fff686", "#ff7632", "#c2e5a0", "#e2ec81", "#dbdbdb"]); const legend = d3Legend .legendColor() .shape("path", d3.symbol().type(d3.symbolCircle).size(25)()) //.shape("circle") .shapePadding(15) .labelOffset(5) .scale(scale) .labels(["Lockdown", "Quarantine", "Social Distancing", "Restriction On Govt Services", "Restriction On Businesses", "External Border Restrictions", "Internal Border Restrictions", "Closure and Regulation of Schools"]); svg.append("g") .attr("class", "legend_auto") .style('font-size', 12) .style('font-family', 'sans-serif') .attr("transform", `translate(${margin.left - 60}, ${height - margin.bottom + 48})`) .call(legend) // svg.call(hoverLineWeather, path); return svg.node(); }38:T627,function hoverLineWeather(svg, path) { if ("ontouchstart" in document) svg .style("-webkit-tap-highlight-color", "transparent") .on("touchmove", moved) .on("touchstart", entered) .on("touchend", left) else svg .on("mousemove", moved) .on("mouseenter", entered) .on("mouseleave", left); const dot = svg.append("g") .attr("display", "none"); dot.append("circle") .attr("r", 2.5); dot.append("text") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("text-anchor", "middle") .attr("y", -8); function moved() { d3.event.preventDefault(); const mouse = d3.mouse(this); const xm = xScaleLineWeather.invert(mouse[0]); const ym = yScaleLineWeather.invert(mouse[1]); const i1 = d3.bisectLeft(covid_data.dates, xm, 1); const i0 = i1 - 1; const i = xm - covid_data.dates[i0] > covid_data.dates[i1] - xm ? i1 : i0; const s = d3.least(weather_data_selected_state, d => Math.abs(d.aqi_diff[i] - ym)); path.attr("stroke", d => d === s ? null : "#ddd").filter(d => d === s).raise(); dot.attr("transform", `translate(${xScaleLineWeather(covid_data.dates[i])},${yScaleLineWeather(s.aqi_diff[i])})`); dot.select("text").text(`${date2string(covid_data.dates[i])}: ${s.aqi_diff[i]}`); } function entered() { path.style("mix-blend-mode", null).attr("stroke", "#ddd"); dot.attr("display", null); } function left() { path.style("mix-blend-mode", "multiply").attr("stroke", null); dot.attr("display", "none"); } }39:T12b9,chart_heatmap = { const svg = d3.create("svg") .attr("id", "heatmap-box") .attr("viewBox", [0, 0, width, height]) .style("overflow", "visible"); svg.append("g") .call(xAxisHeatmap); svg.append("g") .call(yAxisHeatmap); const weatherColumn = getWeatherColumn(weather_type_heatmap); // Build color scale // var myColor = d3.scaleSequential(d3.interpolateRdYlBu) // .domain([d3.max(weather_data_daily, d => d.aqi_diff_19_20), d3.min(weather_data_daily, d => d.aqi_diff_19_20)]) var myColor = d3.scaleDivergingSqrt() .domain([d3.max(weather_data_daily, d => d[weatherColumn]), 0, d3.min(weather_data_daily, d => d[weatherColumn])]) .interpolator(d3.interpolateRdBu) // create a tooltip const tooltip = d3 .select("body") .append("div") .attr("class", "svg-tooltip") .style("position", "absolute") .style("visibility", "hidden"); // create a tooltip // const tooltip_policy = d3 // .select("body") // .append("div") // .attr("class", "svg-tooltip-policy") // .style("position", "absolute") // .style("visibility", "hidden"); //Read the data svg.selectAll("rect") // .data(sample_data, function(d) {return d.group+':'+d.variable;}) .data(weather_data_daily) .enter() .append("rect") .attr("x", d => xScaleHeatmap(d.state)) .attr("y", d => yScaleHeatmap(date2string(d.date))) // .attr("y", 0) .attr("width", xScaleHeatmap.bandwidth ) .attr("height", yScaleHeatmap.bandwidth ) .style("fill", d => myColor(d[getWeatherColumn(weather_type_heatmap)])) .on("mouseover", function(d) { // change the selection style d3.select(this) .attr('stroke-width', '2') .attr("stroke", "black"); // make the tooltip visible and update its text tooltip .style("visibility", "visible") .text(`Date: ${date2string(d.date)}\nState: ${d.state}\nChange from 2019: ${d[weatherColumn]}`); }) .on("mousemove", function() { tooltip .style("top", d3.event.pageY - 10 + "px") .style("left", d3.event.pageX + 10 + "px"); }) .on("mouseout", function() { // change the selection style d3.select(this).attr('stroke-width', '0'); tooltip.style("visibility", "hidden"); }); const policy_data = policy_data_filtered.filter(d => d.policy_category == selected_policy & d.state !== null & d.state !== 'Washington, D.C.') for (var j = 0; j < policy_data.length; j++) { var d = policy_data[j] var policy_height = dateWidth(d.policy_end, d.policy_start) var policy_width = xScaleHeatmap.bandwidth() svg.append('rect') // .attr('fill', d => policyColor(d.policy_category)) .attr('x', xScaleHeatmap(d.state)) .attr('y', yScaleHeatmap(date2string(d.policy_start)) - dateWidth(d.policy_end, d.policy_start)) .attr('width', xScaleHeatmap.bandwidth()) .attr('height', dateWidth(d.policy_end, d.policy_start)) .attr('fill', 'transparent') .attr("stroke", 'steelblue') .attr("stroke-width", '2') .attr('state', d.state) .attr('category', d.policy_category) .attr('sub_category', d.policy_sub_category) .attr('policy_start', date2string(d.policy_start)) .attr('policy_end', date2string(d.policy_end)) // .attr("stroke-dasharray", `0,${x.bandwidth()},${policy_height},${x.bandwidth()},${policy_height}`); .on("mouseover", function() { var state = d3.select(this).attr('state') var category = d3.select(this).attr('category') var sub_category = d3.select(this).attr('sub_category') var policy_start = d3.select(this).attr('policy_start') var policy_end = d3.select(this).attr('policy_end') // change the selection style d3.select(this) .attr('stroke-width', '5') // .attr("stroke", "black"); // make the tooltip visible and update its text tooltip .style("visibility", "visible") // .text(`Policy: ${d.policy_category}\nSub-category: ${d.policy_sub_category}\nDuration: ${d.state}`); .text(`State: ${state}\nSub Category: ${sub_category}\nDuration: ${policy_start} to ${policy_end}`); }) .on("mousemove", function() { tooltip .style("top", d3.event.pageY - 50 + "px") .style("left", d3.event.pageX + 50 + "px"); }) .on("mouseout", function() { // change the selection style d3.select(this).attr('stroke-width', '2'); tooltip.style("visibility", "hidden"); }); } return svg.node(); }3a:Tbf7,function legend({ color, title, tickSize = 6, width = 500, height = 44 + tickSize, marginTop = 18, marginRight = 0, marginBottom = 16 + tickSize, marginLeft = 0, ticks = width / 64, tickFormat, tickValues } = {}) { const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .style("overflow", "visible") .style("display", "block"); let x; // Continuous if (color.interpolator) { x = Object.assign(color.copy() .interpolator(d3.interpolateRound(marginLeft, width - marginRight)), {range() { return [marginLeft, width - marginRight]; }}); svg.append("image") .attr("x", marginLeft) .attr("y", marginTop) .attr("width", width - marginLeft - marginRight) .attr("height", height - marginTop - marginBottom) .attr("preserveAspectRatio", "none") .attr("xlink:href", ramp(color.interpolator()).toDataURL()); // scaleSequentialQuantile doesn’t implement ticks or tickFormat. if (!x.ticks) { if (tickValues === undefined) { const n = Math.round(ticks + 1); tickValues = d3.range(n).map(i => d3.quantile(color.domain(), i / (n - 1))); } if (typeof tickFormat !== "function") { tickFormat = d3.format(tickFormat === undefined ? ",f" : tickFormat); } } } // Discrete else if (color.invertExtent) { const thresholds = color.thresholds ? color.thresholds() // scaleQuantize : color.quantiles ? color.quantiles() // scaleQuantile : color.domain(); // scaleThreshold const thresholdFormat = tickFormat === undefined ? d => d : typeof tickFormat === "string" ? d3.format(tickFormat) : tickFormat; x = d3.scaleLinear() .domain([-1, color.range().length - 1]) .rangeRound([marginLeft, width - marginRight]); svg.append("g") .selectAll("rect") .data(color.range()) .join("rect") .attr("x", (d, i) => x(i - 1)) .attr("y", marginTop) .attr("width", (d, i) => x(i) - x(i - 1)) .attr("height", height - marginTop - marginBottom) .attr("fill", d => d); tickValues = d3.range(thresholds.length); tickFormat = i => thresholdFormat(thresholds[i], i); } svg.append("g") .attr("transform", `translate(0, ${height - marginBottom})`) .call(d3.axisBottom(x) .ticks(ticks, typeof tickFormat === "string" ? tickFormat : undefined) .tickFormat(typeof tickFormat === "function" ? tickFormat : undefined) .tickSize(tickSize) .tickValues(tickValues)) .call(g => g.selectAll(".tick line").attr("y1", marginTop + marginBottom - height)) .call(g => g.select(".domain").remove()) .call(g => g.append("text") .attr("y", marginTop + marginBottom - height - 6) .attr("fill", "currentColor") .attr("text-anchor", "start") .attr("font-weight", "bold") .text(title)); return svg.node(); }3b:T556,// // .labels(["Lockdown", "Quarantine", "Social Distancing", "Restriction On Govt Services", "Restriction On Businesses", "External Border Restrictions", "Internal Border Restrictions", "Closure and Regulation of Schools"]); // function policyPosition(policy_category) { // const position = margin.bottom // const initial_gap = 10 // const inter_policy_gap = 12 // if (policy_category == 'Lockdown') { // return initial_gap + inter_policy_gap // } // else if (policy_category == 'Quarantine') { // return initial_gap + inter_policy_gap * 2 // } // else if (policy_category == 'Social Distancing') { // return initial_gap + inter_policy_gap * 3 // } // else if (policy_category == 'Restriction and Regulation of Government Services') { // return initial_gap + inter_policy_gap * 4 // } // else if (policy_category == 'Restriction and Regulation of Businesses') { // return initial_gap + inter_policy_gap * 5 // } // else if (policy_category == 'External Border Restrictions') { // return initial_gap + inter_policy_gap * 6 // } // else if (policy_category == 'Internal Border Restrictions') { // return initial_gap + inter_policy_gap * 7 // } // else if (policy_category == 'Closure and Regulation of Schools') { // return initial_gap + inter_policy_gap * 8 // } // return position; // }3c:T7d1,function weatherDataStructureGeoMap(data_weather3){ // var id = d3.range(1,53); var id = id_states; var states = data_weather3.map(r => r.State); var aJan = data_weather3.map(r => r.AQI['January']); var aFeb = data_weather3.map(r => r.AQI['February']); var aMar = data_weather3.map(r => r.AQI['March']); var aApr = data_weather3.map(r => r.AQI['April']); var aMay = data_weather3.map(r => r.AQI['May']); var aJun = data_weather3.map(r => r.AQI['June']); var aJul = data_weather3.map(r => r.AQI['July']); var aAug = data_weather3.map(r => r.AQI['August']); var aSep = data_weather3.map(r => r.AQI['September']); var aOct = data_weather3.map(r => r.AQI['October']); var aNov = data_weather3.map(r => r.AQI['November']); var pJan = data_weather3.map(r => r.PMI2_5['January']); var pFeb = data_weather3.map(r => r.PMI2_5['February']); var pMar = data_weather3.map(r => r.PMI2_5['March']); var pApr = data_weather3.map(r => r.PMI2_5['April']); var pMay = data_weather3.map(r => r.PMI2_5['May']); var pJun = data_weather3.map(r => r.PMI2_5['June']); var pJul = data_weather3.map(r => r.PMI2_5['July']); var pAug = data_weather3.map(r => r.PMI2_5['August']); var pSep = data_weather3.map(r => r.PMI2_5['September']); var pOct = data_weather3.map(r => r.PMI2_5['October']); var pNov = data_weather3.map(r => r.PMI2_5['November']); var data_weather4 = Array.from(d3.zip(id,states, aJan, aFeb, aMar, aApr, aMay, aJun,aJul, aAug, aSep, aOct,aNov, pJan, pFeb, pMar, pApr, pMay, pJun,pJul, pAug, pSep, pOct,pNov)) .map(r => ({id: r[0] , State: r[1], AQI_JAN: r[2], AQI_FEB: r[3], AQI_MAR: r[4], AQI_APR: r[5], AQI_MAY: r[6], AQI_JUN: r[7], AQI_JUL: r[8], AQI_AUG: r[9] , AQI_SEP: r[10], AQI_OCT: r[11] ,AQI_NOV: r[12] , PMI_JAN: r[13], PMI_FEB: r[14], PMI_MAR: r[15], PMI_APR: r[16], PMI_MAY: r[17], PMI_JUN: r[18], PMI_JUL: r[19], PMI_AUG: r[20] , PMI_SEP: r[21], PMI_OCT: r[22] , PMI_NOV: r[23]})); return data_weather4; }3d:[{"id":"442619a3ed577c01ff96efc5cd7be1e8647e8744367f02c5356b54c9b280f4a526aaa66ef5f9ad645b68fb10ca1ee5f8c00286319b72f75a50f44ce5642bc841","href":"https://static.observableusercontent.com/files/442619a3ed577c01ff96efc5cd7be1e8647e8744367f02c5356b54c9b280f4a526aaa66ef5f9ad645b68fb10ca1ee5f8c00286319b72f75a50f44ce5642bc841","name":"covid_cases_us@1.csv","type":"text/csv","lastModified":1607101829468.176,"size":92514},{"id":"d4b676b60a2e2cc2139c2fb2b889cf5fb972710a682ff5782eb6a8f618e6b4fa06b41a188617150331a074bce1d4b83279edeb152b7df8b570cfffeeec9c3de6","href":"https://static.observableusercontent.com/files/d4b676b60a2e2cc2139c2fb2b889cf5fb972710a682ff5782eb6a8f618e6b4fa06b41a188617150331a074bce1d4b83279edeb152b7df8b570cfffeeec9c3de6","name":"policy_all@1.csv","type":"text/csv","lastModified":1607101829468.176,"size":874349},{"id":"1a39cca96ef352ad0353f7fc16291622ceeaf1593afa313100fe59f3475b1b8d16ea74245702e463f4f885330c4f25b0543982ee8b71e8f1244ff30868d84ae8","href":"https://static.observableusercontent.com/files/1a39cca96ef352ad0353f7fc16291622ceeaf1593afa313100fe59f3475b1b8d16ea74245702e463f4f885330c4f25b0543982ee8b71e8f1244ff30868d84ae8","name":"time_series_covid19_confirmed_US_3.csv","type":"text/csv","lastModified":1607101829468.176,"size":3748218},{"id":"d1fc56516031414116acf42ca56f3335cc6f33ad569944591206e845344fdd56f3b7a30cf74e9af11b6544d9234040e4d0ea9b8a910b31e6fb2d3e0fe8e4527e","href":"https://static.observableusercontent.com/files/d1fc56516031414116acf42ca56f3335cc6f33ad569944591206e845344fdd56f3b7a30cf74e9af11b6544d9234040e4d0ea9b8a910b31e6fb2d3e0fe8e4527e","name":"weather_diff_daily_2016_2020@1.csv","type":"text/csv","lastModified":1607101829468.176,"size":571271},{"id":"f9b4f18af3a1ad35f0019d317bf9c641774a9e80fbc690c14f6d73860b595b2a9611754d5bbe2870dc70bc37c8e37d044323dd8f89bec1aca44d2ef06d3c32b8","href":"https://static.observableusercontent.com/files/f9b4f18af3a1ad35f0019d317bf9c641774a9e80fbc690c14f6d73860b595b2a9611754d5bbe2870dc70bc37c8e37d044323dd8f89bec1aca44d2ef06d3c32b8","name":"weather_diff_usa.csv","type":"text/csv","lastModified":1607101829468.176,"size":32253}] 30:{"id":"d5b575005557bbac","slug":"infovis","title":"InfoVis Project 3.3","thumbnail":"c8ccb0dfb218623b3e3a92e8652db5fe5cbb2f18a695975f645ceeaf4829065b","access_level":"public","create_time":"$D2020-12-04T17:10:29.468Z","update_time":"$D2020-12-04T17:10:29.468Z","view_time":null,"first_public_time":"$D2023-02-26T18:50:36.638Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"e528d6b7ff0490a4","login":"morvasaaty","name":"Morva Saaty","avatar_url":"https://avatars-next.observableusercontent.com/84d57fbc829971dcc99e6cdc3f435140e4b5d2b41c74a95165001427230f2d26","tier":"starter_2024","bio":""},"version":1935,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"dd80360632e7c161","login":"morvasaaty","name":"Morva Saaty","avatar_url":"https://avatars-next.observableusercontent.com/84d57fbc829971dcc99e6cdc3f435140e4b5d2b41c74a95165001427230f2d26","tier":null,"bio":""}],"members":[{"type":"individual","id":"dd80360632e7c161","login":"morvasaaty","name":"Morva Saaty","avatar_url":"https://avatars-next.observableusercontent.com/84d57fbc829971dcc99e6cdc3f435140e4b5d2b41c74a95165001427230f2d26","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"InfoVis Project 3.3","cells":[{"id":1,"value":"md`# InfoVis Project 3.3`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1305,"value":"md`## Geographical Map`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1520,"value":"viewof selected_weather_type = {\n const form = html``;\n form.oninput = () => form.value = form.radio.value;\n form.onchange = () => { // Safari…\n form.value = form.radio.value;\n form.dispatchEvent(new CustomEvent(\"input\"));\n };\n form.value = form.radio.value;\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1522,"value":"viewof selected_month = menu('Choosing a Month', [\n 'January',\n 'February',\n 'March',\n 'April',\n 'May',\n 'June',\n 'July',\n 'August',\n 'September',\n 'October',\n 'November'\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1440,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1595,"value":"selected_state = \n{\n return (typeof selectedSingle._vgsid_ === 'undefined') ? 'Virginia' : findState(Object.values(selectedSingle)[0][0])\n // if (selectedSingle) {\n // return findState(Object.values(selectedSingle)[0][0])\n // }\n // return null;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1602,"value":"selectedSingle = Generators.observe((notify) => {\n const signal = Object.keys(GeoMap.getState({ signals: (name) => name.match(/^sel\\d+$/) })\n .signals)[0]\n const selected = (selection, predicates) => {\n notify(predicates);\n }\n GeoMap.addSignalListener(signal, selected);\n return () => GeoMap.removeEventListener(signal, selected);\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1600,"value":"sort_states = usa.objects.states.geometries.sort((a,b) => d3.ascending(a.id, b.id))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1597,"value":"function findState(selectedSingle){ //finding the selected state\n var state_id =sort_states[selectedSingle].id\n for (let i =0; i< weather_data_monthly.length+1;i++){\n if(weather_data_monthly[i].id == state_id -1)\n return weather_data_monthly[i].State;\n else if(selectedSingle == 51)\n return 'Wyoming'\n else if(selectedSingle == 47)\n return 'Virginia'\n else if(selectedSingle == 39)\n return 'Pennsylvania'\n else if(selectedSingle == 11)\n return 'Georgia'\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1442,"value":"function Month(layout){ //Find the month based on selected month of checkbox\n if (layout == 'January')\n return '1/31/20';\n else if (layout == 'February')\n return '2/29/20'; \n else if (layout == 'March')\n return '3/31/20'; \n else if (layout == 'April')\n return '4/30/20'; \n else if (layout == 'May')\n return '5/31/20'; \n else if (layout == 'June')\n return '6/30/20'; \n else if (layout == 'July')\n return '7/31/20'; \n else if (layout == 'August')\n return '8/31/20'; \n else if (layout == 'September')\n return '9/30/20'; \n else if (layout == 'October')\n return '10/31/20'; \n else if (layout == 'November')\n return '11/30/20'; \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1518,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1437,"value":"md`## Line Graph`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1344,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1837,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1810,"value":"policy_data_filtered.filter(d => d.state == selected_state)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1779,"value":"callout = (g, value) => {\n if (!value) return g.style(\"display\", \"none\");\n\n g\n .style(\"display\", null)\n .style(\"pointer-events\", \"none\")\n .style(\"font\", \"10px sans-serif\");\n\n const path = g.selectAll(\"path\")\n .data([null])\n .join(\"path\")\n .attr(\"fill\", \"white\")\n .attr(\"stroke\", \"black\");\n\n const text = g.selectAll(\"text\")\n .data([null])\n .join(\"text\")\n .call(text => text\n .selectAll(\"tspan\")\n .data((value + \"\").split(/\\n/))\n .join(\"tspan\")\n .attr(\"x\", 0)\n .attr(\"y\", (d, i) => `${i * 1.1}em`)\n .style(\"font-weight\", (_, i) => i ? null : \"bold\")\n .text(d => d));\n\n const {x, y, width: w, height: h} = text.node().getBBox();\n\n text.attr(\"transform\", `translate(${-w / 2},${15 - y})`);\n path.attr(\"d\", `M${-w / 2 - 10},5H-5l5,-5l5,5H${w / 2 + 10}v${h + 20}h-${w + 20}z`);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1357,"value":"xScaleLineCovid = d3.scaleUtc()\n .domain(d3.extent(covid_data.dates))\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1359,"value":"yScaleLineCovid = d3.scaleLinear()\n .domain([0, d3.max(covid_date_selected_state, d => d3.max(d.values))]).nice()\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1361,"value":"xAxisLineCovid = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(xScaleLineCovid).ticks(width / 80).tickSizeOuter(0))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1363,"value":"yAxisLineCovid = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(yScaleLineCovid))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 3)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(covid_data.y))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1370,"value":"lineCovid = d3.line()\n // .defined(d => !isNaN(d))\n .x((d, i) => xScaleLineCovid(covid_data.dates[i]))\n .y(d => yScaleLineCovid(d))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1381,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1826,"value":"function dateWidthLine(startDate, endDate) {\n \n const startPixel = startDate == null ? (margin.left) : xScaleLineCovid(new Date(startDate))\n const endPixel = endDate == null ? (width - margin.right) : xScaleLineCovid(new Date(endDate))\n \n return endPixel - startPixel;\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1317,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1319,"value":"lineWeather = d3.line()\n // .defined(d => !isNaN(d))\n .x((d, i) => xScaleLineWeather(covid_data.dates[i]))\n .y(d => yScaleLineWeather(d))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1321,"value":"xScaleLineWeather = d3.scaleUtc()\n .domain(d3.extent(covid_data.dates))\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1323,"value":"yScaleLineWeather = d3.scaleLinear()\n .domain([d3.min(weather_data_selected_state, d => d3.min(d.aqi_diff)), d3.max(weather_data_selected_state, d => d3.max(d.aqi_diff))]).nice()\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1325,"value":"xAxisLineWeather = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(xScaleLineWeather).ticks(width / 80).tickSizeOuter(0))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1327,"value":"yAxisLineWeather = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(yScaleLineWeather))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 3)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(\"\"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1415,"value":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1307,"value":"md`## Heatmap`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":958,"value":"viewof selected_policy = menu('Choosing a Policy', [\n 'Lockdown',\n 'Quarantine',\n 'Social Distancing',\n 'Restriction and Regulation of Government Services',\n 'Restriction and Regulation of Businesses',\n 'External Border Restrictions',\n 'Internal Border Restrictions',\n 'Closure and Regulation of Schools',\n])\n// mutable selected_policy = \"Quarantine\"\n // const policyColorMap = new Map([[\"Lockdown\", \"#86cbff\"], [\"Quarantine\", \"#ffad9e\"], [\"Social Distancing\", \"#616161\"], [\"Restriction and Regulation of Government Services\", \"#fff686\"], [\"Restriction and Regulation of Businesses\", \"#ff7632\"], [\"External Border Restrictions\", \"#c2e5a0\"], [\"Internal Border Restrictions\", \"#e2ec81\"], [\"Closure and Regulation of Schools\", \"#dbdbdb\"]]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1917,"value":"viewof weather_type_heatmap = {\n const form = html``;\n form.oninput = () => form.value = form.radio.value;\n form.onchange = () => { // Safari…\n form.value = form.radio.value;\n form.dispatchEvent(new CustomEvent(\"input\"));\n };\n form.value = form.radio.value;\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"$39","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1925,"value":"function getWeatherColumn(weatherType){\n return (weatherType == \"PM25\") ? 'pm25_diff' : 'aqi_diff'\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1716,"value":"legend({\n color: d3.scaleDivergingSqrt([-0.1, 0, 0.1], d3.interpolateRdBu),\n title: \"Daily change\",\n tickFormat: \"+\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1714,"value":"$3a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1709,"value":"function ramp(color, n = 256) {\n const canvas = DOM.canvas(n, 1);\n const context = canvas.getContext(\"2d\");\n for (let i = 0; i < n; ++i) {\n context.fillStyle = color(i / (n - 1));\n context.fillRect(i, 0, 1, 1);\n }\n return canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":501,"value":"function dateWidth(startDate, endDate) {\n \n const startPixel = startDate == null ? (margin.top) : yScaleHeatmap(date2string(startDate))\n const endPixel = endDate == null ? (height - margin.bottom) : yScaleHeatmap(date2string(endDate))\n \n return endPixel - startPixel;\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":527,"value":"function policyColor(policy_category){\n \n const policyColorMap = new Map([[\"Lockdown\", \"#86cbff\"], [\"Quarantine\", \"#ffad9e\"], [\"Social Distancing\", \"#616161\"], [\"Restriction and Regulation of Government Services\", \"#fff686\"], [\"Restriction and Regulation of Businesses\", \"#ff7632\"], [\"External Border Restrictions\", \"#c2e5a0\"], [\"Internal Border Restrictions\", \"#e2ec81\"], [\"Closure and Regulation of Schools\", \"#dbdbdb\"]]);\n\n return policyColorMap.get(policy_category);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":541,"value":"$3b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":458,"value":"// filtered_data = data.series.filter(r => r.name == selected_state)\nweather_data_selected_state = {\n const selected_state_data = weather_data_daily.filter(r => r.state == selected_state)\n const states = []\n states.push({\n state: selected_state_data[0].state,\n aqi_diff: d3.map(selected_state_data, r => r['aqi_diff']),\n pm25_diff: d3.map(selected_state_data, r => r['pm25_diff'])\n })\n \n return states;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1346,"value":"covid_date_selected_state = covid_data.series.filter(r => r.name == selected_state)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":704,"value":"md `## Scaling`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"height = 800","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"margin = ({top: 50, right: 70, bottom: 200, left: 70})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"xScaleHeatmap = d3.scaleBand()\n .domain(states)\n .range([ margin.left, width - margin.right ])\n .padding(0.2);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"// y = d3.scaleLinear()\n// .domain([d3.min(filtered_data, d => d3.min(d.aqi_diff)), d3.max(filtered_data, d => d3.max(d.aqi_diff))]).nice()\n// .range([height - margin.bottom, margin.top])\nyScaleHeatmap = d3.scaleBand()\n .domain(dates)\n .range([ height - margin.bottom, margin.top ])\n .padding(0.01);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"xAxisHeatmap = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n // .call(d3.axisBottom(x).ticks(width / 100).tickSizeOuter(0))\n .call(d3.axisBottom(xScaleHeatmap))\n // .attr(\"transform\", \"rotate(-65)\")\n .selectAll(\"text\")\t\n .style(\"text-anchor\", \"end\")\n .attr(\"dx\", \"-.8em\")\n .attr(\"dy\", \"-.60em\")\n .attr(\"transform\", \"rotate(-90)\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"yAxisHeatmap = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(yScaleHeatmap).tickValues(yScaleHeatmap.domain().filter(function(d,i){ return !(i%10)})))\n .call(g => g.select(\".domain\").remove())\n // .call(g => g.select(\".tick:last-of-type text\").clone()\n // .attr(\"x\", 3)\n // .attr(\"text-anchor\", \"start\")\n // .attr(\"font-weight\", \"bold\"))\n // .text('Hello'))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":702,"value":"md `## Datasets`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1260,"value":"md `## Covid`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1533,"value":"covid_data = {\n const data = d3.csvParse(await FileAttachment(\"covid_cases_us@1.csv\").text());\n const weather_data = d3.csvParse(await FileAttachment(\"weather_diff_usa.csv\").text());\n const columns = data.columns.slice(1);\n return {\n y: \"\",\n series: data.map(d => ({\n name: d.Province_State.replace(/, ([\\w-]+).*/, \" $1\"),\n values: columns.map(k => +d[k]),\n weather_diff: weather_data.filter(w => w.state == d.Province_State)\n })),\n dates: columns.map(d3.utcParse(\"%Y-%m-%d\"))\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1547,"value":"covid_data_geomap_raw = FileAttachment(\"time_series_covid19_confirmed_US_3.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1545,"value":"latitude_temp_0 = [...d3.rollup(covid_data_geomap_raw, v => d3.median(v,d=> d.Lat) , d=> d.Province_State)]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1543,"value":"latitude_temp_1 = Array.from(latitude_temp_0).map(r => ({State: r[0] , Latitude: r[1]}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1551,"value":"longitude_temp_0 = [...d3.rollup(covid_data_geomap_raw, v => d3.median(v,d=> d.Long_) , d=> d.Province_State)]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1549,"value":"longitude_temp_1 = Array.from(longitude_temp_0).map(r => ({State: r[0] , Longtitude: r[1]}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1541,"value":"stats_lat_long_0 = d3.zip(latitude_temp_1.map(r => r.State),latitude_temp_1.map(r => r.Latitude),longitude_temp_1.map(r => r.Longtitude))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1539,"value":"stats_lat_long_1 = Array.from(stats_lat_long_0).map(r => ({State: r[0] , Latitude: r[1], Longtitude: r[2]}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1559,"value":"columnsToSum = [covid_data_geomap_raw.columns.slice(20,21),covid_data_geomap_raw.columns.slice(49,50),covid_data_geomap_raw.columns.slice(80,81),covid_data_geomap_raw.columns.slice(110,111),covid_data_geomap_raw.columns.slice(141,142),covid_data_geomap_raw.columns.slice(171,172),covid_data_geomap_raw.columns.slice(202,203),covid_data_geomap_raw.columns.slice(233,234),covid_data_geomap_raw.columns.slice(263,264),covid_data_geomap_raw.columns.slice(294,295),covid_data_geomap_raw.columns.slice(324,325)]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1557,"value":"byMonth = [...d3.rollup(covid_data_geomap_raw,\n v => Object.fromEntries(columnsToSum.map(col => [col, d3.sum(v, d => +d[col])])),\n d => d.Province_State)]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1555,"value":"byMonth2 = Array.from(byMonth).map(r => ({State: r[0] , Months: r[1]}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1553,"value":"months = [...byMonth2.map(r => r.Months)]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1537,"value":"covid_data_geomap_temp = stats_lat_long_1.map((item, i) => Object.assign({}, item, months[i]));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1535,"value":"covid_data_geomap = covid_data_geomap_temp.filter(d => d.State !== 'Puerto Rico' && d.State !== 'Diamond Princess' && d.State !== 'Grand Princess' && d.State !== 'Guam' && d.State !== 'Northern Mariana Islands'); //final version of Covid data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1529,"value":"md `## Policy`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":481,"value":"policy_data_raw = d3.csvParse(await FileAttachment(\"policy_all@1.csv\").text(), d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":493,"value":"policy_data_trimmed = d3.map(policy_data_raw, r => ({ state: r.Province, policy_category: r[\"Policy Category\"], policy_sub_category: r[\"Policy Sub-Category\"], policy_start: r[\"Date Policy Start\"], policy_end: r[\"Date Policy End\"], compliance: r[\"Compliance\"]}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":518,"value":"policy_data_filtered = policy_data_trimmed.filter(r => r.policy_category == 'Lockdown' || r.policy_category == 'Quarantine' || r.policy_category == 'Restriction and Regulation of Government Services' || r.policy_category == 'Restriction and Regulation of Businesses' || r.policy_category == 'External Border Restrictions' || r.policy_category == 'Internal Border Restrictions' || r.policy_category == 'Closure and Regulation of Schools' || r.policy_category == 'Social Distancing')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1262,"value":"md `## Weather`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":634,"value":"// weather_data_monthly = d3.csvParse(await FileAttachment(\"weather_diff_monthly_usa.csv\").text(), d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":657,"value":"weather_data_daily = d3.csvParse(await FileAttachment(\"weather_diff_daily_2016_2020@1.csv\").text(), d3.autoType).sort((a,b) => d3.ascending(a.state, b.state)).filter(w => w.date !== \"02-29-2020\")\n// weather_data_daily = d3.csvParse(await FileAttachment(\"weather_diff_daily_2016_2020.csv\").text(), d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":743,"value":"// states = d3.map(weather_data_daily, function(d) { return d.state; }).keys()\nstates = d3.set(weather_data_daily, function(d) {return d.state}).values();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":748,"value":"dates = d3.set(weather_data_daily, function(d) {\n var date = new Date(d.date);\n date.setDate(date.getDate());\n\n var dateString = date.getFullYear() + '-'\n + ('0' + (date.getMonth()+1)).slice(-2) + '-'\n + ('0' + date.getDate()).slice(-2) ;\n\n return dateString;\n}).values();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1292,"value":"dates[dates.length - 1]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":859,"value":"function date2string(givenDate){\n \n if (givenDate == null) {\n return dates[dates.length - 1]\n }\n \n var date = new Date(givenDate);\n date.setDate(date.getDate());\n\n var dateString = date.getFullYear() + '-'\n + ('0' + (date.getMonth()+1)).slice(-2) + '-'\n + ('0' + date.getDate()).slice(-2) ;\n\n return dateString;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1786,"value":"function date2LongString(givenDate) {\n \n var date = new Date(givenDate)\n if (givenDate == null) {\n date = dates[dates.length - 1]\n }\n \n return date.toLocaleString(\"en\", {\n month: \"short\",\n day: \"numeric\",\n year: \"numeric\",\n timeZone: \"UTC\"\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1796,"value":"date2LongString(new Date(\"2020-01-22\"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1476,"value":"weather_2016_2020_raw = FileAttachment(\"weather_diff_daily_2016_2020@1.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1474,"value":"weather_temp_0 = weather_2016_2020_raw.map(r => ({...r, Month: r.date.slice(0,2), Year: r.date.slice(6,10)}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1472,"value":"weather_temp_1 = d3.rollup(weather_temp_0 , v => d3.mean(v, d => d.aqi_diff), d => d.state, d=> d.Year , d=> d.Month)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1470,"value":"weather_temp_2 = Array.from(weather_temp_1).map(r => ({State: r[0] , value: r[1]}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1486,"value":"pm25_temp_0 = d3.rollup(weather_temp_0 , v => d3.mean(v, d => d.pm25_diff), d => d.state, d=> d.Year , d=> d.Month)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1489,"value":"pm25_temp_1 = Array.from(pm25_temp_0).map(r => ({State: r[0] , value: r[1]}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1494,"value":"aqi_temp_0 = Array.from(New_W(weather_temp_2)).map(r => ({January: r[0] , February: r[1], March: r[2], April: r[3] , May: r[4], June: r[5] , July: r[6] , August: r[7], September: r[8] , October: r[9] , November: r[10], }))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1497,"value":"pm25_temp_2= Array.from(New_W(pm25_temp_1)).map(r => ({January: r[0] , February: r[1], March: r[2], April: r[3] , May: r[4], June: r[5] , July: r[6] , August: r[7], September: r[8] , October: r[9] , November: r[10], }))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1468,"value":"function New_W(){\n var sss=[];\n var sss2=[];\n for (let i=0;i sss.push(value.toFixed(2)));\n //ww3.get('2020').forEach((value, key) => sss.push(value - ww3.get('2019').get(key)));\n sss2.push(sss);\n sss =[];\n }\n return sss2;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1462,"value":"weather_temp_3 = Array.from(d3.zip(weather_temp_2.map(r => r.State),aqi_temp_0,pm25_temp_2)).map(r => ({State: r[0] , AQI: r[1], PMI2_5: r[2]})).sort((a,b) => d3.ascending(a.State, b.State))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1460,"value":"weather_data_monthly = weatherDataStructureGeoMap(weather_temp_3).sort((a,b) => d3.ascending(a.State, b.State)) ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1513,"value":"id_states = [1,2,4,5,6,8,9,10,11,12,13,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,72,44,45,46,47,48,49,50,78,51,53,54,55,56]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1511,"value":"$3c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1175,"value":"date2string(null)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":694,"value":"md `## Imports`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require(\"d3@5\", \"d3-array@2\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":597,"value":"d3Legend = require('d3-svg-legend')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":592,"value":"import {swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":960,"value":"import {menu, slider} from '@jheer/dom-utilities'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1444,"value":"import {vl} from '@vega/vega-lite-api'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1448,"value":"import {slider, button, select, text, radio, checkbox, number} from '@jashkenas/inputs'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1450,"value":"usTopojson = d3.json(\"https://d3js.org/us-10m.v1.json\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1452,"value":"datasets = require('vega-datasets@1')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1458,"value":"usa = datasets['us-10m.json']()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1278,"value":"md `## Styles`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":594,"value":"swatches({\n color: d3.scaleOrdinal([\"Bike\", \"Run\", \"Walk\"], [\"#8242a8\", \"#ff1493\", \"#FFCE1E\"])\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":577,"value":"styles = html`\n `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3d","stdlib":"1"}} 31:"$30:body"