36:null 37:["$","title",null,{"children":"Part 2: Exploratory Data Analysis | Spring 2020 Info Vis | Observable"}] 3d:T573,chart2 = { const svg = d3.create('svg').attr('viewBox', [0, 0, 600, height]); // Append x axis svg .append('g') .attr("transform", `translate(0,${height - 50})`) .call(xScaleAxis) .selectAll("text") .attr("y", 5) .attr("x", 3) .attr("dy", ".35em") .attr("transform", "rotate(40)") .style("text-anchor", "start"); //append y axis const yAxis = d3.axisLeft().scale(bar_yScale); svg .append('g') .attr('transform', 'translate(' + 50 + ',0)') .call(yAxis); //append title svg .append("text") .attr('transform', `translate(${width / 2}, ${50 / 2})`) .style('text-anchor', 'middle') .style('font-size', '20px') .style('font-weight', 'bold') .text(choice + ' Data in ' + choiceYear); // Add the data rectangles/bars svg .selectAll('rect') .data(summary_by_year) .join(enter => enter.append('rect')) .attr('x', d => scaleBand(d.key)) .attr('y', d => bar_yScale(d.value.avg_price)) .attr('width', scaleBand.bandwidth()) .attr('height', 0) .attr('fill', '#F34F1C'); //add animation svg .selectAll("rect") .transition() .duration(2000) .attr('y', d => bar_yScale(d.value[choice])) .attr('height', d => bar_yScale(0) - bar_yScale(d.value[choice])) .delay(function(d, i) { //console.log(i); return i * 10; }); return svg.node(); }3e:T8e1,function input(config) { let { form, type = "text", attributes = {}, action, getValue, title, description, format, display, submit, options } = config; const wrapper = html`

`; if (!form) form = html``; Object.keys(attributes).forEach(key => { const val = attributes[key]; if (val != null) form.input.setAttribute(key, val); }); if (submit) form.append( html`` ); form.append( html`` ); if (title) form.prepend( html`

${title}

` ); if (description) form.append( html`

${description}

` ); if (format) format = typeof format === "function" ? format : d3format.format(format); if (action) { action(form); } else { const verb = submit ? "onsubmit" : type == "button" ? "onclick" : type == "checkbox" || type == "radio" ? "onchange" : "oninput"; form[verb] = e => { e && e.preventDefault(); const value = getValue ? getValue(form.input) : form.input.value; if (form.output) { const out = display ? display(value) : format ? format(value) : value; if (out instanceof window.Element) { while (form.output.hasChildNodes()) { form.output.removeChild(form.output.lastChild); } form.output.append(out); } else { form.output.value = out; } } form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; if (verb !== "oninput") wrapper.oninput = e => e && e.stopPropagation() && e.preventDefault(); if (verb !== "onsubmit") form.onsubmit = e => e && e.preventDefault(); form[verb](); } while (form.childNodes.length) { wrapper.appendChild(form.childNodes[0]); } form.append(wrapper); return form; }3f:[{"id":"2fb5f524c597fd3793fba1d7e61c513aca8b39d60b677629d470037f0db323d08dc52497ec4e3af4ed95120a27ef789edfdcd1eb364b2034ff2fb768af9ece0a","href":"https://static.observableusercontent.com/files/2fb5f524c597fd3793fba1d7e61c513aca8b39d60b677629d470037f0db323d08dc52497ec4e3af4ed95120a27ef789edfdcd1eb364b2034ff2fb768af9ece0a","name":"Airbnb_Cleaned.csv","type":"text/csv","lastModified":1589491960256.5,"size":1432106},{"id":"666b3f949c51743bd4689a2f5e2e4b84dec3a66de7790b91b297ae9ea5e3fa3530ad69eb0b028b13fb02cb75de4dab71b6aba8b38ce2e80ac8cfee189b38d314","href":"https://static.observableusercontent.com/files/666b3f949c51743bd4689a2f5e2e4b84dec3a66de7790b91b297ae9ea5e3fa3530ad69eb0b028b13fb02cb75de4dab71b6aba8b38ce2e80ac8cfee189b38d314","name":"weather@1.csv","type":"text/csv","lastModified":1589587541748.103,"size":47838}] 3b:{"id":"68aaf593cf27a1ee","slug":"part-2-exploratory-data-analysis/6","title":"Part 2: Exploratory Data Analysis","thumbnail":"8699f38a68c3ccc90daa5ac74bc6419ed4f0eec14f674786cfe8baaf79615447","access_level":"public","create_time":"$D2020-05-14T21:18:48.590Z","update_time":"$D2020-06-04T21:13:32.519Z","view_time":null,"first_public_time":"$D2020-06-05T20:47:37.342Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"d534f9cbd78a5d1b","login":"info474","name":"Spring 2020 Info Vis","avatar_url":"https://avatars-next.observableusercontent.com/bc5856eb18c3c3e1af37bf9d0984feaa59a0adac48ed6171d34157997208d12d","tier":"education_2026","bio":"UW iSchool Course INFO 474: focused on designing and building visualizations to better understand and communicate about pressing issues. ","following":false},"version":1419,"publish_version":1419,"role":null,"authored":false,"authors":[{"type":"individual","id":"b842461f1ec8fb59","login":"kevins99","name":"Zikai Song","avatar_url":"https://avatars-next.observableusercontent.com/f3859901552d92610df8968966fb9cbbac84c5acd3f904371647add5ee93c153","tier":null,"bio":"","following":false}],"members":[{"type":"team","id":"d534f9cbd78a5d1b","login":"info474","name":"Spring 2020 Info Vis","avatar_url":"https://avatars-next.observableusercontent.com/bc5856eb18c3c3e1af37bf9d0984feaa59a0adac48ed6171d34157997208d12d","tier":"education_2026","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Part 2: Exploratory Data Analysis","cells":[{"id":0,"value":"md`# Part 2: Exploratory Data Analysis`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":876,"value":"md`# Loading Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"md`### Airbnb Dataset`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"SeattleLiving = d3.csvParse(await FileAttachment(\"Airbnb_Cleaned.csv\").text())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":803,"value":"md`### Weather Dataset`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":798,"value":"weather2012to2015 = d3.csvParse(await FileAttachment(\"weather@1.csv\").text())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"md`\n---\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`# Statistical Testing`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1042,"value":"md `\n### Summary Statistics (Airbnb)\n- The most expensive Airbnb costed **${extentPrice[1]}** dollars and the cheapest Airbnb in Seattle costed **${extentPrice[0]}** dollars.\n- The average price of an Airbnb located in Seattle is **${formatDecimal(meanPrice)}** dollars.\n- The lowest rating in the list of ${SeattleLiving.length} Airbnb was **${\n extentSatisfaction[0]\n}**, and the highest rating was **${extentSatisfaction[1] +\n \".0\"}** as the scale was from 0 to 5.0.\n- The overall mean satisfaction was **${formatDecimal(\n meanSatisfaction\n)}** out of 5.0!\n- The overall mean satisfaction was **${formatDecimal(\n meanSatisfaction\n)}** out of 5.0!\n- The standard deviation of the prices of Airbnbs in Seattle is **${formatDecimal(\n sdPrice\n)}** dollars.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":482,"value":"md`\n### Summary Statistics (Weather)\n- The highest temperature in Seattle over the span of ${\n weather2012to2015.length\n} days was **${extentMaxTemp[1]} C \n(96.08 F)**, and the lowest was **${extentMinTemp[0]} C (19.22 F)**.\n- The mean of the max temperature was **${formatDecimal(MeanMaxTemp)} C**.\n- The mean of the lowest temperature was **${formatDecimal(\n MeanMinTemp\n)} C (46.81 F)**.\n- The average wind speed was **${formatDecimal(MeanWind)}**.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"md`\n---\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":732,"value":"md`# Relationship Of Variables`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":781,"value":"md`\n### Scatter Plot (Continuous vs Continuous)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"viewof roomtype = select([\"Entire home/apt\", \"Private room\", \"Shared room\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"chart = {\n const div = d3.create(\"div\");\n\n const chart = div\n .append(\"div\")\n .data(room_type_data.filter(d => d.key == [roomtype]))\n .call(drawChart);\n\n return div.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":844,"value":"md`\n### Summary: \nWith our scatterplot, you can select the room types (an entire apartment/house, a private room, or a shared room)from the drop down and see the correlation between price and the overall satisfaction level of the visitors. There were more entries for renting out entire homes/apartments compared to the other room types. This scatterplot can help us see which type of rooms are most popular and generate the most overall satisfaction which can help our research by letting us know which type of Airbnbs are most popular. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":776,"value":"md`\n---\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1123,"value":"md`\n### Multi-Line Chart (Continuous vs Categorical)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":779,"value":"mlgraph","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1147,"value":"md`\n### Summary: \nWith our multi-line chart, you can compare the differences between the max temperatures and min temperatures over the course of a few years in Seattle, Washington. Our chart notifies viewers of the different years and months via our x-axis. On the y-axis is the temperature in Celcius. As you can see the peak temperature is around ~35 C which is 95 degrees fahrenheit. The lowest temperature recorded is around ~-6 C, when converted, is around 21 degrees F. In addition, we add hover interaction to make the graph more appealing. With this visualization, it can tell us which months had the highest or lowest temperature which will help us in our reserach by letting us know when the best timing to visit Washington State. Since some people may prefer Washington's infamous rainy days or some may just want high temperatures, we can make predictions from this visualization. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"md`\n---\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"md`# Distribution Of Variables`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"md`\n## Histogram (Continuous)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":999,"value":"viewof choice = select([\"max_temp\", \"min_temp\", \"wind\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1005,"value":"viewof choiceYear = select([2012, 2013, 2014, 2015])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":943,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1391,"value":"md`\n### Summary: \nWith our histogram, we add selector for users to selector the dataset and time they want to look into. The histogram reflects the distribution of temperature in Seattle area for users to evaluate the temperature pattern for different times in the year. In addition, we add animation to the graph to make it more appealing. With this visualization, we can analyze the average temperature in said month over the years and make predictions for the future. This can help us answer which months is best to come to Washington State. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1144,"value":"md`\n---\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":785,"value":"md`\n## Circle Packing (Categorical)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":405,"value":"viewof priceSlider = slider({\n min: d3.min(SeattleLiving, d => +d.price),\n max: d3.max(SeattleLiving, d => +d.price),\n step: 10,\n value: 26,\n title: \"Maximum Airbnb Price\",\n description: \"Select Maximum price for Airbnb selection\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"circlePacking","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1165,"value":"md`\n### Summary: \nWith our circle-packing chart, you can select max price from the slider to filter based on price, and the graph will show you the grouping and distribution of airbnbs among different locations in Seattle. With this visualization it can help us answer our question as to which cities has the cheapest Airbnbs or the most expensive ones and how many in each city.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":750,"value":"md`\n---\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":758,"value":"md`# WORK`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1109,"value":"md`\n## Scatter Plot\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"SeattleLiving2 = SeattleLiving.map(d => ({\n x: +d.price,\n y: +d.overall_satisfaction * +d.reviews,\n type: d.room_type\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"room_type_data = d3\n .nest()\n .key(d => d.type)\n .entries(SeattleLiving2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"x = d3\n .scaleLinear()\n .domain(d3.extent(SeattleLiving2, d => d.x))\n .range([margin.left, 600 - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1128,"value":"y = d3\n .scaleLinear()\n .domain(d3.extent(SeattleLiving2, d => d.y))\n .range([600 - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"tickFormatterx = d3.format(\"$.2s\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"tickFormattery = d3.format(\".2s\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"xAxis = g =>\n g\n .attr(\"transform\", `translate(0,${600 - margin.bottom})`)\n .call(d3.axisBottom(x).tickFormat(tickFormatterx))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"yAxis = g =>\n g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).tickFormat(tickFormattery))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"xLabel = ele =>\n ele\n .text(\"Price\")\n .attr(\"x\", (x.range()[1] - x.range()[0]) / 2 + 75)\n .attr(\"y\", 600 - margin.bottom + 50)\n .style('font-family', \"sans-serif\")\n .style(\"font-size\", '14px')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"yLabel = ele =>\n ele\n .text(\"Overall Satisfaction\")\n .attr(\"transform\", `translate(${margin.left - 40}, ${600 / 2})rotate(-90)`)\n .style(\"text-anchor\", \"middle\")\n .style('font-family', \"sans-serif\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"chartTitle = ele =>\n ele\n .text(d => d.key)\n .attr(\"transform\", `translate(${600 / 2}, ${20})`)\n .style(\"text-anchor\", \"middle\")\n .style('font-family', \"sans-serif\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"drawPoint = circle => {\n circle\n .attr(\"cx\", d => x(d.x))\n .attr(\"cy\", d => y(d.y))\n .attr(\"r\", 5)\n .style('opacity', 0.5);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"drawChart = ele => {\n const svg = ele\n .append(\"svg\")\n .style(\"height\", 625 + \"px\")\n .style(\"width\", 700 + \"px\");\n\n svg.append(\"g\").call(xAxis);\n svg.append(\"g\").call(yAxis);\n\n svg.append('text').call(xLabel);\n svg.append('text').call(chartTitle);\n svg.append('text').call(yLabel);\n\n svg\n .selectAll(\"circle\")\n .data(d => d.values)\n .join(\"circle\")\n .call(drawPoint);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1092,"value":"md`\n---\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1088,"value":"md`\n## Circle Packing\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":470,"value":"circlePacking_data = SeattleLiving.filter(d => d.price <= priceSlider)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":590,"value":"nested_data.map(d => {\n d.name = d.key;\n d.children = d.values.map(dd => {\n dd.name = dd.key;\n return dd;\n });\n return d;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"// Nest your data by type 1, then type 2\nnested_data = d3\n .nest()\n .key(d => d['address'])\n .key(a => a['room_type'])\n .entries(circlePacking_data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"value":"my_pack = data =>\n d3\n .pack()\n .size([width, height])\n .padding(3)(\n d3\n .hierarchy(\n { key: \"Greater Seattle Area\", values: nested_data },\n d => d.values\n )\n .sum(d => +d.bedrooms)\n .sort((a, b) => b.value - a.value)\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":866,"value":"import { chart as circlePacking } with {\n nested_data as data,\n my_pack as pack\n} from '@d3/zoomable-circle-packing'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1307,"value":"scaleBand.domain(\n weatherByYear.map(function(d) {\n return formatutc(d.date);\n })\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1084,"value":"md`\n---\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1100,"value":"md`\n## Histogram\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1026,"value":"weatherByYear = weather2012to2015.filter(\n d => formatutc(d.date).getFullYear() == choiceYear\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":919,"value":"// Create a nested data structure that has the min,max, and avg price for each PermitClass\nsummary_by_year = d3\n .nest() // create a nesting function\n .key(d => formatutc(d.date)) // Where we nest by the \"date\" value of each object\n .rollup(d => {\n // For each _group_, compute the following values\n return {\n max_temp: d3.max(d, dd => +dd.temp_max),\n min_temp: d3.min(d, dd => +dd.temp_min),\n wind: d3.max(d, dd => +dd.wind)\n };\n })\n .entries(weatherByYear) // Pass our data in as we create the function!","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1007,"value":"weatherdate2 = weather2012to2015.map(d => formatutc(d.date).getFullYear())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":852,"value":"scaleBand = d3\n .scaleBand()\n .domain(weatherByYear.map(d => formatutc(d.date)))\n .range([50, width])\n .padding(0.1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1298,"value":"xScaleAxis = d3\n .axisBottom(scaleBand)\n .tickFormat(d3.timeFormat(\"%Y/%m/%d\"))\n .tickValues(\n scaleBand.domain().filter(function(d, i) {\n return !(i % 15);\n })\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":929,"value":"bar_yScale = d3\n .scaleLinear()\n .domain([0, d3.max(summary_by_year.map(d => d.value[choice]))])\n .range([height - 50, 50])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1017,"value":"d3.extent(weather2012to2015.map(d => formatutc(d.date)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1081,"value":"md`\n---\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1106,"value":"md`\n## Multi-Line\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":525,"value":"mldata = {\n return {\n y: \"Seattle Weather\",\n series: [\n { name: \"Max_temp\", values: temp_max },\n { name: \"Min_temp\", values: temp_min }\n ],\n dates: weatherdate\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":585,"value":"temp_max = weather2012to2015.map(d => parseFloat(d.temp_max))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":705,"value":"temp_min = weather2012to2015.map(d => parseFloat(d.temp_min))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":717,"value":"weatherdate = weather2012to2015.map(d => formatutc(d.date))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":760,"value":"import { chart as mlgraph } with {\n mldata as data,\n mly as y\n} from '@d3/multi-line-chart'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":836,"value":"mly = d3\n .scaleLinear()\n .domain([\n d3.min(mldata.series, d => d3.min(d.values)),\n d3.max(mldata.series, d => d3.max(d.values))\n ])\n .nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":556,"value":"formatutc = d3.timeParse(\"%Y/%m/%d\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1103,"value":"md`\n---\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"md`## Statistical Testing \n** Seattle Airbnb **\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"// High/Low of OVERALL_SATISFACTION\nextentSatisfaction = d3.extent(SeattleLiving, d => +d.overall_satisfaction)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":372,"value":"// Mean of OVERALL_SATISFACTION\nmeanSatisfaction = d3.mean(SeattleLiving, d => +d.overall_satisfaction)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"// Avg PRICE of AirBnb\nmeanPrice = d3.mean(SeattleLiving, d => +d.price)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"// Standard Deviation of PRICE\nsdPrice = d3.deviation(SeattleLiving, d => +d.price)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"// Standard Deviation of OVERALL SATISFACTION\nsdSatisfaction = d3.deviation(SeattleLiving, d => +d.overall_satisfaction)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":474,"value":"// What is the price of the most expensive airbnb?\nextentPrice = d3.extent(SeattleLiving, d => +d.price)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":498,"value":"md`#### Weather`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":518,"value":"MeanMaxTemp = d3.mean(weather2012to2015, d => +d.temp_max)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":538,"value":"MeanMinTemp = d3.mean(weather2012to2015, d => +d.temp_min)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":521,"value":"extentMaxTemp = d3.extent(weather2012to2015, d => +d.temp_max)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":530,"value":"extentMinTemp = d3.extent(weather2012to2015, d => +d.temp_min)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":541,"value":"sdMaxTemp = d3.deviation(weather2012to2015, d => +d.temp_max)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":546,"value":"sdMinTemp = d3.deviation(weather2012to2015, d => +d.temp_min)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":550,"value":"MeanWind = d3.mean(weather2012to2015, d => +d.wind)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":555,"value":"extentWind = d3.extent(weather2012to2015, d => +d.wind)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":767,"value":"md`\n---\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1182,"value":"md`### General`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"import { select } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"import {\n displayCaution,\n code_styles,\n render_data_table\n} from \"@info474/utilities\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"d3 = require(\"d3@5\", \"d3-array@2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"// Require the lodash package\n_ = require(\"lodash\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1185,"value":"md`### Graphs`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":412,"value":"function slider(config = {}) {\n let {\n min = 0,\n max = 1,\n value = (max + min) / 2,\n step = \"any\",\n precision = 2,\n title,\n description,\n disabled,\n getValue,\n format,\n display,\n submit\n } = typeof config === \"number\" ? { value: config } : config;\n precision = Math.pow(10, precision);\n if (!getValue)\n getValue = input => Math.round(input.valueAsNumber * precision) / precision;\n return input({\n type: \"range\",\n title,\n description,\n submit,\n format,\n display,\n attributes: { min, max, step, disabled, value },\n getValue\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":425,"value":"d3format = require(\"d3-format@1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":409,"value":"formatTime = d3.timeFormat(\"%Y/%m/%d\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":504,"value":"// Format the decimals (2 places)\nformatDecimal = d3.format(\".2f\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1190,"value":"md`### Visuals`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"margin = ({ top: 40, right: 30, bottom: 40, left: 70 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"width = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":644,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"code_styles","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1073,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3f","stdlib":"1"}} 3c:"$3b:body"