29:null 2a:["$","title",null,{"children":"🇺🇸 🦠 Exploring COVID-19 Data & State Demographics | Columbia Data Viz Sp21 | Observable"}] 2f:T407,//

${"

" + // selectedStates // .join("

") + "

{ yield html`

${ "

" + getFilterString() .join("

") + "

" + ["Added to Filter Selection:"].concat(focused).concat(["
"]) .join("

") + "

" + ["Removed from Filter Selection:"].concat(unfocused) .join("

") + "

${viewof order}

`; fullViz(); }30:T798,{ if (filterBy == "State") return html`

${viewof statesSelectButtons}

${viewof selectedStates}

`; if (filterBy == "Quantitative Field") return html`

${viewof filteredQuant}

${viewof quantRange}

${viewof filterMin}

${viewof filterMax}

${listOfSelection}

`; if (filterBy == "Categorical Field") return html`

${viewof filteredCat}

${viewof catSelection}

`; } // html`

${viewof crimeCharts}

${viewof CrimeMap}

`31:Tf35,md` **Describe how work was split amongst team members.** \n > We all worked to find datasets and potential visualization designs together. Once we settled on a visualization outline, we each completed feature sketches. > After ensuring we covered all the functionality we wanted, we split again and programmed proof-of-concepts for our features. Spencer worked the rearranging of axes, Xabi worked on tooltips, The worked on quantitative fields' range selection, and Imani worked on the Filter by State feature and chart state selection ability. Spencer put all of the individual work together and made the functionality cohesive and Imani helped clean up and debug some of the final visualization logic. We each conducted one user study and contributed to the writeup. **Include specific technical or design challenges you encountered.**\n - Updating the viewof select state Array with the graph-selected states was confusing, but we eventually found the set() function from synchronized inputs reference below. - We struggled with balancing aesthetics and simplicity versus flexible functionality. With many axes of data comes many abilities to encode this data. We wanted to allow this selective nature of encoding to be expansive without being overwhelming. - Filtering our dataset was also difficult, especially when exploring for helpful insights. For instance, we initially included governor ethnicity as a filterable field, but only one governor was not white. While this insight shows the lack of diversity in our government, it does not provide insight on the efficiency or progress of COVID vaccinations in the U.S. as a whole. **Describe what you learned in user testing and how you might improve your visualization if you had another week.** \n > We found our users a bit confused regarding visualization vocabulary in the interactive (categorical, quantitative for example). With more time, we can create a true scrollable interaction that is more inclusive in language. > We would like to explore more ways to create a dashboard experience in order to minimize the amount of scrolling necessary. Our users also wanted to be able to store and revert back to previous selections/filters, which would be helpful for sharing any findings with friends! **Some resources that helped us along the way:**\n Inspiration from Observable: - [US State Bubble Map](https://observablehq.com/@pankajjethwa/bubble-map) - [18 July 2020: About Sankey, Alluvial, Parallel Sets, and Parallel Coordinates](https://observablehq.com/@didoesdigital/18-july-2020-about-sankey-alluvial-parallel-sets-and-parall) - [ObservableHW: Synchronized Inputs](https://observablehq.com/@observablehq/synchronized-inputs) - [Range Slider by @mootari](https://observablehq.com/@mootari/range-slider) - [Filtering an Array into Unique Values](https://stackoverflow.com/questions/1960473/get-all-unique-values-in-a-javascript-array-remove-duplicates) - [Converting to Title Case in JS Because it isn't Python I Guess](https://www.w3docs.com/snippets/javascript/how-to-convert-string-to-title-case-with-javascript.html) - [Draggable Data](https://observablehq.com/d/839b6f72a64e02f2) - [Legends](https://observablehq.com/@d3/color-legend) Our data was hand-compiled from the following sources:\n - [Our World In Data's US COVID-19 Vaccine Distribution Data](https://www.kaggle.com/paultimothymooney/usa-covid19-vaccinations) - [Civil Services's US Governor Demographic Data](https://github.com/CivilServiceUSA/us-governors/blob/master/us-governors/data/us-governors.csv) - [Wikipedia State Population Estimates](https://en.wikipedia.org/wiki/List_of_states_and_territories_of_the_United_States_by_population) - [US Census Data – Poverty by State](https://www.census.gov/library/visualizations/interactive/2019-poverty-rate.html) - [New York Times COVID-19 Data](https://github.com/nytimes/covid-19-data) `32:T15af,async function fullViz() { var svg = d3.select("#chart") .append("svg") .attr("width", width + dimensions.margin.left + dimensions.margin.right) .attr("height", dimensions.height + dimensions.margin.top + dimensions.margin.bottom) .append("g") .attr("transform", "translate(" + dimensions.margin.left + "," + dimensions.margin.top + ")"); svg.selectAll("myPath") .data(full) .enter().append("path") .attr("d", path) .style("fill", "none") .style("opacity", x => opacity_selector(x)) .style("stroke", x => color_selector(x)) .style("stroke-width", x => width_selector(x)) .each(function (d) { if (selectedStates.indexOf("Select none") > -1) { set(viewof selectedStates, []); } else if (selectedStates.indexOf("Select all") > -1) { set(viewof selectedStates, states.filter(e => (e !== "Select none" && e != "Select all" ))); } }) .on("mouseover", function(d) { d3.select(this) .style("stroke", "#336666") .style("opacity", 1) .style("stroke-width", 4); // Create the tooltip label as an SVG group `tgrp` with a text and a rect inside var ttlist = countTooltip(); var maxlen = d3.max(ttlist, o => (o+":\t"+toTitleCase(d[o])).length); // .concat([toTitleCase(d[ttlist[0]])+ " - Gov. " + d[ttlist[1]]]) var tgrp = svg.append("g") .attr("id", "tooltip") .attr("transform", (d, i) => { var xcoord = d3.mouse(this)[0] + 5; var ycoord = d3.mouse(this)[1]; if ((xcoord + dimensions.margin.left + maxlen*6) > (width - dimensions.margin.right - dimensions.margin.right)) { // swap right -> left xcoord = xcoord - maxlen*6 - 20; } if ((ycoord + dimensions.margin.top + ((ttlist.length*16)-1) + 6) > (dimensions.height)) { // swap down -> up ycoord = ycoord - ((ttlist.length*16) + 6); } return `translate(${xcoord},${ycoord})`; }); tgrp.append("rect") .attr("width", maxlen*7 + "px") .attr("height", ((ttlist.length - 1)*16) + 6 +'px') .style('opacity','.9') .attr("fill", "white"); tgrp.append("text") .attr("x", 5) .attr("y", 14) .attr("text-anchor", "left") .attr("text-align", "center") .attr("font-family", "sans-serif") .attr("font-size", "14px") .attr("font-weight", "bold") .attr("fill", "black") .text(`${toTitleCase(d[ttlist[0]])+ " - Gov. " + d[ttlist[1]]}`); for (var c = 2; c < ttlist.length; c ++) { tgrp.append("text") .attr("x", 5) .attr("y", 16 * (c-1) + 14) .attr("text-anchor", "left") .attr("text-align", "center") .attr("font-family", "sans-serif") .attr("font-size", "11px") .attr("font-weight", "black") .attr("fill", "black") .text(`${ttlist[c]+":\t"+toTitleCase(d[ttlist[c]])}`); } }) .on("mouseout", function(d) { d3.select("#tooltip").remove(); d3.select(this) .transition().duration(250) .style("stroke-width", x => width_selector(x)) .style("stroke", x => color_selector(x)) // .style("stroke", "grey") .style("opacity", x => opacity_selector(x)); }) .on("click", function(d) { var state = d["State Name"]; var found = selectedStates.indexOf(state); if (found > -1) { if (focused.indexOf(state) > -1) { mutable focused = mutable focused.filter(e => e !== state); } else { mutable unfocused.push(state); } set(viewof selectedStates, selectedStates.filter(e => e !== state)); } else { if (unfocused.indexOf(state) > -1) { mutable unfocused = mutable unfocused.filter(e => e !== state); // mutable unfocused.push(state); } else { mutable focused.push(state); } selectedStates.push(state); set(viewof selectedStates, selectedStates); } d3.select(this) .style("stroke-width", x => width_selector(x)) .style("opacity", x => opacity_selector(x)) .style("stroke", x => color_selector(x)); // .style("stroke", "grey"); }); svg.append("text") .attr("x", (width / 2)) .attr("y", 0 - (dimensions.margin.top / 2)) .attr("text-anchor", "middle") .style("font-size", "22px") .style("text-decoration", "bold") .text("Comparing COVID-19 Data with State Demographics"); // Draw the axis: svg.selectAll("myAxis") // For each dimension of the dataset I add a 'g' element: .data(dataDimensions).enter() .append("g") .style("text-decoration", "bold") // I translate this element to its right position on the x axis .attr("transform", function(d) { return "translate(" + x(d) + ")"; }) // And I build the axis with the call function .each(function(d) { d3.select(this).call(d3.axisLeft().scale(y[d])); }) // Add axis title // .append("text") // .style("text-anchor", "middle") // .attr("y", function(d) { return ((dataDimensions.indexOf(d) + 1)%2)*-13 - 8; }) // .attr("transform", "rotate(0)" ) // .text(function(d) { return d; }) // // .style("fill", "black") // .style("fill", "white"); return svg; }33:T992,function get_legend() { if (colorBy == "None") { console.log("dsdfsfd"); return Button(""); } else if (colorBy == "Quantitative Field") { var minimum = d3.min(full, d => Number(d[colorScale])); var maximum = d3.max(full, d => Number(d[colorScale])); var noBiasList = ["Population (2020)", "Governor Time in Office (yrs)", "Governor Age", "Number of House of Rep. Seats","Population per House of Rep. Seat"]; var negativeList = ["Poverty Rate","Population In Poverty","Total COVID-19 Deaths","Total COVID-19 Cases"]; var positiveList = ["Total Vaccinations","Total Distributed Vaccinations","# of People Vaccinated", "People Fully Vaccinated per Hundred","Total Vaccinations per Hundred", "# of People Fully Vaccinated","People Vaccinated per Hundred", "Distributed Vaccines per Hundred","Daily Vaccinations", "Daily Vaccinations per Million","Share of Doses Used"]; if (noBiasList.indexOf(colorScale) >= 0) return legend({ color: d3.scaleSequential([minimum, maximum], noBias), title: colorScale, }); else if (negativeList.indexOf(colorScale) >= 0) return legend({ color: d3.scaleSequential([minimum, maximum], negative), title: colorScale, }); else if (positiveList.indexOf(colorScale) >= 0) return legend({ color: d3.scaleSequential([minimum, maximum], positive), title: colorScale, }); else return Button(""); } else if (colorBy == "Categorical Field") { var religion = ["#aaa4e1", "#e0332e", "#79b6b3", "#614682", "#9e4302", "#5e7222", "#f0ac3a", "#d8dc35", "#df6a92", "#44a42f", "#28161c"]; var party = ["rgb(255, 0, 0)", "rgb(0, 0, 255)"]; var gender = ["rgb(255, 0, 153)", "rgb(102, 153, 255)"]; if (colorScale == "Governor Gender") return swatches({ color: d3.scaleOrdinal(findUnique(colorScale).map(e => toTitleCase(e)), gender)}); else if (colorScale == "Governor Political Party") return swatches({ color: d3.scaleOrdinal(findUnique(colorScale).map(e => toTitleCase(e)), party)}); else if (colorScale == "Governor Religion") return swatches({ color: d3.scaleOrdinal(findUnique(colorScale).map(e => toTitleCase(e)), religion)}); } };34:T9a1,drag = { // .attr("width", width + dimensions.margin.left + dimensions.margin.right) // .attr("height", dimensions.height + dimensions.margin.top + dimensions.margin.bottom) // .append("g") // .attr("transform", // "translate(" + dimensions.margin.left + "," + dimensions.margin.top + ")"); return function(g, svg) { var x2, y, free; g.each((d, i) => { d.slot = i; }) // .attr("x", d => d.slot * w + dimensions.margin.left) .attr("x", d => d.slot * w) // .attr("transform", function(d) { return "translate(" + x(d.slot) + ")"; }) .attr("y", d => ((d.slot + 2)%2) * 20 + 10) .on("click", (event, d) => { svg.selectAll(this) const me = d3_effects .select(this) .raise() .classed("active", true), m = d3_effects.pointer(event); x2 = +me.attr("x") - event.x; y = +me.attr("y") - event.y; free = d.slot(); }); function dragstarted(event, d) { const me = d3_effects .select(this) .raise() .classed("active", true), m = d3_effects.pointer(event); x2 = +me.attr("x") - event.x; y = +me.attr("y") - event.y; free = d.slot; } function dragged(event, d, i) { const xx = Math.max(0, x2 + event.x), yy = Math.max(0, y + event.y); d3_effects.select(this) .attr("x", (d.x = xx)) .attr("y", ((d.slot + 2)%2) * 20 + 10); // .attr("y", (d.y = yy)); let p = Math.round(xx / w); svg.value = g.data().map(d => d.slot); svg.dispatchEvent(new CustomEvent("input")); if (p === d.slot) return; g.each(function(e) { if (e !== d && e.slot === p) { e.slot = free; d.slot = free = p; d3_effects.select(this) .transition() .attr("y", ((d.slot + 1)%2) * 20 + 10) .attr("x", e.slot * w); } }); } function dragended(event, d) { d.slot = free; d3_effects.select(this) .transition() .attr("x", d.slot * w) .attr("y", ((d.slot + 2)%2) * 20 + 10); free = -1; d3_effects.select(this).classed("active", false); } const drag = d3_effects .drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended); svg.value = g.data().map(d => d.slot); svg.dispatchEvent(new CustomEvent("input")); return drag(g); }; }35:Taa4,color_selector = function(col) { if (colorBy == "None") { if (selectedStates.length == 50) return "#69b3a2"; // green -- all selected if (selectedStates.length == 0) return "#69b3a2"; // green -- none selected if (selectedStates.indexOf(col["State Name"]) > -1) return "#69b3a2"; // green -- selected return "#686869"; // grey -- unselected } else if (colorBy == "Quantitative Field") { var minimum = d3.min(full, d => Number(d[colorScale])); var maximum = d3.max(full, d => Number(d[colorScale])); var colorNum = d3.scaleLinear() .domain([minimum, maximum]) .range([0, 1]); // console.log(colorNum); var noBiasList = ["Population (2020)", "Governor Time in Office (yrs)", "Governor Age", "Number of House of Rep. Seats","Population per House of Rep. Seat"]; var negativeList = ["Poverty Rate","Population In Poverty","Total COVID-19 Deaths","Total COVID-19 Cases"]; var positiveList = ["Total Vaccinations","Total Distributed Vaccinations","# of People Vaccinated", "People Fully Vaccinated per Hundred","Total Vaccinations per Hundred", "# of People Fully Vaccinated","People Vaccinated per Hundred", "Distributed Vaccines per Hundred","Daily Vaccinations", "Daily Vaccinations per Million","Share of Doses Used"]; // console.log(negativeList.indexOf(colorScale) >= 0); if (noBiasList.indexOf(colorScale) >= 0) return noBias(colorNum(Number(col[colorScale]))); else if (negativeList.indexOf(colorScale) >= 0) return negative(colorNum(Number(col[colorScale]))); else if (positiveList.indexOf(colorScale) >= 0) return positive(colorNum(Number(col[colorScale]))); else return "#686869"; } else if (colorBy == "Categorical Field") { // color schemes here vv var religion = ["#aaa4e1", "#e0332e", "#79b6b3", "#614682", "#9e4302", "#5e7222", "#f0ac3a", "#d8dc35", "#df6a92", "#44a42f", "#28161c"]; var party = d3.interpolateRgb("red", "blue"); var ethnicity = d3.interpolateRgb("grey", "red"); var gender = d3.interpolateRgb("#ff0099", "#6699ff"); var num = findUnique(colorScale).indexOf(col[colorScale]); // console.log(findUnique(colorScale),num,toTitleCase(d[colorScale])); // console.log(religion[num],"\n\n\n"); if (colorScale == "Governor Gender") return gender(num); else if (colorScale == "Governor Political Party") return party(num); else if (colorScale == "Governor Religion") return religion[num]; else if (colorScale == "Governor Ethnicity") return ethnicity(num); } };36:[{"id":"23cbca7cd8d653c08b0885fff7e1671de87d6cb8c1fc489e67fbffff85e52888ec42156558533c10597c55b741872867e7cc0263244d084128dca3e765e5d80b","href":"https://static.observableusercontent.com/files/23cbca7cd8d653c08b0885fff7e1671de87d6cb8c1fc489e67fbffff85e52888ec42156558533c10597c55b741872867e7cc0263244d084128dca3e765e5d80b","name":"buckets@2.csv","type":"text/csv","lastModified":1614130825169.846,"size":775},{"id":"3f1f37689b4e4e49e13f050d0bd9603f2a6097c625589b0a712320a1ae42bd9deb3224858c3592acb8e49a376ae83860910bb70edfec02a407e5a4ab3d7d8ba6","href":"https://static.observableusercontent.com/files/3f1f37689b4e4e49e13f050d0bd9603f2a6097c625589b0a712320a1ae42bd9deb3224858c3592acb8e49a376ae83860910bb70edfec02a407e5a4ab3d7d8ba6","name":"final_state_data-3.csv","type":"text/csv","lastModified":1615251569033.264,"size":11179},{"id":"5274544840c0b51b7e9e13adaa7534ecf0be770d06a3dd840133731071ebc3dd4251e7f4a7c07fd1dfc60cbe9bd844ce5b775058eb1c5e6de925cd439b87b701","href":"https://static.observableusercontent.com/files/5274544840c0b51b7e9e13adaa7534ecf0be770d06a3dd840133731071ebc3dd4251e7f4a7c07fd1dfc60cbe9bd844ce5b775058eb1c5e6de925cd439b87b701","name":"Intermediate.png","type":"image/png","lastModified":1615168253531.607,"size":188740},{"id":"5f40c9cff7a8e4a857b2286db145135f5e5623122f11ace53fc2e7c915bf4ff1c2a499c981e72448672ed6f51035bb31131b543e5117a75a7a4885f611ff27f0","href":"https://static.observableusercontent.com/files/5f40c9cff7a8e4a857b2286db145135f5e5623122f11ace53fc2e7c915bf4ff1c2a499c981e72448672ed6f51035bb31131b543e5117a75a7a4885f611ff27f0","name":"Spencer-flow.jpeg","type":"image/jpeg","lastModified":1615262226481.455,"size":728325},{"id":"9da21f42217b1a43c1122d2b23f6cecec3f7965520e46ddcf46de4857cb1821e7c8afef054c305f1c4dfaa0bf2f9bf48cef4e29aa6e9de2d3813d44027c56afe","href":"https://static.observableusercontent.com/files/9da21f42217b1a43c1122d2b23f6cecec3f7965520e46ddcf46de4857cb1821e7c8afef054c305f1c4dfaa0bf2f9bf48cef4e29aa6e9de2d3813d44027c56afe","name":"original.png","type":"image/png","lastModified":1615262358089.211,"size":578680},{"id":"17acf5e53e1b4aaf17359e872f4d5b96215d35d09bfe24e6b93f14cb96db8b01b0c7e050d8c06f5337a859a05f2cd99b5562b4e084f58c3012e87dc367279ba7","href":"https://static.observableusercontent.com/files/17acf5e53e1b4aaf17359e872f4d5b96215d35d09bfe24e6b93f14cb96db8b01b0c7e050d8c06f5337a859a05f2cd99b5562b4e084f58c3012e87dc367279ba7","name":"Imani Sketch.png","type":"image/png","lastModified":1615261918159.592,"size":121113}] 2d:{"id":"990ee1c78d4e9632","slug":null,"title":"🇺🇸 🦠 Exploring COVID-19 Data & State Demographics","thumbnail":"a426826580ea492736e105d4f02c0b2070b98346a50c92af40dcdb2d32d061f6","access_level":"unlisted","create_time":"$D2021-02-12T18:43:28.038Z","update_time":"$D2021-04-13T20:46:10.990Z","view_time":null,"first_public_time":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"bd55f8cdcb03c6ac","login":"columbiaviz-s21","name":"Columbia Data Viz Sp21","avatar_url":"https://avatars-next.observableusercontent.com/d7aca17844c982135939acf7860ef7195e5f7a382fd8f1db267359800ab85fbc","tier":"starter_2024"},"version":4651,"publish_version":4651,"role":null,"authored":false,"authors":[{"type":"individual","id":"fa3d61cabc35b759","login":"spencerbruce","name":"spencer","avatar_url":"https://avatars-next.observableusercontent.com/abd15b9b0fbec86ec18c25b83cf4a25d903af7a7782e0553e1d439e4e4cf84c3","tier":null}],"members":[{"type":"individual","id":"64f64cf3eadb22df","login":"imanigosserand","name":"Imani Gosserand","avatar_url":"https://avatars-next.observableusercontent.com/a8062c7dadb659d05376576288498850dc1b2380ca88a21962d14fc59654aea9","tier":null,"role":"editor"},{"type":"individual","id":"fa3d61cabc35b759","login":"spencerbruce","name":"spencer","avatar_url":"https://avatars-next.observableusercontent.com/abd15b9b0fbec86ec18c25b83cf4a25d903af7a7782e0553e1d439e4e4cf84c3","tier":null,"role":"editor"},{"type":"individual","id":"a1f8fd778457ccb4","login":"thengo1","name":"","avatar_url":"https://avatars.githubusercontent.com/u/31786660?v=4","tier":null,"role":"editor"},{"type":"individual","id":"5bed1d2a2b1126b5","login":"xabi","name":"Xabier Peralta","avatar_url":"https://avatars-next.observableusercontent.com/0a9a364116c69b578e40c62f09fa647f397211985f1ca49fe7a717e3f7a5bf3a","tier":null,"role":"editor"},{"type":"individual","id":"a15e3f4fb162ebae","login":"ericfan24","name":"","avatar_url":"https://avatars.githubusercontent.com/u/42872456?v=4","tier":null,"role":"viewer"},{"type":"individual","id":"87ae93665ea1c455","login":"kamrulhossain5","name":"Kamrul Hossain","avatar_url":"https://avatars.githubusercontent.com/u/41009619?v=4","tier":null,"role":"viewer"},{"type":"individual","id":"07221da4e2b4c93e","login":"rennahweng","name":"Rennah Weng","avatar_url":"https://avatars.githubusercontent.com/u/44763685?v=4","tier":null,"role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":6,"collection":null,"type":"notebook","body":{"title":"🇺🇸 🦠 Exploring COVID-19 Data & State Demographics","cells":[{"id":0,"value":"md`# 🇺🇸 🦠 Exploring COVID-19 Data & State Demographics \n## A4 – Interactive Visualization \\n- Spencer Bruce (sgb2145) \\n- Imani Gosserand (ijg2112) \\n- Xabier Peralta (xp2159) \\n- The Ngo (tbn2109)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4399,"value":"md`\n### Background \\n\n> Though one can easily Google \"COVID-19 cases\" or \"COVID-19 vaccinations\" and get a dashboard with COVID-19 data for US states, it is a bit more difficult to compare case and vaccination numbers between states or see how these numbers correlate (if at all) to other state information. \n\n> We compiled a dataset of US state COVID-19 data along with other state metrics such as poverty level, governor political party, and governor age to explore potential correlations. Initially we wondered if vaccination distribution correlated with COVID-19 cases or deaths. **Surprisingly, we found that there was no correlation between cases/deaths and vaccine distribution.** We later explored whether governors' ages or political parties affected COVID-19 rates in their states. \n\n> We encourage you to explore these relationships and many others as we have 20+ datapoints per state available!
\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4581,"value":"md`\n**Tip - How to read the lines between axes:** \\n\n1. Mostly parallel lines between neighboring axes shows a positive correlation between two fields. For example, as expected, population and COVID-19 cases are positively correlated.\n2. Mostly criss-crossed lines between neighboring axes shows a negative correlation between two fields. For example, Daily vaccinations per million and poverty rate have an inverse relationship.\n3. If there seems to be no clear pattern of lines between neighboring axes, this means there is likely no correlation between the two fields.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3591,"value":"html`

${get_legend()}

`;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3733,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":593,"value":"md`## 📏 Select Chart Axes \n> Select different quantitative fields to display new relationships between datapoints in the parallel coordinate chart.
\\n - Cmd/Ctrl + Click to select multiple fields (min 2, max 6). \\n - Click + drag the axis titles above to rearrange them.
`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4117,"value":"html`

${viewof selectedFields}

${viewof shuffleFields}

`;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":298,"value":"md`## 🔎 Select Filter Type`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4502,"value":"md`\n> Click a category below to filter by a type of metric (State is default). \\n\n>This allows you to highlight specific data points in the visualization. For example, you can filter states to focus on New York and California. Alternatively, with quantitative fields, you can filter for states with COVID-19 case numbers over 100,000. Finally, with categorical fields, you could filter for states with Republican governors.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":304,"value":"// viewof filterBy = Radio([\"State\",\"Quantitative Field\",\"Categorical Field\",\"None\"], {value: \"None\",label: \"Filter data by: \"})\nviewof filterBy = Radio([\"State\",\"Quantitative Field\",\"Categorical Field\"], {value: \"State\",label: \"Filter data by: \"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3422,"value":"md`${filterText(filterBy)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3196,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":619,"value":"// md`## 🎨 Select Color Scale \\n Select a color scale in which to display your data.
`\nmd`##
🎨 Select Color Scale
`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4572,"value":"md`\n> Click a category below to color encode the visualization by a type of metric (No encoding is default). \\n\n>This allows you to see an additional dimension of data in the visualization. For example, with quantitative fields, you can color a state's data a darker shade as a metric, such as COVID-19 cases, increases in value. With categorical fields, in one instance, you can color states with Republican governors red and Democrat governors blue.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":638,"value":"viewof colorBy = Radio([\"Quantitative Field\",\"Categorical Field\",\"None\"], { value:\"Quantitative Field\", label: \"Color data by: \"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2475,"value":"md`${colorText()}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2495,"value":"viewof colorScale = {\n if (colorBy == \"Quantitative Field\")\n return Select(quantitative, {label: \"\",value: \"Total COVID-19 Cases\"});\n // return Select(quantitative, {label: \"Select quantitative field: \"});\n else if (colorBy == \"Categorical Field\")\n return Radio(categorical.filter(e => e != \"Governor\" && e != \"Governor Ethnicity\"), {value:\"Governor Political Party\",label: \"\"});\n // return Select(categorical.filter(e => e != \"Governor\" && e != \"Governor Ethnicity\"), {label: \"Select categorical field: \"});\n else if (colorBy == \"None\")\n return Button(\"\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2518,"value":"md`## 📋 Full Dataset (for reference)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2516,"value":"viewof fulldataset = Table(full);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3453,"value":"md`
\n## ✏️ Writeup \n\n**Describe any abandoned alternative designs** \\n\n> In one of our early visualizations, we attempted to use a choropleth to visualize our dataset. However, we quickly learned that this was nowhere near the amount of flexibility needed to visualize many axes of data. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4517,"value":"FileAttachment(\"Imani Sketch.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4614,"value":"md`> In an early parallel coordinates design, we showed all of the possible filter types at once rather than using radio buttons to switch views. We received feedback from our breakout rooms restrict this information overload, which led to future revisions.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4622,"value":"FileAttachment(\"Intermediate.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4602,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4420,"value":"md`##
💀 Code Graveyard `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4427,"value":"md`### Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3600,"value":"import {legend,swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":173,"value":"import {Button, Checkbox, Toggle, Radio, Range, Select, Text, Textarea, Search, Table} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1723,"value":"import {number} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":873,"value":"import {rangeSlider, theme_Flat} from '@mootari/range-slider'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4430,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":85,"value":"mutable data = {\n var d = Array(50);\n // for every state \n for (var i = 0; i < 50; i++) {\n // d[i] = data[i]\n d[i] = Object()\n // add categorical fields\n for (var c = 0; c < categorical.length; c++) {\n // d[i] = Object.assign({}, mutable d[i], { categorical[c] : full[i][categorical[c]]});\n d[i][categorical[c]] = full[i][categorical[c]];\n d[i][\"State Name\"] = full[i][\"State Name\"];\n d[i][\"State\"] = full[i][\"State\"];\n }\n // add selected quantitative fields\n for (var c = 0; c < selectedFields.length; c++) {\n d[i][selectedFields[c]] = Number(full[i][selectedFields[c]]);\n }\n }\n return d;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":251,"value":"full = FileAttachment(\"final_state_data-3.csv\").csv({array: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":212,"value":"categ_or_quant = FileAttachment(\"buckets@2.csv\").csv({array: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4433,"value":"md`### Filter selection`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4300,"value":"function getFilterString() {\n if (filterBy == \"State\") \n return [\"Filtering By: \",\"Selected States\",selectedStates.length - focused.length + unfocused.length + \"/50 States\",\"
\"];\n else if (filterBy == \"Quantitative Field\") \n return [\"Filtering By: \",filteredQuant,\"≤ \"+filterMax,\"≥ \"+filterMin,selectedStates.length - focused.length + unfocused.length + \"/50 States\",\"
\"];\n else if (filterBy == \"Categorical Field\") \n \n return [\"Filtering By: \",filteredCat].concat(catSelection.map(e => toTitleCase(e)) ).concat([selectedStates.length - focused.length + unfocused.length + \"/50 States\",\"
\"]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4434,"value":"md`### Color Scale Selection`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4436,"value":"md`### Visualiztion`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":155,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3608,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":182,"value":"opacity_selector = function(d) {\n if (colorBy == \"Quantitative Field\") return 1.0;\n if (selectedStates.length == 50) \n return 0.8;\n\n if (selectedStates.length == 0) \n return 0.6;\n\n if (selectedStates.indexOf(d[\"State Name\"]) > -1 || focused.indexOf(d[\"State Name\"]) > -1) \n return 0.8;\n\n else\n return .4;\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1910,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4441,"value":"md`### Categorical Fields`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":217,"value":"categorical = categ_or_quant[0].slice(3,8)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4442,"value":"md`### Quantitative Fields`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":224,"value":"// quantitative = categ_or_quant[1].slice(1).filter(e => ([\"% of US population (2020)\", \"Daily Vaccinations (raw)\", \"Population per Electoral College Vote (2020)\", \"% of Electoral College Vote\"].indexOf(e) < 0))\nquantitative = [\"Population (2020)\", \"Total COVID-19 Cases\", \"Total COVID-19 Deaths\",\"Distributed Vaccines per Hundred\",\"Daily Vaccinations per Million\",\"People Vaccinated per Hundred\",\"Poverty Rate\", \"Population In Poverty\", \"Governor Time in Office (yrs)\", \"Governor Age\", \"Total Vaccinations\", \"Total Distributed Vaccinations\", \"# of People Vaccinated\", \"People Fully Vaccinated per Hundred\", \"Total Vaccinations per Hundred\", \"# of People Fully Vaccinated\", \"Daily Vaccinations\", \"Share of Doses Used\", \"Number of House of Rep. Seats\", \"Population per House of Rep. Seat\"];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":272,"value":"fields = {\n var keys = [];\n for (var k in full[0]) \n keys.push(k);\n return keys;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4444,"value":"md`### State Selection`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":168,"value":"states = {\n var states = [\"Select all\", \"Select none\"];\n for (var i = 0; i < data.length; i++) {\n states.push(full[i][\"State Name\"])\n }\n return states\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4243,"value":"manageStates = {\n if (selectedFields.length == 0)\n set(viewof selectedFields, [\"Population (2020)\"])\n if (selectedFields.length == 6)\n mutable remembered = selectedFields;\n if (selectedFields.length >6)\n set(viewof selectedFields, remembered)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1693,"value":"mutable focused = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1690,"value":"mutable unfocused = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1520,"value":"function getNumSelectedStates() {\n // filteredQuant;\n // filterBy;\n // catSelection;\n var newSelectedStates = [] \n mutable unfocused = []\n mutable focused = []\n if (filterBy == \"Quantitative Field\") {\n for (var i = 0; i < 50; i++) {\n if (Number(full[i][filteredQuant]) >= Number(filterMin) && (Number(full[i][filteredQuant])) <= Number(filterMax)) {\n newSelectedStates.push(full[i][\"State Name\"]);\n } \n }\n set(viewof selectedStates, newSelectedStates);\n }\n if (filterBy == \"Categorical Field\") {\n for (var i = 0; i < 50; i++) {\n if (catSelection.indexOf(full[i][filteredCat]) > -1) {\n console.log(filteredCat,catSelection,full[i][filteredCat]);\n newSelectedStates.push(full[i][\"State Name\"]);\n } \n }\n set(viewof selectedStates, newSelectedStates);\n }\n // return \"States in Range: \" + newSelectedStates.length + \" (\" + newSelectedStates.length*100/50 + \"% of all States)\";\n return \"States in Range: \" + newSelectedStates.length + \" / 50\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4246,"value":"mutable remembered = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":449,"value":"width_selector = function(d) {\n if (selectedStates.length == 50) \n return \"2.2\";\n\n if (selectedStates.length == 0) \n return \".8\";\n \n if (selectedStates.indexOf(d[\"State Name\"]) > -1 || focused.indexOf(d[\"State Name\"]) > -1) \n return \"2.2\";\n \n return \".8\";\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":385,"value":"function set(input, value) {\n input.value = value;\n input.dispatchEvent(new Event(\"input\"));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3691,"value":"noBias = d3.interpolateRgb(\"#ffcccc\", \"#00008b\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4078,"value":"// { \n// set(viewof selectedFields, [\"Population (2020)\", \"Total COVID-19 Cases\", \"Total COVID-19 Deaths\", \"Distributed Vaccines per Hundred\", \"Daily Vaccinations per Million\", \"People Vaccinated per Hundred\"]);\n// }\nfunction setBeginning() {\n shuffleFields;\n if (shuffleFields == null)\n set(viewof selectedFields, [\"Population (2020)\", \"Total COVID-19 Cases\", \"Total COVID-19 Deaths\", \"Distributed Vaccines per Hundred\", \"Daily Vaccinations per Million\", \"People Vaccinated per Hundred\"]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3695,"value":"positive = d3.interpolateRgb(\"#CAEDDB\",\"#003300\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3887,"value":"function countTooltip() {\n var tooltiplist = [\"State Name\",\"Governor\"];\n var n = tooltiplist.length;\n // add the categorical or quantitative filter\n if (filterBy == \"Quantitative Field\" && filteredQuant != null) {\n n += 1;\n tooltiplist.push(filteredQuant);\n }\n else if (filterBy == \"Categorical Field\" && filteredCat != null) {\n n += 1;\n tooltiplist.push(filteredCat);\n }\n // add the coloring field \n if (colorBy != \"None\") {\n n += 1;\n tooltiplist.push(colorScale);\n }\n for (var i = 0; i < n; i++) {\n var label = tooltiplist[i];\n }\n tooltiplist = tooltiplist.concat([...orderedFields]).filter(unique);\n return tooltiplist;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3698,"value":"negative = d3.interpolateRgb(\"#fffccb\",\"#990000\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":439,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3138,"value":"shuffle = {\n shuffleFields;\n var shuffled = [...quantitative].slice(0), i = quantitative.length, temp, index;\n while (i--) {\n index = Math.floor((i + 1) * Math.random());\n temp = shuffled[index];\n shuffled[index] = shuffled[i];\n shuffled[i] = temp;\n }\n // mutable selectedFields = shuffled.slice(0, 6);\n set(viewof selectedFields, shuffled.slice(0, 6));\n setBeginning();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":62,"value":"function path(d) {\n return d3.line()(dataDimensions.map(function(p) { return [x(p), y[p](d[p])]; }));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":53,"value":" x = d3.scalePoint()\n .range([0, width])\n .padding(1)\n .domain(dataDimensions);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":101,"value":"y = {\n var y = []\n for (var i in dataDimensions){\n var name = dataDimensions[i]\n y[name] = d3.scaleLinear()\n .domain(d3.extent(data, function(d) { return +d[name]; }))\n .range([dimensions.height, 0])\n }\n return y \n}\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":103,"value":"// dataDimensions = d3.keys(data[0]).filter(function(d) {return (quantitative.includes(d))})\ndataDimensions = Array.from(orderedFields)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":104,"value":"dimensions = ({ \n height:400,\n width:500, \n margin: {\n top: 30,\n right: 10,\n bottom: 10,\n left: 0,\n } \n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1886,"value":"function toTitleCase(str) {\n return str.replace(\"-\",\" \").replace(\"-\",\" \").toLowerCase().split(' ').map(function (word) {\n return (word.charAt(0).toUpperCase() + word.slice(1));\n }).join(' ');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1877,"value":"function findUnique(f) {\n var templi = []\n for (var i=0; i<50; i++) {\n // templi.push(toTitleCase(full[i][f])); \n templi.push(full[i][f]); \n }\n return templi.filter(unique);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":326,"value":"function checkFilter(x,y) { \n if (x == y)\n return \"(Selected)\"\n return \"(Not selected)\"\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":631,"value":"function checkColor(x,y) { \n if (x == y)\n return \"(Scale active)\"\n return \"(Scale not active)\"\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":699,"value":"function unique(value, index, self) {\n return self.indexOf(value) === index;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2479,"value":"function colorText() {\n if (colorBy == \"None\") return \"\";\n if (colorBy == \"Quantitative Field\") return \"Select a quantitative field in which to encode your chart.\";\n if (colorBy == \"Categorical Field\") return \"Select a categorical field in which to encode your chart.\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2443,"value":"function filterText() {\n if (filterBy == \"None\") return \"\";\n if (filterBy == \"State\") return \"### Filter By States \\n > Select focal states using the chart below or by clicking on that state's stroke in the chart. Cmd/Ctrl + Click to select multiple states.
\";\n if (filterBy == \"Quantitative Field\") return \"### Filter by Quantitative Field \\n > Select a quantitative field to filter by along with a filter minimum or maximum. \\n Feel free to fine-tune your selection with the number boxes. \\n (Note: The range slider will not visibly update if you choose to fine-tune. Rest assured that your inputs were captured, however!)\";\n if (filterBy == \"Categorical Field\") return \"### Filter By Categorical Field \\n > Select a categorical field to filter by. \\n Then, select categories you would like to highlight. \\n Cmd/Ctrl + Click to select multiple categories in said field. \";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2053,"value":"orderedFields = {\n var ret = [];\n for (var i=0; i Number(d[filteredQuant]));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1783,"value":"maxiRange = d3.max(full, d => Number(d[filteredQuant]));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":106,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2241,"value":"d3_effects = require(\"d3-selection@2\", \"d3-transition@2\", \"d3-drag@2\", \"d3-scale@3\", \"d3-scale-chromatic@2\", \"d3-array@2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1607,"value":"function checkForQuant() {\n if (filteredQuant == null && filterBy == \"Quantitative Field\") return \"↓ Bound (% of max value) – ↑ Bound (% of max value)\";\n else return filterString(quantRange);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":270,"value":"viewof selectedFields = Select(quantitative, {multiple: true, value: [null], label: \"Select quantitative fields\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":598,"value":"viewof filteredCat = Select(categorical.filter(e => e != \"Governor\" && e != \"Governor Ethnicity\"), {label: \"Select field: \", value: \"Governor Political Party\"});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1110,"value":"function filterString(v) {\n var c = \"↓: \" + v[0] + \" (\" + d3.format(\".2f\")(v[0]*100/d3.max(full, d => Number(d[filteredQuant]))) + \"% of max) – ↑: \" + v[1] + \" (\" + d3.format(\".2f\")(v[1]*100/d3.max(full, d => Number(d[filteredQuant]))) + \"% of max)\";\n // var c = v[0] + \" (\" + d3.format(\".2f\")(v[0]*100/d3.max(full, d => Number(d[filteredQuant]))) + \"%) – \" + v[1] + \" (\" + d3.format(\".2f\")(v[1]*100/d3.max(full, d => Number(d[filteredQuant]))) + \"%)\";\n return c;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3151,"value":"modify_states = {\n statesSelectButtons;\n if (statesSelectButtons == \"Select all\") {\n set(viewof selectedStates, states.filter(e=> e != \"Select all\" && e != \"Select none\"));\n mutable focused = [];\n mutable unfocused = [];\n }\n else if (statesSelectButtons == \"Select none\") {\n set(viewof selectedStates, []);\n mutable focused = [];\n mutable unfocused = [];\n }\n set(viewof statesSelectButtons, null);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3133,"value":"viewof shuffleFields = {\n return Button(\"Shuffle selection\",{value:null})\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3260,"value":"function backgroundChecker(v) {\n if (filterBy == v)\n return \"#FFF\";\n return \"#DDD\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1906,"value":"viewof order = {\n const svg = DOM.svg(width, 70);\n d3_effects.select(svg)\n .append(\"defs\")\n .html(\"\");\n\n d3_effects.select(svg)\n .append(\"g\")\n .selectAll(\"rect\")\n .data(function () {\n var ttt = [];\n for (var i =0; i < selectedFields.length; i++) {\n var temp = new Object;\n temp[\"name\"] = selectedFields[i];\n ttt.push(temp);\n }\n return ttt;\n })\n .enter()\n .append('text')\n .text(function(d) { return d.name; })\n .attr(\"y\", function(d) { return ((selectedFields.indexOf(d.name))%2 + 1)*20;})\n // .attr(\"x\", width)\n .style(\"text-anchor\", \"left\")\n .attr(\"font-size\", \"11px\")\n .call(drag, svg);\n return svg;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":166,"value":"// viewof selectedStates = Select(states, {multiple: true, disabled:filterBy!=\"State\", value:\"Select all\",label: \"Select state(s)\"});\nviewof selectedStates = {\n if (filterBy == \"State\") \n return Select(states.filter(e=> e != \"Select all\" && e != \"Select none\"), {multiple: true, disabled:false, value:\"Select all\",label: \"Select state(s)\"});\n // else return d3.select(DOM.svg(1, 1)).node();\n else if (filterBy == \"State\") {\n filteredQuant;\n }\n else {\n filteredCat;\n }\n return Select(states.filter(e=> e != \"Select all\" && e != \"Select none\"), {multiple: true, label:\"Selected state(s)\", disabled:false});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3144,"value":"viewof statesSelectButtons = Button([\n [\"Select all\",value => \"Select all\"],\n [\"Select none\",value=> \"Select none\"]\n], {label: \"\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":681,"value":"// do a select all or select none \nviewof catSelection = {\n if (!filteredCat) return Text({ disabled:true, value:\"Select field above\",label: \"Categories:\"});\n return Checkbox(findUnique(filteredCat), {multiple: true, value:[\"republican\"], label: \"Categories: \",format: x => toTitleCase(x)});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2586,"value":"// viewof filteredQuant = Select([null].concat(quantitative), {label: \"Select quantitative field: \"});\nviewof filteredQuant = {\n if (filterBy == \"Quantitative Field\") return Select([null].concat(quantitative), {label: \"Select quantitative field: \"});\n // return Select([null],{disabled:true});\n return Select([null].concat(quantitative), {label: \"Select quantitative field: \", disabled:true});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2592,"value":"listOfSelection = {\n // if (filteredQuant == null && filterBy == \"Quantitative Field\" || \n if (filteredQuant == null || filterBy == \"Quantitative Field\") {\n var lines = [getNumSelectedStates(), checkForQuant()];\n const svg = d3.select(DOM.svg(700, 55));\n svg.selectAll(\"text\")\n .data(lines)\n .enter().append(\"text\")\n .attr(\"font-size\", \"15\")\n .attr(\"fill\", `rgb(0,0,0)`)\n .attr(\"y\", (d, i) => (i+1)*20 )\n .attr(\"x\", 20)\n .attr(\"dy\", \"0.35em\")\n .text(d => d);\n return svg.node();\n }\n // if (filteredQuant == null) return Button(\"\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1320,"value":"viewof quantRange = {\n // filterMax;\n // filterMin;\n if (!filteredQuant) return rangeSlider({\n min: 0,\n max: 0,\n value: [0, 0],\n theme: theme_Flat,\n color: \"#62A87A\",\n display: v => \"\",\n })\n // if (filteredQuant == null) return Button(\"\");\n return rangeSlider({\n min: miniRange,\n max: maxiRange,\n value: [miniRange, maxiRange],\n theme: theme_Flat,\n color: '#62A87A',\n precision:4,\n // submit: true,\n // display: v => filterString(v),\n display: v => \"\",\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1344,"value":"viewof filterMin = { \n // return Button(\"\");\n // if (filterBy == \"Categorical Field\") return Button(\"\",{value:1});\n // if (filteredQuant==null) return Button(\"\");\n if (filteredQuant==null) return number({title: \"Minimum: \", disabled:true, placeholder: \"Select a field above.\"}) \n // return number({title: \"Minimum (≥ \" + String(miniRange) +\", ≤ \" + String(filterMax) + \"):\",submit:true,max: maxiRange, min:miniRange})\n return number({title: \"Minimum (≥ \" + String(miniRange) +\", ≤ \" + String(filterMax) + \"):\",submit:true,max: maxiRange, min:miniRange, placeholder: quantRange[0],value: String(quantRange[0])})\n // return number({title: \"Minimum (≥ \" + String(miniRange) +\", ≤ \" + String(filterMax) + \"):\",submit:true,max: maxiRange, min:miniRange, placeholder: changedMin[0],value: String(changedMin[0])})\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":673,"value":"viewof filterMax = {\n if (filteredQuant==null) return number({title: \"Maxmium: \", disabled:true, placeholder: \"Select a field above.\"})\n // if (filteredQuant==null) return Button(\"\");\n // return number({title: \"Maximum (≥ \" + String(quantRange[0]) + \", ≤ \" + String(maxiRange) +\"):\",submit:true,max: maxiRange, min:miniRange})\n return number({title: \"Maximum (≥ \" + String(quantRange[0]) + \", ≤ \" + String(maxiRange) +\"):\", placeholder: quantRange[1],submit:true,max: maxiRange, min:miniRange,value: String(quantRange[1])})\n // return number({title: \"Maximum (≥ \" + String(quantRange[0]) + \", ≤ \" + String(maxiRange) +\"):\", placeholder: changedMin[1],submit:true,max: maxiRange, min:miniRange,value: String(changedMin[1])})\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 2e:"$2d:body"