2c:null 2d:["$","title",null,{"children":"CAP 5937 Assignment 03 Second Method - Chathura Jayalath [UCFID: 3948890] | Chathura Jayalath | Observable"}] 32:T83c,{ const [svgElement, svg] = getSVG(); svg.append("rect").attr("width", W).attr("height", H).attr("x",0).attr("y",0).style("fill","black").attr("opacity",0.1) const stateChart = svg .selectAll("g") .data(filtered_data) .join("g") .attr("transform",(d,i) => `translate(${cellWidth * (i % numberOfColumns)},${cellHeight * Math.floor(i / numberOfColumns)})`) //stateChart.each( (d,i) => stateChart .append("rect") .style("fill", (d,i) => d3.schemeCategory10[i % 10]) .attr("opacity",0.3) .attr("width",cellWidth) .attr("height",cellHeight) //); /* stateChart .append("rect") .style("fill",(d,i) => d3.schemeCategory10[i % 10]) .attr("opacity",0.3) .attr("width",cellWidth) .attr("height",cellHeight) // title stateChart .append("text") .text( (d,i) => d.state ) .attr("opacity",0.3) .attr("transform",`translate(${innerW/2},${15})`) // inner chart area const innerCharts = stateChart .append("g") .attr("transform", (d,i) => `translate(${innerMargin.left},${innerMargin.top})`) // yaxis // d3.axisLeft(scale)() innerCharts.append("g").attr("transform",d => `translate(0,0)`) //innerCharts.selectAll("g").each( (nd,i) => (i == 0)? //d3.axisLeft( d3.scaleLinear().domain([0,100]).range([innerH, 0]).nice() )(innerCharts.append("g")) : "" ); //innerCharts.append("g").attr("transform",d => `translate(0,0)`).call( d3.axisLeft( // d3.scaleLinear().domain([0,100]).range([innerH, 0]).nice() //)) // xaxis innerCharts .append("g").attr("transform",`translate(0,${innerH})`) .call(d3.axisBottom(xScale).ticks(2, d3.timeFormat("%Y-%m-%d")) ) .selectAll("text") .attr("x", -5) innerCharts .append("rect") .style("fill",(d,i) => d3.schemeCategory10[i % 10]) .attr("opacity",0.3) .attr("width",innerW) .attr("height",innerH) innerCharts .append("g").append("text").text( d => d3.max(d.series, e => e.death) ) */ return svgElement; }33:T4ba,{ const svgElement = DOM.svg(dimensions.width, dimensions.height); const svg = d3.select(svgElement); const W = dimensions.width - margin.left - margin.right; const H = dimensions.height - margin.top - margin.bottom; const yDomain = [0, d3.max(randomData, d => d[1])]; const yScale = d3.scaleLinear().domain(yDomain).range([H,0]).nice(); const xScale = d3.scaleBand().domain(randomData.map(d => d[0])).range([0,W]).padding(0.2); const yAxis = svg.append("g") .attr("transform",`translate(${margin.left},${H + margin.top})`) .call(d3.axisBottom(xScale)) const xAxis = svg.append("g") .attr("transform",`translate(${margin.left},${margin.top})`) .call(d3.axisLeft(yScale)) svg.append("g").attr("transform",`translate(${margin.left},${margin.top})`) .selectAll("rect") .data(randomData) .join("rect") .style("fill","steelblue") .style("stroke", "none") .attr("x", d => xScale(d[0])) .attr("width", d => xScale.bandwidth()) .attr("height", d => H - yScale(d[1])) .attr("y", d => yScale(d[1])) return svgElement; }34:[{"id":"f2266eca3a4782249e3fab64536c0be62c3faf73c51393ec626662c39a1dfb2fcfc823b7a5c14dd5c59d93d59e341b093fcdfdd80b430ad3c4a72a08c056c6fb","href":"https://static.observableusercontent.com/files/f2266eca3a4782249e3fab64536c0be62c3faf73c51393ec626662c39a1dfb2fcfc823b7a5c14dd5c59d93d59e341b093fcdfdd80b430ad3c4a72a08c056c6fb","name":"all-states-history.csv","type":"text/csv","lastModified":1612310687160.081,"size":2526553}] 30:{"id":"35af8c5c9fd9f043","slug":null,"title":"CAP 5937 Assignment 03 Second Method - Chathura Jayalath [UCFID: 3948890]","thumbnail":"ad92d399a90ac92726f716809fc4eedfb6dba9319f550fba248836e73268220b","access_level":"public","create_time":"$D2021-02-03T00:04:47.160Z","update_time":"$D2021-02-04T23:02:14.902Z","view_time":null,"first_public_time":"$D2022-12-25T06:04:07.665Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"faa67bfd1359f951","login":"deamonpog","name":"Chathura Jayalath","avatar_url":"https://avatars-next.observableusercontent.com/1bc13a0724d43e94c26de301357a2897d22e5c4e01e7f160ea8fba232ef861f1","tier":"starter_2024"},"version":1848,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5fe81dea2f61079a","login":"deamonpog","name":"Chathura Jayalath","avatar_url":"https://avatars-next.observableusercontent.com/1bc13a0724d43e94c26de301357a2897d22e5c4e01e7f160ea8fba232ef861f1","tier":null}],"members":[{"type":"individual","id":"5fe81dea2f61079a","login":"deamonpog","name":"Chathura Jayalath","avatar_url":"https://avatars-next.observableusercontent.com/1bc13a0724d43e94c26de301357a2897d22e5c4e01e7f160ea8fba232ef861f1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"CAP 5937 Assignment 03 Second Method - Chathura Jayalath [UCFID: 3948890]","cells":[{"id":0,"value":"md`# CAP 5937 Assignment 03 Second Method - Chathura Jayalath [UCFID: 3948890] `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"viewof dimensions = columns({\n width : slider({\n title: \"Width\",\n min: 10,\n max: 400,\n step: 10,\n value: 180\n }),\n height : slider({\n title: \"Height\",\n min: 10,\n max: 400,\n step: 10,\n value: 160\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"viewof margin = columns({\n left : slider({\n title: \"Left Margin\",\n min: 0,\n max: 200,\n step: 10,\n value: 10,\n sliderStyle: {\n width: '150px'\n }\n }),\n right : slider({\n title: \"Right Margin\",\n min: 0,\n max: 200,\n step: 10,\n value: 10,\n sliderStyle: {\n width: '150px'\n }\n }),\n top : slider({\n title: \"Top Margin\",\n min: 0,\n max: 200,\n step: 10,\n value: 10,\n sliderStyle: {\n width: '150px'\n }\n }),\n bottom : slider({\n title: \"Bottom Margin\",\n min: 0,\n max: 200,\n step: 10,\n value: 10,\n sliderStyle: {\n width: '150px'\n }\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1531,"value":"viewof innerMargin = columns({\n left : slider({\n title: \"Left Inner Margin\",\n min: 0,\n max: dimensions.width/2,\n step: 1,\n value: 30,\n sliderStyle: {\n width: '150px'\n }\n }),\n right : slider({\n title: \"Right Inner Margin\",\n min: 0,\n max: dimensions.width/2,\n step: 1,\n value: 10,\n sliderStyle: {\n width: '150px'\n }\n }),\n top : slider({\n title: \"Top Inner Margin\",\n min: 0,\n max: dimensions.height/2,\n step: 1,\n value: 30,\n sliderStyle: {\n width: '150px'\n }\n }),\n bottom : slider({\n title: \"Bottom Inner Margin\",\n min: 0,\n max: dimensions.height/2,\n step: 1,\n value: 20,\n sliderStyle: {\n width: '150px'\n }\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1090,"value":"md`## Chart Matrix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1842,"value":"distribution = html`\n\n \n ${\ntopPredictions.map((d) => `\n \n \n \n \n `)\n }\n \n

Guess	Probability
${d.class}	${(d.prob * 100).toFixed(2)}%

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1387,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1717,"value":"xDomain = [ d3.min(filtered_data, d => d3.min(d.series, e => e.date) ), d3.max(filtered_data, d => d3.max(d.series, e => e.date) ) ]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1738,"value":"xScale = d3.scaleTime().domain(xDomain).range([0,innerW]).nice()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1741,"value":"yScale = filtered_data.map( d => d3.scaleLinear().domain([0,100]).range([innerH, 0]).nice() )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1545,"value":"numberOfColumns = 5","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1460,"value":"cellHeight = dimensions.height","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1461,"value":"cellWidth = dimensions.width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1661,"value":"innerW = cellWidth - innerMargin.left - innerMargin.right","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1663,"value":"innerH = cellHeight - innerMargin.top - innerMargin.bottom","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1484,"value":"H = cellHeight * Math.ceil(allStates.length / numberOfColumns);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1488,"value":"W = cellWidth * numberOfColumns;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1489,"value":"svgWidth = W + margin.left + margin.right;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1494,"value":"svgHeight = H + margin.top + margin.bottom;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1007,"value":"function getSVG(useBorder) {\n const svgElement = DOM.svg(svgWidth, svgHeight);\n const svg = d3.select(svgElement);\n \n const chart = svg.append(\"g\").attr(\"transform\",`translate(${margin.left},${margin.top})`);\n \n svg.append(\"rect\").style(\"fill\", \"black\").attr(\"opacity\", 0.1).attr(\"width\", svgWidth).attr(\"height\", svgHeight)\n \n if(useBorder){ svg.append(\"rect\").attr(\"width\",svgWidth).attr(\"height\",svgHeight).attr(\"fill\",\"none\").attr(\"stroke\",\"black\");\n }\n \n return [svgElement, chart];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":854,"value":"md`## Vertical Bar Chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":708,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1568,"value":"filtered_data = allStates.map(e => ({\n state: e, \n series: us_covid_data\n .filter(d => d.state == e)\n .map(d => ({date: d.date, death: d.death, positive: d.positive, negative: d.negative, tests: d.totalTestResults}) )\n .sort( (a,b) => (a.date < b.date)? -1 : 1 )\n }) )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1410,"value":"allStates = [...new Set(us_covid_data.map(d => d.state))]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":828,"value":"us_covid_data = (await FileAttachment(\"all-states-history.csv\").csv({ typed: true}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":657,"value":"randomData = d3\n .range(10)\n .map(i => [String.fromCharCode(65 + i), Math.floor(Math.random() * 1000)])\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`## Libraries`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"import {select,checkbox} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"import {slider} from '@bartok32/diy-inputs'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":786,"value":"drawTweeterIcon = (g, scale) => {\n // Source: https://icomoon.io/app/#/select\n const d =\n \"M512 113.2c-18.8 8.4-39.1 14-60.3 16.5 21.7-13 38.3-33.6 46.2-58.1-20.3 12-42.8 20.8-66.7 25.5-19.2-20.4-46.5-33.1-76.7-33.1-58 0-105 47-105 105 0 8.2 0.9 16.2 2.7 23.9-87.3-4.4-164.7-46.2-216.5-109.8-9 15.5-14.2 33.6-14.2 52.8 0 36.4 18.5 68.6 46.7 87.4-17.2-0.5-33.4-5.3-47.6-13.1 0 0.4 0 0.9 0 1.3 0 50.9 36.2 93.4 84.3 103-8.8 2.4-18.1 3.7-27.7 3.7-6.8 0-13.3-0.7-19.8-1.9 13.4 41.7 52.2 72.1 98.1 73-36 28.2-81.2 45-130.5 45-8.5 0-16.8-0.5-25.1-1.5 46.6 29.9 101.8 47.2 161.1 47.2 193.2 0 298.9-160.1 298.9-298.9 0-4.6-0.1-9.1-0.3-13.6 20.5-14.7 38.3-33.2 52.4-54.3z\";\n g.append(\"g\")\n .attr(\"transform\", `scale(${scale / 512})`)\n .append(\"path\")\n .attr(\"d\", d);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"columns = (args) => {\n const form = html``\n form.value = {}\n\n let cols = 0\n for (const key in args) {\n form.appendChild(args[key])\n cols++\n }\n \n form.style = `display: grid; grid-gap: 10px 15px; grid-template-columns: repeat(${cols}, auto); grid-auto-flow: row;`\n \n form.oninput = () => {\n form.value = Object.keys(args).reduce((result, key) => {\n result[key] = args[key].value\n return result\n }, Array.isArray(args) ? [] : {})\n }\n form.oninput()\n \n return form\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 31:"$30:body"