2b:null 2c:["$","title",null,{"children":"Mia Tarantola and Allison James | csci0465-f22 | Observable"}] 31:Tf55,{ const width = 700; const height = 500; //margins const margin = {top:10, bottom:107, left:60, right:30}; //could do the total number of cases vs the number of colleges for each state //x axis would be the state, y axis would be the cases/colleges (new data frame) //x scale const x = d3 .scaleBand() .domain(combine_data_df.map(d=>d.state)) //mapping function for categorical data .range([margin.left, width - margin.right]) .padding(0.1); //y scale const y = d3.scaleLinear() .domain([0, d3.max(combine_data_df,d=>d['cases'])]) .range([height - margin.bottom, margin.top]); //initialize svg const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .style("width", `${width}px`) .style("height", `${height}px`) .style("border", "solid 1px darkgrey") .style("font", "12px sans-serif"); //x axis label svg.append("text") .attr("x", width/2) .attr("y", height - (margin.bottom )) .attr("text-anchor", "middle") .style("font-weight", "bold") .text("State"); //y axis label svg.append("text") .attr("text-anchor", "middle") .style("font-weight", "bold") .attr("transform", `translate(${margin.left-5}, ${height/2}) rotate(-90)`) .text("Total Cases") //initialize bars const bars = svg.append("g").attr("fill", "steelblue"); //add the bars to the svg bars .selectAll("rect") .data(combine_data_df) .join("rect") .attr("x", d => x(d['state'])) .attr("y", d => y(d['cases'])) .attr("width", x.bandwidth()) .attr("height", d => y(0) - y(d['cases'])); const labels = svg .append("g") .attr("fill", "white") .attr("text-anchor", "middle"); //x axis const xAxis = svg.append("g") .attr("transform", `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(x)) .selectAll("text") .attr("transform", "rotate(60)") .attr("y", 0) .attr("x", 7) .style("text-anchor", "start"); //y axis const yaxis = svg.append("g") .attr("transform", `translate(${margin.left}, 0)`) .call(d3.axisLeft(y)); //brush const brush = d3.brushX() .extent([ [margin.left, margin.top], [width - margin.right, height - margin.bottom] //changes the extent ]) .on("brush", (evt)=> { //console.log(evt.selection); const brushed = bars.selectAll("rect") //if right side of the bar should be greater than the start of the selection and the left side should be less than the end of the selection, then make the bars light green .attr("fill", "steelblue") .filter(d => { //not the most efficient way to do this but hey it works if (x(d.state) < evt.selection[1] && x(d.state)+x.bandwidth() > evt.selection[0]){ return true;} else{return false;} }) .attr("fill", "lightgreen") const output = brushed.data().map((d) => get_college(d)); console.log("here") console.log(output) const top10_out = top_10(output); console.log(top10_out); d3.select(template).select("#data3").text(" ."); d3.select(template).select("#data3").text(top10_out.join("\r\n")); }) .on("end",(evt) => { if (!evt.sourceEvent) return; svg.call(brush.clear);}) svg.call(brush); const templateStyle = { display: "flex", width: "1120px" }; const template = htl.html`

${svg.node()}

Data

Colleges with the highest number of cases:

`; return template; }32:T451,This dashboard looks at 4 different data sets. The top-most visualization depicts a line graph of the cumulative covid cases in the US over time (for simplification we used the first day of every month), with tooltips = cases. The second visualization looks at the cumulative covid cases at the state level (states data set). The drop down menu allows the user to filter the data by location, with tool tips = cases. The visualization plots the cumulative cases for that location over time. The third visualization depicts the total number of reported covid cases amoung university students and employees, grouped by state. The brush feature allows the user to select a subgroup of state/s and the data panel to the right lists the top 10 colleges with the highest number of cases from that subgrouping. The last visualization depits officer vs inmate deaths/cases (inmate data set). The brush feature allows the user to highlight a subpopulation of data and the corresponding location on the other graph will also be highlighted. The tool tips allow the user to see the name of each data points facility.33:T559,One of the things we wanted to focus on was looking at the number of Covid cases from multiple perspectives/view points. This led us to including multiple datasets in our visualizations. There were some other designs, that included very similar visuals, but different layouts. This final dashboard was very close to what we had imagined; however, we wonder if there were better visualizations/layouts that would make this feel like more of a dashboard rather than a list/stack of interactive visualizations. We are most proud of the college visualization. We had to do a lot of data clean up that summed the number of cases over colleges in the same state. We also had altered the code from one of our tutorials to display the data. Instead of displaying the state covid cases, we took the data the was brushed and found the corresponding colleges and listed only the top 10 colleges with the highest number of cases. This also took a significant amount of data clean up (filtering, sorting, splicing etc.) We had hoped that the tool tips would be a little easier to invoke. For the line graphs it seems that you have to be right on the line invoke them and this can be a little to precise. The brushing for the inmate data also makes the tool tips a little tricky. It would also be helper to program the svgs/visualizations to autosize based on the size of the window.34:T9a4,function createScatterplot(data, xDimension, yDimension) { const width = 800; const height = 550; const margin = { top: 10, bottom: 120, left: 100, right: 10 }; const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .style("width", `${width}px`) .style("font", "16px sans-serif"); const x = d3 .scaleSqrt() .domain(d3.extent(data, (d) => d[xDimension])) .range([margin.left, width - margin.right]); const y = d3 .scaleLinear() .domain(d3.extent(data, (d) => d[yDimension])) .range([height - margin.bottom, margin.top]); const xAxis = svg .append("g") .attr("transform", `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(x)) .selectAll("text") .attr("transform", "rotate(60)") .attr("y", 0) .attr("x", 7) .style("text-anchor", "start") .style("font","16px sans-serif"); const yAxis = svg .append("g") .attr("transform", `translate(${margin.left}, 0)`) .call(d3.axisLeft(y)) .selectAll("text") .style("font","16px sans-serif"); svg .append("text") .attr("x", width / 2) .attr("y", height - margin.bottom / 3) .attr("text-anchor", "middle") .attr("fill", "black") .style("font-weight", "bold") .text(xDimension); svg .append("text") .attr("text-anchor", "middle") .attr("fill", "black") .style("font-weight", "bold") .attr("transform", `translate(25, ${height / 2}) rotate(-90)`) .text(yDimension); const dots = svg.append("g").attr("fill", "steelblue"); dots .selectAll("circle") .data(data) .join("circle") .attr("cx", (d) => x(d[xDimension])) .attr("cy", (d) => y(d[yDimension])) .attr("r", 6) .append("title") .text(d => d.system); const brush = d3.brush() .extent([ [margin.left, margin.top], [width - margin.right, height - margin.bottom] ]) .on("brush", (evt)=> { if (!evt.sourceEvent) return; console.log(evt.selection); const brushed = d3.select("#vis").selectAll("circle") .attr("fill", "steelblue") .filter((d)=> (x(d[xDimension])+4 > evt.selection[0][0] && x(d[xDimension])-4evt.selection[0][1] )) .attr("fill", "lightgreen"); }) .on("end",(evt) => { if (!evt.sourceEvent) return; svg.call(brush.clear);}) svg.call(brush) return svg.node(); }35:T6d8,function createLineplot1(data) { const width = 500; const height = 360; const margin = { top: 10, bottom: 120, left: 140, right: 20 }; const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .style("width", `${width}px`) .style("font", "16px sans-serif"); const x = d3.scaleUtc() .domain(d3.extent(data, d => d.date)) .range([margin.left, width - margin.right]) const y = d3 .scaleLinear() .domain(d3.extent(data, (d) => d["cases"])) .range([height - margin.bottom, margin.top]); const xAxis = svg .append("g") .attr("transform", `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(x)) .selectAll("text") .attr("transform", "rotate(60)") .attr("y", 0) .attr("x", 7) .style("text-anchor", "start") .style("font","16px sans-serif"); const yAxis = svg .append("g") .attr("transform", `translate(${margin.left-10}, 0)`) .call(d3.axisLeft(y)) .selectAll("text") .style("font","16px sans-serif"); svg .append("text") .attr("x", width / 2) .attr("y", height - margin.bottom / 3) .attr("text-anchor", "middle") .attr("fill", "black") .style("font-weight", "bold") .text("date"); svg .append("text") .attr("text-anchor", "middle") .attr("fill", "black") .style("font-weight", "bold") .attr("transform", `translate(15, ${height / 2}) rotate(-90)`) .text("cases"); const line = d3.line() .x(d=>x(d.date)) .y(d=> y(d.cases)) const line_path = svg.append("path") .datum(data) .attr("fill","none") .attr("stroke","steelblue") .attr("stroke-width",3) .attr("stroke-linecap","round") .attr("d",line) return svg.node(); }36:[] 2f:{"id":"824d5c7bcb71d182","slug":null,"title":"Mia Tarantola and Allison James","thumbnail":"2e23b93e69873f472a7694880dcfea6fcefc4a37253623c105ac3fd474ed9dec","access_level":"public","create_time":"$D2022-11-08T05:53:11.948Z","update_time":"$D2023-01-22T20:27:51.925Z","view_time":null,"first_public_time":"$D2023-01-22T20:39:31.454Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"8452540227ce035f","login":"csci0465-f22","name":"csci0465-f22","avatar_url":"https://avatars-next.observableusercontent.com/0d57ad36e00d40948848449bda35b40b4d2dd3c3aeabda070ab7aa5884413adc","tier":"pro_2024"},"version":629,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"fb4a7096e28be25c","login":"miatarantola","name":"Mia Tarantola","avatar_url":"https://avatars-next.observableusercontent.com/8e69c094592f5e8626548e97520b4b4f6dc5364eb3c6427694f8e99df4cc7bf3","tier":null}],"members":[{"type":"individual","id":"1600f5959fe0fab7","login":"amjamesmidd","name":"Allison James","avatar_url":"https://avatars-next.observableusercontent.com/4363ca3ffad9c5389793cd7a5359f3c8ffd72a008bc18c4054e64673bbaff4f9","tier":null,"role":"editor"},{"type":"individual","id":"83455f38fe8f6883","login":"christopherpandrews","name":"Christopher Andrews","avatar_url":"https://avatars-next.observableusercontent.com/e2f445a7bad2204845ceaf2d487e500674cd2ac7f8bd2544c1da00d1edb25a2c","tier":null,"role":"editor"},{"type":"individual","id":"fb4a7096e28be25c","login":"miatarantola","name":"Mia Tarantola","avatar_url":"https://avatars-next.observableusercontent.com/8e69c094592f5e8626548e97520b4b4f6dc5364eb3c6427694f8e99df4cc7bf3","tier":null,"role":"editor"}],"comments":[{"id":"2a01105203c780c2","reply_to_id":null,"content":"If you had attached the data as a File attachment and used Observable's tool to load it on the page, you could have added the typed:true to the import to auto convert. \n\nYou can also put a + in front of a value that may be a string that you want interpreted as a number to make it a number.","create_time":"$D2022-11-30T21:14:28.084Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"83455f38fe8f6883","login":"christopherpandrews","name":"Christopher Andrews","avatar_url":"https://avatars-next.observableusercontent.com/e2f445a7bad2204845ceaf2d487e500674cd2ac7f8bd2544c1da00d1edb25a2c","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Mia Tarantola and Allison James","cells":[{"id":0,"value":"# Mia Tarantola and Allison James","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":204,"value":"# COVID DASHBOARD","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":387,"value":"{\n const templateStyle = {\n display: \"flex\",\n width: \"1000px\",\n height:\"380px\"\n };\n\n const plot1 = createLineplot1(usa_dates);\n\n const plot2 = createLineplot1(filter_to_date.filter( d=> d.state == location));\n\n const template = htl.html`\n

                      Total Cases in the US

\n ${plot1} \n

\n \n \n

                      Total Cases per State

           ${viewof location}

${plot2}

\n \n\n \n

\n \n

\n ${plot1}\n ${plot2}\n

`;\n\n return template;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":207,"value":"# How to use:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":189,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":210,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":212,"value":"# Reflection","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":214,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":121,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":185,"value":"# Helper Functions and Variables","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":218,"value":"link to scratch work: https://observablehq.com/d/b73a04bb1e6c2f8d","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"colleges = d3.csv(\"https://raw.githubusercontent.com/nytimes/covid-19-data/master/colleges/colleges.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"states = d3.csv(\"https://raw.githubusercontent.com/nytimes/covid-19-data/master/us-states.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":494,"value":"function filteranddates() {\n const copy = states\n var filtered = copy.filter(d => (d.date).slice(-2)=='01')\n \n \n \nreturn filtered\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":503,"value":"filters = filteranddates()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":516,"value":"filter_to_date = {\n const copy = filters\n \n copy.forEach(d=>{\n d.date = new Date(d.date)\n d.cases = +d.cases\n })\n return copy\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"usa = d3.csv(\"https://raw.githubusercontent.com/nytimes/covid-19-data/master/us.csv\",{typed:true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":525,"value":"usa_dates = {\n const copy = usa\n const new_array = copy.filter(d => (d.date).slice(-2)=='01')\n new_array.forEach(d=>{\n d.date = new Date(d.date)\n d.cases = Number(d.cases)\n\n \n })\n\n return new_array\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"inmates = d3.csv(\"https://raw.githubusercontent.com/nytimes/covid-19-data/master/prisons/systems.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"import {vl} from \"@vega/vega-lite-api-v5\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"combine_data_df=combine_df(colleges_combined,Array())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"unique_states = (Array.from([...new Set(states.map(item => item.state))])).sort()\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"unique_location = get_unique_locations(colleges_combined,Array())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"function case_to_num(data) {\n data.forEach(d=>{\n d.cases = Number(d.cases)})\n return data\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"colleges_combined = combine_data(colleges)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"inmates.forEach((d) =>{\n d[\"total_inmate_cases\"] = Number(d[\"total_inmate_cases\"])\n d[\"total_officer_cases\"] = Number(d[\"total_officer_cases\"])\n d[\"total_inmate_deaths\"] = Number(d[\"total_inmate_deaths\"])\n d[\"total_officer_deaths\"] = Number(d[\"total_officer_deaths\"])\n})\n\n\n\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"function get_college(Obj) {\n const state = Obj.state\n const filtered_colleges =(colleges.filter(d => d.state ===state))\n\n return filtered_colleges\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"function top_10(array) {\n const new_array = (array.flat())\n\n \n const sorted = case_to_num(new_array).sort(function(a,b){\n return b.cases-a.cases})\n\n const array2 = Array()\n sorted.slice(0,10).forEach(d=>{\n array2.push(`${d.college} (${d.cases})`)\n })\n\n\n \n \n \n \n return array2\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"function combine_data(data){\n\n const sums = data.reduce((a, {\n state,\n cases\n}) => (a[state] = (a[state] || 0) + Number(cases), a), {});\n\n return sums\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"function combine_df(data,data2){for (const property in data){\n var state = new Object()\n state[\"state\"]=property\n state['cases'] = data[property]\n data2.push(state)\n}\n return data2}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"function get_unique_locations(data,data2) {for (const property in data){\n\n data2.push(property)\n}\n return data2}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"viewof location = Inputs.select(unique_states)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 30:"$2f:body"