2b:null 2c:["$","title",null,{"children":"Assignment -2 | Incredible vis | Observable"}] 31:Tc0f,{ const svg = htl.html``; const maxYear = newsPaperCirculation .map((d) => d.Year) .reduce((acc, curryear) => { if (curryear > acc) { acc = curryear; } return acc; }, -Infinity); const minYear = newsPaperCirculation .map((d) => d.Year) .reduce((acc, curryear) => { if (curryear < acc) { acc = curryear; } return acc; }, Infinity); let prevYear = minYear; // bars newsPaperCirculation.forEach((record, i) => { if ( record.Year - prevYear <= 1) { console.log(record.year) addEltToSvg( "rect", { x: 35, y: i * 7.5 + 2, fill: "#1abc9c", width: getBarWidth(record.Average), height: 5, stroke: "black" }, svg ); prevYear = record.Year } else { console.log(record.Year) addEltToSvg( "rect", { x: 35, y: i * 7.5 + 2, fill: "#1abc9c", width: 0, height: 5, stroke: "black" }, svg ); prevYear = record.Year } }); prevYear = minYear // labels newsPaperCirculation.forEach((record, i) => { if (record.Year - prevYear > 1) { console.log("here", (prevYear + (record.Year - prevYear)), record.Year - prevYear ) const yearLabel = document.createElementNS( "http://www.w3.org/2000/svg", "text" ); yearLabel.textContent = (prevYear + (record.Year - prevYear -1)); yearLabel.setAttribute("x", "5"); yearLabel.setAttribute("y", `${i * 7.5 + 9}`); yearLabel.setAttribute("fill", "black"); yearLabel.setAttribute("font-size", "12px"); svg.appendChild(yearLabel); } prevYear = record.Year if ( record.Year % 10 == 0 || record.Year == maxYear || record.Year == minYear ) { // console.log(record.Year); const yearLabel = document.createElementNS( "http://www.w3.org/2000/svg", "text" ); yearLabel.textContent = record.Year; yearLabel.setAttribute("x", "5"); yearLabel.setAttribute("y", `${i * 7.5 + 9}`); yearLabel.setAttribute("fill", "black"); yearLabel.setAttribute("font-size", "12px"); svg.appendChild(yearLabel); } }); // min and max labels const minlabel = document.createElementNS( "http://www.w3.org/2000/svg", "text" ); minlabel.textContent = "0"; minlabel.setAttribute("x", 35); minlabel.setAttribute("y", `${newsPaperCirculation.length * 7.5 + 15}`); minlabel.setAttribute("font-size", "17px"); svg.appendChild(minlabel); const maxLabel = document.createElementNS( "http://www.w3.org/2000/svg", "text" ); maxLabel.textContent = `${String(maxAvgValue).slice(0, 2)} mil`; maxLabel.setAttribute("x", getBarWidth(maxAvgValue)); maxLabel.setAttribute("y", `${newsPaperCirculation.length * 7.5 + 15}`); maxLabel.setAttribute("font-size", "17px"); svg.appendChild(maxLabel); return svg; }32:Tcfd,{ const svg = htl.html``; const maxYear = newsPaperCirculation .map((d) => d.Year) .reduce((acc, curryear) => { if (curryear > acc) { acc = curryear; } return acc; }, -Infinity); const minYear = newsPaperCirculation .map((d) => d.Year) .reduce((acc, curryear) => { if (curryear < acc) { acc = curryear; } return acc; }, Infinity); let prevYear1 = minYear // bars newsPaperCirculation.forEach((record, i) => { console.log(decade); const decadeStart = Math.floor(record.Year / 10) * 10; const decadeEnd = decadeStart + 9; const barColor = decadeStart <= parseInt(decade) && parseInt(decade) <= decadeEnd ? "black" : "#1abc9c"; if ( record.Year - prevYear1 <= 1) { addEltToSvg( "rect", { x: i * 7.5 + 30, y: 300 - getBarWidth(record.Average) - 35, fill: barColor, width: 5, height: getBarWidth(record.Average), stroke: "black" }, svg ); prevYear1 = record.Year } else { addEltToSvg( "rect", { x: i * 7.5 + 30, y: 300 - getBarWidth(record.Average) - 35, fill: barColor, width: 5, height: 0, stroke: "black" }, svg ); } prevYear1 = record.Year }); // labels prevYear1 = minYear newsPaperCirculation.forEach((record, i) => { if (record.Year - prevYear1 > 1) { console.log("here", (prevYear1 + (record.Year - prevYear1)), record.Year - prevYear1) const yearLabel = document.createElementNS( "http://www.w3.org/2000/svg", "text" ); yearLabel.textContent = (prevYear1 + (record.Year - prevYear1 -1)); yearLabel.setAttribute("x", `${i * 7.5 + 32}`); yearLabel.setAttribute("y", `${300 - 32}`); yearLabel.setAttribute("fill", "black"); yearLabel.setAttribute("font-size", "12px"); yearLabel.setAttribute("writing-mode", "tb"); svg.appendChild(yearLabel); } prevYear1 = record.Year if ( record.Year % 10 == 0 || record.Year == maxYear || record.Year == minYear ) { const yearLabel = document.createElementNS( "http://www.w3.org/2000/svg", "text" ); yearLabel.textContent = record.Year; yearLabel.setAttribute("x", `${i * 7.5 + 32}`); yearLabel.setAttribute("y", `${300 - 32}`); yearLabel.setAttribute("fill", "black"); yearLabel.setAttribute("font-size", "12px"); yearLabel.setAttribute("writing-mode", "tb"); svg.appendChild(yearLabel); } }); const minlabel = document.createElementNS( "http://www.w3.org/2000/svg", "text" ); minlabel.textContent = "0"; minlabel.setAttribute("x", 5); minlabel.setAttribute("y", `${300 - 32}`); minlabel.setAttribute("font-size", "15px"); svg.appendChild(minlabel); const maxLabel = document.createElementNS( "http://www.w3.org/2000/svg", "text" ); maxLabel.textContent = `${String(maxAvgValue).slice(0, 2)} mil`; maxLabel.setAttribute("x", 5); maxLabel.setAttribute("y", 300 - getBarWidth(maxAvgValue) - 32); maxLabel.setAttribute("font-size", "15px"); svg.appendChild(maxLabel); return svg; }33:[] 2f:{"id":"cb230eaa264bd545","slug":null,"title":"Assignment -2","thumbnail":null,"access_level":"public","create_time":"$D2023-12-27T12:25:51.278Z","update_time":"$D2023-12-27T12:25:51.278Z","view_time":null,"first_public_time":"$D2023-12-27T12:25:51.278Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"ce191a16d3a3c1a1","login":"incredible-vis","name":"Incredible vis","avatar_url":"https://avatars-next.observableusercontent.com/d332850ddd10aa75069eeafffc79d79d80bc755bce4cfdbe3b447ea00fac3409","tier":"starter_2024"},"version":500,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"cab7f8ad58f1b89a","login":"bhanusunku","name":"Bhanu Kedhar","avatar_url":"https://avatars-next.observableusercontent.com/17f0f648b747daa910891775bd30306e68fc08b0a4bb76f574e3cd6fdafbfc7e","tier":null}],"members":[{"type":"individual","id":"cab7f8ad58f1b89a","login":"bhanusunku","name":"Bhanu Kedhar","avatar_url":"https://avatars-next.observableusercontent.com/17f0f648b747daa910891775bd30306e68fc08b0a4bb76f574e3cd6fdafbfc7e","tier":null,"role":"editor"},{"type":"team","id":"ce191a16d3a3c1a1","login":"incredible-vis","name":"Incredible vis","avatar_url":"https://avatars-next.observableusercontent.com/d332850ddd10aa75069eeafffc79d79d80bc755bce4cfdbe3b447ea00fac3409","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Assignment -2","cells":[{"id":0,"value":"# Assignment -2","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"htl.html`\n

Sunku Bhanu Kedhaar Nath

Z1974769

Data Visualization(CSCI 627/490)

Assignment 2

\n \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"unParsedNewspaperCirculation = d3.csv(\"https://gist.githubusercontent.com/dakoop/9e67814b6073ebbf6e7f55e31b5781ce/raw/5dad34b939d0d0789570064a75b145cc255f2811/newspaper-circulation.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"filteredNewspaperCirculation = unParsedNewspaperCirculation.filter(record => {\n if (record.Year != 2010 && record.Year != 1940) {\n return record\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"newsPaperCirculation = filteredNewspaperCirculation.map(record => {\n return {\n Year : parseInt(record.Year),\n Weekday : parseInt(record.Weekday),\n Sunday : parseInt(record.Sunday),\n Average : (parseInt(record.Weekday) + parseInt(record.Sunday)) / 2\n }\n}) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"{\n const tab = document.createElement(\"table\")\n tab.id = \"data-table\"\n const tableHeader = document.createElement(\"tr\")\n Object.keys(newsPaperCirculation[0]).forEach(key => {\n const header = document.createElement(\"th\");\n header.textContent = key;\n tableHeader.appendChild(header)\n });\n tab.appendChild(tableHeader)\n newsPaperCirculation.forEach(record => {\n const row = document.createElement(\"tr\");\n\n Object.keys(record).forEach(key => {\n const eachValue = document.createElement(\"td\");\n eachValue.textContent = record[key];\n row.appendChild(eachValue)\n })\n tab.appendChild(row)\n })\n return tab;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"# 2. Horizontal Bar Chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":91,"value":"function addEltToSvg(name, attrs, appendTo)\n{\n var element = document.createElementNS(\"http://www.w3.org/2000/svg\", name);\n if (attrs === undefined) attrs = {};\n for (var key in attrs) {\n element.setAttributeNS(null, key, attrs[key]);\n }\n if (appendTo) {\n appendTo.appendChild(element);\n }\n return element;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"maxAvgValue = newsPaperCirculation.map(d => d.Average).reduce((max,curr) => {\n if (curr > max) {\n max = curr\n }\n return max\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"function getBarWidth(value) {\n if (isNaN(value)) {\n return 0\n }\n return (value/ maxAvgValue) * 250\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"# Interactive Vertical Bar Chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":347,"value":"viewof decade = html``;\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":448,"value":"Selected Decade : ${decade == 1930 ? \"None\" : decade}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":238,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"