29:null 2a:["$","title",null,{"children":"Assignment 4 | Columbia Dataviz | Observable"}] 2f:T950,chart1 = { // Create Canvas const svg = d3.select(DOM.svg(Width, Height)); // Create States const states = svg .attr("id", "state-map") .selectAll("g") .data(us.states.features) .enter() .append("g") var select = 0; states // Add Path to Each State .append("path") .attr("d", path) .attr("fill", function(d){ if (abbrev[d.properties.name] in map_in) return color_plan(1.0/(choice_max-choice_min)*(map_in[abbrev[d.properties.name]]-choice_min)); else return "#EAEAEA"; }) .style("stroke-width", 1.5) .style("stroke", "white") .style("stroke-linecap", "round") .style("stroke-linejoin", "round") .style("fill-opacity", 1) // Add mouse properties .on("mouseover", function(d){ return tooltip.style("visibility", "visible"); }) .on("mousemove", function(d){ // Returns tooltip with new attributes if (select == 0) mutable state_select = (abbrev[d.properties.name] in map_in)?abbrev[d.properties.name]:null; return tooltip .text(d.properties.name+": "+((abbrev[d.properties.name] in map_in)?Number(map_in[abbrev[d.properties.name]].toFixed(2)):"no data")) .style("top", function(d){ const boundHeight = this.getBoundingClientRect().height; return (d3.event.pageY-boundHeight-15)+"px"; }) .style("left",function(d){ const boundWidth = this.getBoundingClientRect().width; return (d3.event.pageX-(boundWidth/2) )+"px"; }) }) .on("mouseout", function(){ // d3.select(this).attr("stroke", "white"); if (select == 0) mutable state_select = null; return tooltip.style("visibility", "hidden"); }) .on("click", function(d){ mutable state_select = (abbrev[d.properties.name] in map_in)?abbrev[d.properties.name]:null; select = 1; setTimeout(function() {select = 0}, 3000); }); // Create and add tooltip const tooltip = d3.select("body").append("div") .attr("class", "svg-tooltip") .style("position", "absolute") .style("visibility", "hidden"); // const chart = PieChart(clear_severity, { // name: d => "Severity Level: "+d.sev_level, // value: d => d.count, // width, // height: 500 // }) return svg.node(); }30:T8d7,1. The original database contains data spanning over five years, with approximately 50 features for each datapoint. The large amount of data brings about difficulties in data processing and computing. Therefore, we decided to concentrate our visualization on accidents specifically in 2017 and focus the analysis on a small number of highly relevant environmental statistics such as humidity, temperature, and visibility. 2. As mentioned, the dataset encompasses a wide range of features, several of which we deem significant. The question then became how to efficiently display and incorporate a large group of features in our graph. Initially, we hoped to depict both the severity and the accident amounts together as the dependent variables. However, it is challenging to show variables in multiple dimensions together, so we spent a considerable time coming up with the design strategy. 3. During implementation, we encountered some technical problems. One problem was how to sum up all traffic accidents by states and create a choropleth map based on that. The built-in function for an average is not able to handle data in such complex structure, so we had to write a new function for it. Then it comes the hardest part of making a link between two charts. At first, we attempted to select the area of a state in the map, making a tooltip on it and linking it to the second chart. However, after we carefully learned map plotting and SVG selection, we found there too much borders of states and finally decided to work with info of the hovering mouse position. We also make the graphs more balanced by getting the maximum and minimum of each data column, so that we could decide the range of the scales based on them. 4. We encountered technical problems during implementation because we could decide feature selection at the earlier stages. Also, the original dataset is too big that it can't be uploaded to observable, directly opened after being downloaded from the source website, or uploaded to Github. It even takes 50 minutes for our script to segment and process the data into JSON and upload the file to Github, since the files can not be attached on Observable still. This could have been avoided if we did some scoping work before implementing.31:T524,abbrev = ({ Alabama: "AL", Alaska: "AK", 'American Samoa': "AS", Arizona: "AZ", Arkansas: "AR", California: "CA", Colorado: "CO", Connecticut: "CT", Delaware: "DE", 'District Of Columbia': "DC", 'Federated States Of Micronesia': "FM", Florida: "FL", Georgia: "GA", Guam: "GU", Hawaii: "HI", Idaho: "ID", Illinois: "IL", Indiana: "IN", Iowa: "IA", Kansas: "KS", Kentucky: "KY", Louisiana: "LA", Maine: "ME", 'Marshall Islands': "MH", Maryland: "MD", Massachusetts: "MA", Michigan: "MI", Minnesota: "MN", Mississippi: "MS", Missouri: "MO", Montana: "MT", Nebraska: "NE", Nevada: "NV", 'New Hampshire': "NH", 'New Jersey': "NJ", 'New Mexico': "NM", 'New York': "NY", 'North Carolina': "NC", 'North Dakota': "ND", 'Northern Mariana Islands': "MP", Ohio: "OH", Oklahoma: "OK", Oregon: "OR", Palau: "PW", Pennsylvania: "PA", 'Puerto Rico': "PR", 'Rhode Island': "RI", 'South Carolina': "SC", 'South Dakota': "SD", Tennessee: "TN", Texas: "TX", Utah: "UT", Vermont: "VT", 'Virgin Islands': "VI", Virginia: "VA", Washington: "WA", 'West Virginia': "WV", Wisconsin: "WI", Wyoming: "WY" });32:[{"id":"783cf2bf259e16d662d92c9f59ec97e564c50841c5984f2bb6f65a6d31f8c1b80846bffb65cb654dc2b587ac96f0007ab68c24bacce33655fd785e46020aff74","href":"https://static.observableusercontent.com/files/783cf2bf259e16d662d92c9f59ec97e564c50841c5984f2bb6f65a6d31f8c1b80846bffb65cb654dc2b587ac96f0007ab68c24bacce33655fd785e46020aff74","name":"us-counties-10m.json","type":"application/json","lastModified":1679102686058.598,"size":842177},{"id":"0335431075aa8d222b1bf79b1cc97bd73478c9274cfdd29501654a491f8d3e2eb0fbb842da1c287155084c5ba3962693570dedc6b150a0bd263ed3c299471d68","href":"https://static.observableusercontent.com/files/0335431075aa8d222b1bf79b1cc97bd73478c9274cfdd29501654a491f8d3e2eb0fbb842da1c287155084c5ba3962693570dedc6b150a0bd263ed3c299471d68","name":"visibility_chart.png","type":"image/png","lastModified":1679507284266.683,"size":83621},{"id":"a4c22ded5c4e9b4a32d7f8b740c38234e944d3bd0875778519689065d6f7b7eee5249c376e8f8dbd460eed9433e1b4be113a7ee630753e5bf809ddcd7df0eb5c","href":"https://static.observableusercontent.com/files/a4c22ded5c4e9b4a32d7f8b740c38234e944d3bd0875778519689065d6f7b7eee5249c376e8f8dbd460eed9433e1b4be113a7ee630753e5bf809ddcd7df0eb5c","name":"date_chart.png","type":"image/png","lastModified":1679507284347.545,"size":280378},{"id":"2d971e4be8749cdc830d5162947ffe86daf312a2d4686a27da2e05769920d34aa5485470819419104c76404e1a4f57d9d4941f241cf4b19913d3242208c07a8b","href":"https://static.observableusercontent.com/files/2d971e4be8749cdc830d5162947ffe86daf312a2d4686a27da2e05769920d34aa5485470819419104c76404e1a4f57d9d4941f241cf4b19913d3242208c07a8b","name":"Temperature_chart.png","type":"image/png","lastModified":1679507284306.913,"size":88748},{"id":"601ea041a9a588dc10e7ffd12416c2f182cefdfca030b651ddc0b7617e66204ba7a7aa0f3b0a7346a9ac55e3646f55b3de6304963ea8807741747195070fe446","href":"https://static.observableusercontent.com/files/601ea041a9a588dc10e7ffd12416c2f182cefdfca030b651ddc0b7617e66204ba7a7aa0f3b0a7346a9ac55e3646f55b3de6304963ea8807741747195070fe446","name":"humidity_chart.png","type":"image/png","lastModified":1679507284347.051,"size":124361},{"id":"25dc821d7ec9d6a053837242e132fd6c69326894416e065bc8c9a2472ed05512a9d5554b9717a2647c13ff968588f1d886410556ced0e6568272473ca746ed65","href":"https://static.observableusercontent.com/files/25dc821d7ec9d6a053837242e132fd6c69326894416e065bc8c9a2472ed05512a9d5554b9717a2647c13ff968588f1d886410556ced0e6568272473ca746ed65","name":"severity_pie.png","type":"image/png","lastModified":1679507284319.348,"size":113577},{"id":"15a970d0f8c4db1b2731c2398fe567b9d95f1b3a266a0cff2ef00e5ae25307e519b4bbdc7d9b3c7f2ecc94a9e2dfe9ae9612c4ca05d690c27ca3d85eac4cc0ca","href":"https://static.observableusercontent.com/files/15a970d0f8c4db1b2731c2398fe567b9d95f1b3a266a0cff2ef00e5ae25307e519b4bbdc7d9b3c7f2ecc94a9e2dfe9ae9612c4ca05d690c27ca3d85eac4cc0ca","name":"wind_chart.png","type":"image/png","lastModified":1679507284366.551,"size":85390},{"id":"d08a24a4a05cbf8505dd0470b2cc9be6117009c9331c4d7a276a847822b0f075d9437372e679fe2e1c8a550e25e85519c7daaa98d3ef7148d34a89187d369fe8","href":"https://static.observableusercontent.com/files/d08a24a4a05cbf8505dd0470b2cc9be6117009c9331c4d7a276a847822b0f075d9437372e679fe2e1c8a550e25e85519c7daaa98d3ef7148d34a89187d369fe8","name":"density_map.png","type":"image/png","lastModified":1679508072088.213,"size":938711},{"id":"7947f6973812a77c4561b29f31fccaa9dddc84f4e4aa490a39812fa997a04c7a0acb0aafd182c9aa6d17f62fd6ad8ee67c50ba1248787f71686a811c6594a960","href":"https://static.observableusercontent.com/files/7947f6973812a77c4561b29f31fccaa9dddc84f4e4aa490a39812fa997a04c7a0acb0aafd182c9aa6d17f62fd6ad8ee67c50ba1248787f71686a811c6594a960","name":"map.png","type":"image/png","lastModified":1679508077845.462,"size":220777}] 2d:{"id":"deaca720074450c4","slug":null,"title":"Assignment 4","thumbnail":"d72c932e1ef5877c52b0bbed51d25224c4a562423a94564da808cd1fd63abb4d","access_level":"public","create_time":"$D2023-02-23T03:17:19.918Z","update_time":"$D2023-03-25T04:00:07.235Z","view_time":null,"first_public_time":"$D2023-02-23T03:17:19.918Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"7a615336d5b186de","login":"columbia-dataviz","name":"Columbia Dataviz ","avatar_url":"https://avatars-next.observableusercontent.com/bef00fdd2fde3755f8d242e6a6dd04e4535ae9d634d372ec959928e1d95fd9dc","tier":"pro_2024"},"version":3039,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"79b247c63406f7d3","login":"dw3013","name":"Di Wu","avatar_url":"https://avatars-next.observableusercontent.com/465dd77ca9963f9b479bece8f8e7c78a2598864df804d4924eb4bfca009c494e","tier":null}],"members":[{"type":"individual","id":"79b247c63406f7d3","login":"dw3013","name":"Di Wu","avatar_url":"https://avatars-next.observableusercontent.com/465dd77ca9963f9b479bece8f8e7c78a2598864df804d4924eb4bfca009c494e","tier":null,"role":"editor"},{"type":"individual","id":"ae6995dc15b385e9","login":"llliting","name":"Liting","avatar_url":"https://avatars-next.observableusercontent.com/9629f5f8e9ba601ed6b87eff7cbb42c7557c16e960119b38431c7ce81d3cd4ec","tier":null,"role":"editor"},{"type":"individual","id":"99efecbbfb2cd143","login":"yx2810","name":"Yangzi Xin","avatar_url":"https://avatars-next.observableusercontent.com/5508017bf124d85c924fcfb17d7af959ef9cba231160e79051cd4a36da011eac","tier":null,"role":"editor"},{"type":"individual","id":"b55cc2bbca1e576b","login":"zae2001","name":"Zoe Ariel Elison","avatar_url":"https://avatars-next.observableusercontent.com/b4af8ac00278de2101b3e0470060f9cc1838168ac529844c0ea691527a7a3234","tier":null,"role":"editor"},{"type":"team","id":"7a615336d5b186de","login":"columbia-dataviz","name":"Columbia Dataviz ","avatar_url":"https://avatars-next.observableusercontent.com/bef00fdd2fde3755f8d242e6a6dd04e4535ae9d634d372ec959928e1d95fd9dc","tier":"pro_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"Assignment 4","cells":[{"id":0,"value":"# Assignment 4","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":8,"value":"Group Member：Yangzi Xin(yx2810), Liting Huang(lh3119), Di Wu(dw3013), Zoe Ariel Elison(zae2001)\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":962,"value":"html`

${map_in_name}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1191,"value":"The map supports a fast-viewing mode where you can hover the mouse over different states to see the total number of traffic accidents and a checking mode where you can click on a state to see more detailed analysis. \n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1498,"value":"viewof filter = Inputs.checkbox(['2','3','4'], {label: 'Severity', value: ['2','3','4']})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1127,"value":"// There still need a component for color scale\nkey = Legend(d3.scaleSequential([choice_min, choice_max], color_plan), {title: legend_title})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":760,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1066,"value":"### ${chart_name}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1531,"value":"viewof chartChoice = Inputs.select(['Humidity(%)', 'Temperature(F)', 'Visibility(mi)', 'Wind_Chill(F)', 'Pressure(in)', 'Wind_Speed(mph)', 'Precipitation(in)' ], {label: \"Measurement\"})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1331,"value":"viewof chartSlider = Inputs.range([sliderMin, sliderMax], {label: chart_choice, step: stepSize, disabled: !state_select, value: prevSliderValue == -1 ? (dim_max + dim_min) / 2 : prevSliderValue})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1436,"value":"chart2.node()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2366,"value":"## Writeup","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2368,"value":"#### - Describe any abandoned alternative designs and describe how work was split amongst team members.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2416,"value":"The dataset we chose contains a large amount of information regarding traffic accidents in the U.S. Consequently, we hoped to construct a visualization that showcases how changes in environment variables are leading towards a traffic accident. \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2477,"value":"We attempted to employ line charts by date or averaged severity maps to illustrate the changes in severity and accident frequency over time and space. However, these graphs were deemed insufficient in conveying the visualization goal and incorporating future interactivity. Subsequently, we experimented with a density map; however, it failed to sufficiently differentiate the varying accident amounts, especially after adding interactive features. Ultimately, we reached a consensus to incorporate maps and histograms to effectively demonstrate the data geographically and statistically.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2509,"value":"#### work assignment\n- Zoe Elison: discussing initial design ideas, writeup \n- Liting Huang: discussing initial design ideas, static design, writeup, interactivity\n- Di Wu: discussing initial design ideas, static design, data preprocessing, setting up the map, interactivity\n- Yangzi Xin: discussing initial design ideas, static design, interactivity\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2492,"value":"#### Severity Level Pie Graph","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2425,"value":"image = FileAttachment(\"severity_pie.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2494,"value":"#### Traffic Accident Amount by Date","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2443,"value":"image6 = FileAttachment(\"date_chart.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2496,"value":"#### Traffic Accident Amount by Temperature\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2428,"value":"image2 = FileAttachment(\"Temperature_chart.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2499,"value":"#### Traffic Accident Amount by Visibility\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2431,"value":"image3 = FileAttachment(\"visibility_chart.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2501,"value":"#### Traffic Accident Amount by Wind Temperature\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2436,"value":"image4 = FileAttachment(\"wind_chart.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2503,"value":"#### Traffic Accident Amount by Humidity\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2440,"value":"image5 = FileAttachment(\"humidity_chart.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2507,"value":"#### Traffic Accident Average Severity Map\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2452,"value":"image7 = FileAttachment(\"map.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2505,"value":"#### Traffic Accident Density Map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2454,"value":"image8 = FileAttachment(\"density_map.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2372,"value":"#### - Include specific technical or design challenges you encountered. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2418,"value":"$30","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2374,"value":"#### - Describe what you learned in user testing and how you might improve your visualization if you had another week. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2521,"value":"During user testing, most of the feedback was very positive. Our visualization is highly informative in displaying environmental factors and their relationship to accident rates. I found that people were particularly interested in clicking on different states to compare data. Using a map instead of a scroll-down menu to select areas adds a playful element to our design.\n\nIf we had another week, there are several improvements I would make. Firstly, I would add a mean or median line on the graph, so that it is easier to see how each environmental factor contributes to traffic accidents. Secondly, I would enable cross-selection of different environmental variables, which would make it possible to determine the best and worst environmental conditions for traffic.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2376,"value":"#### - Finally, list resources that helped you along the way (this list doesn’t count against your word limit.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2525,"value":"- https://observablehq.com/@d3/choropleth-\n- https://medium.com/two-n/an-alternative-to-choropleth-contour-density-maps-in-d3-js-93e1fdbdc4e","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":15,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"file2017 = d3.csv(\"https://raw.githubusercontent.com/DiWu9812/DV_Data/main/US_Accidents_2017.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":33,"value":"file2018 = d3.csv(\"https://raw.githubusercontent.com/DiWu9812/DV_Data/main/US_Accidents_2018.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":310,"value":"date_count = {\n var date_cnt = {}\n for (var i=0; i {\n var hasValue = total.findIndex(current => { return current.state === cur.state});\n hasValue === -1 && total.push(cur);\n hasValue !== -1 && (total[hasValue].cnt = total[hasValue].cnt + cur.cnt, total[hasValue].sum = total[hasValue].sum + cur.sum);\n return total;\n }, []);\n item = item.map(d => {return {state:d.state, avg:d.sum/d.cnt}});\n return item;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":82,"value":"function UsStateChoropleth(data, {\n features = states,\n borders = statemesh,\n width = 975,\n height = 610,\n ...options\n} = {}) {\n return Choropleth(data, {features, borders, width, height, ...options});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":84,"value":"stateMap = new Map(states.features.map(d => [d.properties.name, d.id]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":86,"value":"stateData = d3.csv('https://raw.githubusercontent.com/jasonong/List-of-US-States/master/states.csv');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":88,"value":"stateAbbrLookup = {\n const obj = {};\n for (const item of stateData) {\n obj[item.Abbreviation] = item.State;\n }\n return obj;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":787,"value":"st_mesh = topojson.mesh(us_in, us_in.objects.states, (a, b) => a !== b)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":791,"value":"state = topojson.feature(us_in, us_in.objects.states)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":794,"value":"nation = topojson.feature(us_in, us_in.objects.nation)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":798,"value":"us_in = FileAttachment(\"us-counties-10m.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":90,"value":"import {states, statemesh, Choropleth, Legend} from \"@d3/choropleth\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":44,"value":"import {howto, altplot} from \"@d3/example-components\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":48,"value":"import {BarChart} from \"@d3/bar-chart\"\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":72,"value":"import {Histogram} from \"@d3/histogram\";\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":134,"value":"import {PieChart} from \"@d3/pie-chart\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":244,"value":"import {LineChart} from \"@d3/line-chart\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1003,"value":"chart2 = {\n const svg = d3.create('svg')\n .attr(\"width\", Width)\n .attr(\"height\",Height/2 + 20)\n\n if (chart_in.length == 0)\n return svg;\n else {\n if (chart_type == \"Histogram\"){\n var chart = Histogram(chart_in, {\n value: d => parseFloat(d),\n label: chart_choice,\n yLabel: \"accident Count\",\n width: Width,\n height: Height/2,\n // You can also add a variaty to decide the color by topic we zoom in here\n color: chart_color\n })\n }\n svg.node().appendChild(chart)\n\n var output = svg.append(\"g\")\n .attr(\"id\", \"graphtooltip\");\n output.append(\"text\")\n .attr(\"id\", \"outputText\")\n .attr(\"x\", Width / 2)\n .attr(\"y\", Height / 2 + 10)\n .attr(\"text-anchor\", \"left\")\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", \"11px\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"fill\", \"black\")\n .text(\"Move slider around to see accident count\");\n\n return svg\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2749,"value":"stepSize = 0.01","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1434,"value":"chart2.selectAll('rect')\n .filter(d => d.x0 <= chartSlider && d.x1 > chartSlider)\n .attr(\"fill\", 'red')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1450,"value":"chart2.selectAll('rect').filter(d => d.x1 <= chartSlider || d.x0 > chartSlider).attr(\"fill\", chart_color)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2598,"value":"d3.select(\"#outputText\")\n .text(`Number of Accidents is ${state_select ? \n chart2.selectAll('rect')\n .filter(d => d.x0 <= chartSlider && d.x1 > chartSlider)\n ._groups[0][0]\n .__data__.length: \"waiting for user to select a state\"\n }`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2980,"value":"prevSliderValue = {\n if (state_select){\n \n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3009,"value":"mutable prevStateSelect = \"\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2693,"value":"sliderMax = dim_max;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2725,"value":"sliderMin = dim_min;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":800,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":818,"value":"us = {\n const us = await d3.json(\"https://cdn.jsdelivr.net/npm/us-atlas@3/states-albers-10m.json\");\n const states = topojson.feature(us, us.objects.states);\n const mesh = topojson.mesh(us, us.objects.states);\n\n return { states, mesh };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":820,"value":"projection = d3.geoIdentity().fitSize([Width*0.95,Height*0.95], us.states)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":822,"value":"path = d3.geoPath().projection(projection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":834,"value":"// For reading the vector map\ntopojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":836,"value":"myStyles = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1164,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":728,"value":"file2017","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":827,"value":"Width = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":829,"value":"Height = 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":928,"value":"#### Input Data for US Map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":936,"value":"// used to show the name of map\nmutable map_in_name = \"Count of Traffic Accidents by U.S. States\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1083,"value":"map_choice = \"Severity\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1403,"value":"func_choice = \"count\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1405,"value":"cond_choice = filter","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1393,"value":"function input_function(choice, in_dim, cond) {\n if (choice == \"avg\") return state_avg(in_dim);\n if (choice == \"count\") return state_acci_cnt(in_dim,cond);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":840,"value":"// an example of data processing in the way of getting average value by map_choice\n// you can try writing another function to get sum of accidents by map_choice\nfunction state_avg(in_dim) {\n var cnt = [];\n for (var i=0; i {\n var hasValue = total.findIndex(current => { return current.state === cur.state});\n hasValue === -1 && total.push(cur);\n hasValue !== -1 && (total[hasValue].cnt = total[hasValue].cnt + cur.cnt, total[hasValue].sum = total[hasValue].sum + cur.sum);\n return total;\n }, []);\n item = item.map(d => {return {state:d.state, avg:d.sum/d.cnt}});\n var set = {};\n for (var i=0; i max)\n max = map_in[key];\n return max\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1150,"value":"choice_min = {\n var min = map_in[Object.keys(map_in)[0]];\n for (var key in map_in)\n if (map_in[key] < min)\n min = map_in[key];\n return min\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1112,"value":"// choice of color plan\ncolor_plan = {\n if (map_choice == \"Severity\")\n return d3.interpolateOranges;\n if (map_choice == \"Temperature(F)\")\n return d3.interpolateBlues;\n return d3.interpolateBlues;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1383,"value":"legend_title = {\n if (func_choice == \"avg\") return map_choice;\n return \"Count\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":934,"value":"#### Input Data for the Second Chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":843,"value":"// this is the state we select in the map\nmutable state_select = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1074,"value":"// hint the choice of the second chart\n//chart_choice = \"Temperature(F)\"\nchart_choice = chartChoice","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1053,"value":"// used to show the name of the second chart\nchart_name = {\n if (state_select)\n return \"Chart of Accident by \"+ chart_choice +\" in State \"+state_select;\n else\n return\"Please Select a State and Your Choice to Zoom In\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":910,"value":"// clean the input data\n// here the way is for histogram, maybe there's another way for another kind of chart\nfunction clean_chart_data(input, cond) {\n var data = []\n for (var i=0; i < file2017.length; i++){\n if (file2017[i].State == state_select){\n if (func_choice == \"count\" && cond.includes(file2017[i][map_choice]))\n data.push(file2017[i][input]);\n else if (func_choice == \"avg\")\n data.push(file2017[i][input]);\n }\n }\n return data\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":924,"value":"// input data\nchart_in = clean_chart_data(chart_choice, cond_choice)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1116,"value":"// You can add other choice of charts\nchart_type = \"Histogram\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1199,"value":"chart_color = {\n if (chart_choice == \"Temperature(F)\")\n return \"rgb(250,200,150)\";\n if (chart_choice == \"Humidity(%)\")\n return \"rgb(100,230,230)\";\n if (chart_choice == \"Visibility(mi)\")\n return \"rgb(150,150,150)\";\n if (chart_choice == \"Pressure(in)\")\n return \"rgb(250,200,250)\";\n if (chart_choice == \"Wind_Chill(F)\")\n return \"rgb(180,200,255)\";\n if (chart_choice == \"Wind_Speed(mph)\")\n return \"rgb(200,200,255)\";\n return \"rgb(100,200,250)\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2859,"value":"dim_min = {\n var min = parseFloat(file2017[0][chart_choice]);\n for (var i=0; i < file2017.length; i++)\n if (min > parseFloat(file2017[i][chart_choice]))\n min = parseFloat(file2017[i][chart_choice]);\n return min;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2869,"value":"dim_max = {\n var max = parseFloat(file2017[0][chart_choice]);\n for (var i=0; i < file2017.length; i++)\n if (max < parseFloat(file2017[i][chart_choice]))\n max = parseFloat(file2017[i][chart_choice]);\n return max;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2e:"$2d:body"