2b:null 2c:["$","title",null,{"children":"Covid19 | NIU ReDAV | Observable"}] 31:T48f,function convertToHierarchical(data) { let world = { name: "🌍", children: [] }; // Create a mapping from region to countries let regionMap = {}; for(let entry of data) { if (!regionMap[entry.WHO_region]) { regionMap[entry.WHO_region] = {}; } if (!regionMap[entry.WHO_region][entry.Country]) { regionMap[entry.WHO_region][entry.Country] = { name: entry.Country, Sum_of_New_cases: parseInt(entry.New_cases), Sum_of_New_deaths: parseInt(entry.New_deaths) }; } else { regionMap[entry.WHO_region][entry.Country].Sum_of_New_cases += parseInt(entry.New_cases); regionMap[entry.WHO_region][entry.Country].Sum_of_New_deaths += parseInt(entry.New_deaths); } } for(let region in regionMap) { let children = []; for(let country in regionMap[region]) { children.push(regionMap[region][country]); } world.children.push({ name: region, children: children }); } return world; }32:Td55,function WordCloud(data) { const margin = {top: 10, right: 10, bottom: 10, left: 10}; const width = 1200 - margin.left - margin.right; const height = 800 - margin.top - margin.bottom; const sizeScale = d3.scaleLog() .domain([1, d3.max(data, d => d.size)]) .range([10, 50]); const svg = d3.create("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); const layout = d3Cloud() .size([width, height]) .words(data.map(d => ({text: d.productName, size: sizeScale(d.size), originalSize: d.size, vaccine: d.vaccine, company: d.company}))) .padding(3) .rotate(() => 0) .fontSize(d => d.size) .on("end", draw); layout.start(); const statusBarHeight = 60; const statusBar = svg.append("rect") .attr("x", 0) .attr("y", height - statusBarHeight) .attr("width", width) .attr("height", statusBarHeight) .style("fill", "khaki") .style("visibility", "hidden"); const statusBarText = svg.append("text") .attr("x", 10) .attr("y", height - (statusBarHeight / 2)) .style("font-size", "18px") .attr("font-weight", "bold") .attr("dominant-baseline", "middle") .style("fill", "gray"); function draw(words) { const wordGroups = svg.append("g") .attr("transform", "translate(" + layout.size()[0] / 2 + "," + layout.size()[1] / 2 + ")") .selectAll("text") .data(words) .enter().append("text") .style("font-size", d => `${d.size}px`) .style("fill", "#69b3a2") .style("cursor", "pointer") .attr("text-anchor", "middle") .style("font-family", "Impact") .attr("transform", d => "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")") .text(d => d.text); wordGroups.on("mouseover", function(event, d) { d3.select(this).raise() .style("fill", "coral") .style("font-size", `${d.size * 1.2}px`); wordGroups.filter(entry => entry.text !== d.text) .style("fill", "lightgrey"); statusBarText.text(`Country Count: ${d.originalSize} | Vaccine Name: ${d.vaccine} | Company Name: ${d.company}`); statusBar.style("visibility", "visible"); }) .on("mouseout", function() { wordGroups.style("fill", "#69b3a2") .style("font-size", d => `${d.size}px`); statusBarText.text(""); statusBar.style("visibility", "hidden"); }); } return svg.node().parentNode; } 33:T154e,tree = { const width = 1000; const marginTop = 10; const marginRight = 10; const marginBottom = 10; const marginLeft = 40; const root = d3.hierarchy(World); const dx = 10; const dy = (width - marginRight - marginLeft) / (1 + root.height); const tree = d3.tree().nodeSize([dx, dy]); const diagonal = d3.linkHorizontal().x(d => d.y).y(d => d.x); const svg = d3.create("svg") .attr("width", width) .attr("height", dx) .attr("viewBox", [-marginLeft, -marginTop, width, dx]) .attr("style", "max-width: 100%; height: auto; font: 10px sans-serif; user-select: none;"); const gLink = svg.append("g") .attr("fill", "none") .attr("stroke", "#555") .attr("stroke-opacity", 0.4) .attr("stroke-width", 1.5); const gNode = svg.append("g") .attr("cursor", "pointer") .attr("pointer-events", "all"); function getAncestors(node) { var path = []; var current = node; while (current.parent) { path.unshift(current); current = current.parent; } path.unshift(current); return path; } function handleMouseOver(event, d) { const path = getAncestors(d); const nodeIds = path.map(ancestor => ancestor.id); const highlightedNodes = gNode.selectAll('g') .filter(node => nodeIds.includes(node.id)); highlightedNodes.select('circle') .attr('fill', 'orange'); highlightedNodes.select('text') .attr("font-weight", "bold") .attr("fill", "light blue"); gLink.selectAll('path') .filter(link => nodeIds.includes(link.target.id)) .attr('stroke', 'red') .attr('stroke-width', 3); // Tooltip content let tooltipContent = `${d.data.name}`; if (d.data.Sum_of_New_cases !== undefined || d.data.Sum_of_New_deaths !== undefined) { tooltipContent += `
Total Cases: ${d.data.Sum_of_New_cases || 'N/A'}`; tooltipContent += `
Total Deaths: ${d.data.Sum_of_New_deaths || 'N/A'}`; } tooltip.html(tooltipContent) .style("left", `${event.pageX + 10}px`) .style("top", `${event.pageY + 10}px`) .style("visibility", "visible"); } function handleMouseOut(event, d) { gNode.selectAll('g') .select('circle') .attr('fill', d => d._children ? "#555" : "#999"); gNode.selectAll('g') .select('text') .attr("font-weight", "normal") .attr("fill", "lightblue"); gLink.selectAll('path') .attr('stroke', '#555') .attr('stroke-width', 1.5); tooltip.style("visibility", "hidden"); } function update(event, source) { const duration = event?.altKey ? 2500 : 250; const nodes = root.descendants().reverse(); const links = root.links(); tree(root); let left = root; let right = root; root.eachBefore(node => { if (node.x < left.x) left = node; if (node.x > right.x) right = node; }); const height = right.x - left.x + marginTop + marginBottom; const transition = svg.transition() .duration(duration) .attr("height", height) .attr("viewBox", [-marginLeft, left.x - marginTop, width, height]) .tween("resize", window.ResizeObserver ? null : () => () => svg.dispatch("toggle")); const node = gNode.selectAll("g") .data(nodes, d => d.id); const nodeEnter = node.enter().append("g") .attr("transform", d => `translate(${source.y0},${source.x0})`) .attr("fill-opacity", 0) .attr("stroke-opacity", 0) .on("click", (event, d) => { d.children = d.children ? null : d._children; update(event, d); }) .on('mouseover', handleMouseOver) .on('mouseout', handleMouseOut); nodeEnter.append("circle") .attr("r", 2.5) .attr("fill", d => d._children ? "#555" : "#999") .attr("stroke-width", 10); nodeEnter.append("text") .attr("dy", "0.31em") .attr("x", d => d._children ? -6 : 6) .attr("text-anchor", d => d._children ? "end" : "start") .text(d => d.data.name) .clone(true).lower() .attr("stroke-linejoin", "round") .attr("stroke-width", 3) .attr("stroke", "white"); const nodeUpdate = node.merge(nodeEnter).transition(transition) .attr("transform", d => `translate(${d.y},${d.x})`) .attr("fill-opacity", 1) .attr("stroke-opacity", 1); const nodeExit = node.exit().transition(transition).remove() .attr("transform", d => `translate(${source.y},${source.x})`) .attr("fill-opacity", 0) .attr("stroke-opacity", 0); const link = gLink.selectAll("path") .data(links, d => d.target.id); const linkEnter = link.enter().append("path") .attr("d", d => { const o = {x: source.x0, y: source.y0}; return diagonal({source: o, target: o}); }); link.merge(linkEnter).transition(transition) .attr("d", diagonal); link.exit().transition(transition).remove() .attr("d", d => { const o = {x: source.x, y: source.y}; return diagonal({source: o, target: o}); }); root.eachBefore(d => { d.x0 = d.x; d.y0 = d.y; }); } root.x0 = dy / 2; root.y0 = 0; root.descendants().forEach((d, i) => { d.id = i; d._children = d.children; if (d.depth && d.data.name.length !== 7) d.children = null; }); update(null, root); return svg.node(); }34:T7f2,WorldMap= { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); const tooltip = d3.select("body").append("div") .attr("class", "tooltip") .style("opacity", 0) .style("position", "absolute") .style("text-align", "center") .style("padding", "8px") .style("background", "yellow") .style("border", "1px solid #000") .style("border-radius", "4px") .style("pointer-events", "none"); const colorScale = d3.scaleSequential(d3.interpolateBlues) .domain([0, d3.max(transformedVData, d => d.TOTAL_VACCINATIONS_PER100)]); const projection = d3.geoMercator().fitSize([width, height], world); const path = d3.geoPath().projection(projection); svg.selectAll("path") .data(world.features) .enter() .append("path") .attr("d", path) .attr("fill", d => { const country = transformedVData.find(c => c.id === d.id); return country ? colorScale(country.TOTAL_VACCINATIONS_PER100) : "#ccc"; }) .attr("stroke", "#000") .attr("stroke-width", 0.5) .on("mouseover", (event, d) => { d3.select(event.currentTarget).style("fill", "#f77"); const country = transformedVData.find(c => c.id === d.id); tooltip.style("opacity", .9) .html(country ? country.COUNTRY + ": " + country.TOTAL_VACCINATIONS_PER100 : "No Data") .style("left", (event.pageX) + "px") .style("top", (event.pageY - 28) + "px"); }) .on("mouseout", (event, d) => { tooltip.style("opacity", 0); const country = transformedVData.find(c => c.id === d.id); d3.select(event.currentTarget).style("fill", country ? colorScale(country.TOTAL_VACCINATIONS_PER100) : "#ccc"); }); return svg.node(); } 35:[{"id":"20934b24fb8066bb92730bbe91e4a1f5205d25c92d749a2e59be01637f825ac3e601e88df0ccddb49b06fb9c45f84a90b540b881f2a085709f9446aa1f63e527","href":"https://static.observableusercontent.com/files/20934b24fb8066bb92730bbe91e4a1f5205d25c92d749a2e59be01637f825ac3e601e88df0ccddb49b06fb9c45f84a90b540b881f2a085709f9446aa1f63e527","name":"vaccination-data.csv","type":"text/csv","lastModified":1697153287721.134,"size":25963},{"id":"91fdb9f89af469ff7e621f90699c633d71f2129891ce4841d0a24fe6531fbc18aa1150f9e87432bb01627bbb678bde212d7ca98f617a0f9f253ceeef51cf72fe","href":"https://static.observableusercontent.com/files/91fdb9f89af469ff7e621f90699c633d71f2129891ce4841d0a24fe6531fbc18aa1150f9e87432bb01627bbb678bde212d7ca98f617a0f9f253ceeef51cf72fe","name":"gistfile1.js","type":"application/javascript","lastModified":1697225189489.745,"size":144769},{"id":"9cb4bbae2882573e8678217708eac3e602824c9e3f179b90010dfe0404a22fc1a8f823fec5e1d5568858d6672464fdc43fae7011d3406c36729406448a85f917","href":"https://static.observableusercontent.com/files/9cb4bbae2882573e8678217708eac3e602824c9e3f179b90010dfe0404a22fc1a8f823fec5e1d5568858d6672464fdc43fae7011d3406c36729406448a85f917","name":"vaccination-metadata.csv","type":"text/csv","lastModified":1697260245901.6,"size":95368},{"id":"97bd6f12764db31ca6e0911fce6127bc2fec065b4a4c95909f928b6f260fcfb027ecf7e651b1fc59945c69e1f265b407b8be6d696c10af7ae8041dbbe8952b1e","href":"https://static.observableusercontent.com/files/97bd6f12764db31ca6e0911fce6127bc2fec065b4a4c95909f928b6f260fcfb027ecf7e651b1fc59945c69e1f265b407b8be6d696c10af7ae8041dbbe8952b1e","name":"WHO-COVID-19-global-data.csv","type":"text/csv","lastModified":1697153201450.164,"size":14794923}] 2f:{"id":"f7a34d187f61ce5f","slug":null,"title":"Covid19","thumbnail":"6fe2d663836b56d61253e8a23a81f8e409c2620ef139b6068d150ec0cf9b8016","access_level":"public","create_time":"$D2023-10-12T05:27:06.925Z","update_time":"$D2024-03-02T22:51:44.300Z","view_time":null,"first_public_time":"$D2023-12-28T03:28:05.520Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"6be90def0eaad608","login":"niu-redav","name":"NIU ReDAV","avatar_url":"https://avatars-next.observableusercontent.com/4f6116f4cf961cd7132568b8dbe99bfaa543dbb9ef5eca3152ed1f54f12d0e0b","tier":"pro_2024"},"version":839,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b2e5eec88de8c511","login":"vikramaditya","name":"VIKRAMADITYA REDDY","avatar_url":"https://avatars-next.observableusercontent.com/f986dcad7f7e030f565ac4508e1a5f20d530b42ccf8e1e78a4fc75ea6c4bfc45","tier":null}],"members":[{"type":"individual","id":"0290d485d6927639","login":"dakoop","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3db1688f30a1b05a38931e472a94cfdfe52090e6ecdd5fe4b5f9ed17708aebe4","tier":null,"role":"editor"},{"type":"team","id":"6be90def0eaad608","login":"niu-redav","name":"NIU ReDAV","avatar_url":"https://avatars-next.observableusercontent.com/4f6116f4cf961cd7132568b8dbe99bfaa543dbb9ef5eca3152ed1f54f12d0e0b","tier":"pro_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Covid19","cells":[{"id":0,"value":"

Covid19

\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"

VIKRAMADITYA REDDY VARKALA

Z1973679

Data Visualization(CSCI 627)

EXTRA WORK

\n\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":55,"value":"whoCovid19GlobalData = await FileAttachment(\"WHO-COVID-19-global-data.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"whoCovid19GlobalData","database":"$undefined"},{"id":58,"value":"vaccinationData = await FileAttachment(\"vaccination-data.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"vaccinationData","database":"$undefined"},{"id":398,"value":"vaccinationMetadata = await FileAttachment(\"vaccination-metadata.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"vaccinationMetadata","database":"$undefined"},{"id":59,"value":"data1 = FileAttachment(\"WHO-COVID-19-global-data.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"data2 = FileAttachment(\"vaccination-data.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":399,"value":"data3 = FileAttachment(\"vaccination-metadata.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"gistfile1 = FileAttachment(\"gistfile1.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"world = gistfile1.text().then(text => {\n const content = text.replace(\"var countries_data = \", \"\").trim();\n return JSON.parse(content);\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"value":"height = 800","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":331,"value":"mData = data3.csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"gData = data1.csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"vData = data2.csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"product = {\n const counts = {};\n const details = {};\n\n mData.forEach(row => {\n if (row.PRODUCT_NAME) {\n const key = row.PRODUCT_NAME;\n counts[key] = (counts[key] || 0) + 1;\n details[key] = {\n vaccine: row.VACCINE_NAME,\n company: row.COMPANY_NAME\n };\n }\n });\n\n return Object.entries(counts).map(([productName, size]) => ({\n productName,\n size,\n vaccine: details[productName].vaccine,\n company: details[productName].company\n }));\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"countryNameToId = \n{\n const mapping = {};\n for (const feature of world.features) \n {\n mapping[feature.properties.name] = feature.id;\n }\n return mapping;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"transformedVData = \n{\n const newData = [];\n for (const item of vData) \n {\n const countryName = item.COUNTRY;\n if (countryNameToId[countryName]) \n {\n item.id = countryNameToId[countryName];\n delete item.ISO3;\n }\n newData.push(item);\n }\n return newData;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":776,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":780,"value":"\nWorld = convertToHierarchical(gData)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":784,"value":"tooltip = {\n const tooltip = d3.select(\"body\")\n .append(\"div\")\n .attr(\"class\", \"tooltip\")\n .style(\"position\", \"absolute\")\n .style(\"visibility\", \"hidden\")\n .style(\"background-color\", \"khaki\")\n .style(\"padding\", \"5px\")\n .style(\"border\", \"1px solid gray\")\n .style(\"border-radius\", \"5px\")\n .style(\"box-shadow\", \"0px 0px 6px rgba(0,0,0,0.7)\")\n .style(\"pointer-events\", \"none\"); \n\n \n return tooltip;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":788,"value":"colorScale = d3.scaleOrdinal(d3.schemeTableau10); \n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":792,"value":"d3Cloud = require(\"d3-cloud@1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":795,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"value":"# Plot 1","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":433,"value":"WordCloud(product)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":763,"value":"**Hover Over Vaccine names to view more details about it**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":213,"value":"# Plot 2","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":732,"value":"**Click on the regions/earth to expand the trees Hover over countries names to view Covid Cases and Deaths**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":75,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":238,"value":"# Plot 3","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":252,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":770,"value":"**Hovering over map gives vaccination per 100 Data**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 30:"$2f:body"