30:T4cb,DistrictBar = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, disheight]); svg .append("text") .attr('transform', `translate(${width / 2}, 20)`) .style('text-anchor', 'middle') .style('font-size', '20px') .style('font-weight', 'bold') .text('Crime Count By District'); svg .append("g") .attr("fill", "steelblue") .selectAll("rect") .data(District) .join("rect") .attr("x", disx(0)) .attr("y", (d, i) => disy(i)) .attr("width", d => disx(d.value) - disx(0)) .attr("height", disy.bandwidth()); svg .append("g") .attr("fill", "white") .attr("text-anchor", "end") .attr("font-family", "sans-serif") .attr("font-size", 12) .selectAll("text") .data(District) .join("text") .attr("x", d => disx(d.value)) .attr("y", (d, i) => disy(i) + disy.bandwidth() / 2) .attr("dy", "0.35em") .attr("dx", -4) .text(d => disformat(d.value)) .call(text => text .filter(d => disx(d.value) - disx(0) < 20) .attr("dx", +4) .attr("fill", "black") .attr("text-anchor", "start") ); svg.append("g").call(disxAxis); svg.append("g").call(disyAxis); return svg.node(); }31: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; }32:[{"id":"09e44c63e33096d2af261a1636224ae37cfb83e306e1babba9c31b0e0563f91552b266c7038f743dbce121244d75fa88e52a36e3fb3776e16764082063b8a2db","href":"https://static.observableusercontent.com/files/09e44c63e33096d2af261a1636224ae37cfb83e306e1babba9c31b0e0563f91552b266c7038f743dbce121244d75fa88e52a36e3fb3776e16764082063b8a2db","name":"SeattleCalls.csv","type":"text/csv","lastModified":1591303649431.56,"size":2289204},{"id":"96771286fa551ae57b7bef62c71c38b3d1334370ecb74288d33444a86d7cfedc5636e91dedb087c7d610470575b594ad42285e0ec30eff2aeefd0da916c2794e","href":"https://static.observableusercontent.com/files/96771286fa551ae57b7bef62c71c38b3d1334370ecb74288d33444a86d7cfedc5636e91dedb087c7d610470575b594ad42285e0ec30eff2aeefd0da916c2794e","name":"festivals.csv","type":"text/csv","lastModified":1591308521255.188,"size":7902},{"id":"782be7aa2c741a3c34220f0d6574a12af29a2fd6e3f21a02e6476fc3582561d80f0523dbf86aece1d18a123a82a2036891991b459d44088c14bb48165fe3ea63","href":"https://static.observableusercontent.com/files/782be7aa2c741a3c34220f0d6574a12af29a2fd6e3f21a02e6476fc3582561d80f0523dbf86aece1d18a123a82a2036891991b459d44088c14bb48165fe3ea63","name":"weather_for_bar@1.csv","type":"text/csv","lastModified":1591316781316.165,"size":268},{"id":"2fb5f524c597fd3793fba1d7e61c513aca8b39d60b677629d470037f0db323d08dc52497ec4e3af4ed95120a27ef789edfdcd1eb364b2034ff2fb768af9ece0a","href":"https://static.observableusercontent.com/files/2fb5f524c597fd3793fba1d7e61c513aca8b39d60b677629d470037f0db323d08dc52497ec4e3af4ed95120a27ef789edfdcd1eb364b2034ff2fb768af9ece0a","name":"Airbnb_Cleaned.csv","type":"text/csv","lastModified":1591302030175.402,"size":1432106},{"id":"666b3f949c51743bd4689a2f5e2e4b84dec3a66de7790b91b297ae9ea5e3fa3530ad69eb0b028b13fb02cb75de4dab71b6aba8b38ce2e80ac8cfee189b38d314","href":"https://static.observableusercontent.com/files/666b3f949c51743bd4689a2f5e2e4b84dec3a66de7790b91b297ae9ea5e3fa3530ad69eb0b028b13fb02cb75de4dab71b6aba8b38ce2e80ac8cfee189b38d314","name":"weather-1.csv","type":"text/csv","lastModified":1591302015719.448,"size":47838}] 2e:{"title":"Final Workbook","cells":[{"id":0,"value":"md`# Final Workbook`","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"md`## Introduction`","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"md`We are passionate travelers, so we are trying to visualize some important aspects of travel planning. So for this project, we are interested in presenting a Seattle Guide for travelers!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"md`\n---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"md`\n

Load Datasets

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"md`### Airbnb Dataset`","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"SeattleLiving = d3.csvParse(await FileAttachment(\"Airbnb_Cleaned.csv\").text())","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"md`### Weather Dataset`","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"weather2012to2015 = d3.csvParse(\n await FileAttachment(\"weather-1.csv\").text(),\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":509,"value":"weather_for_bar = d3.csvParse(\n await FileAttachment(\"weather_for_bar@1.csv\").text(),\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"uniqueWeather = _.uniqBy(weather2012to2015, d => d.weather).map(d => d.weather)","pinned":false,"hidden":false,"mode":"ojs"},{"id":174,"value":"formatutc = d3.timeParse(\"%Y/%m/%d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"Months = [\n \"January\",\n \"February\",\n \"March\",\n \"April\",\n \"May\",\n \"June\",\n \"July\",\n \"August\",\n \"September\",\n \"October\",\n \"November\",\n \"December\"\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":224,"value":"weatherData = weather2012to2015.map(d => {\n // For each _group_, compute the following values\n return {\n year: formatutc(d.date).getFullYear(),\n month: Months[formatutc(d.date).getMonth()],\n weather: d.weather\n };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"md`### Crime Dataset`","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"SeattleSafety = d3.csvParse(await FileAttachment(\"SeattleCalls.csv\").text())","pinned":false,"hidden":false,"mode":"ojs"},{"id":731,"value":"SeattleSafety.slice(9999, 10001)","pinned":true,"hidden":false,"mode":"ojs"},{"id":711,"value":"md`\n---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":702,"value":"md`\n

Work

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":339,"value":"map = {\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n\n const tile = d3\n .tile()\n .extent([[0, 0], [width, height]])\n .tileSize(512)\n .clampX(false);\n\n const zoom = d3\n .zoom()\n .scaleExtent([1 << 8, 1 << 22])\n .extent([[0, 0], [width, height]])\n .on(\"zoom\", () => zoomed(d3.event.transform));\n\n let image = svg\n .append(\"g\")\n .attr(\"pointer-events\", \"none\")\n .selectAll(\"image\");\n\n svg\n .call(zoom)\n .call(\n zoom.transform,\n d3.zoomIdentity.translate(width >> 1, height >> 1).scale(1 << 12)\n );\n\n function zoomed(transform) {\n const tiles = tile(transform);\n\n image = image\n .data(tiles, d => d)\n .join(\"image\")\n .attr(\"xlink:href\", d => url(...d3.tileWrap(d)))\n .attr(\"x\", ([x]) => (x + tiles.translate[0]) * tiles.scale)\n .attr(\"y\", ([, y]) => (y + tiles.translate[1]) * tiles.scale)\n .attr(\"width\", tiles.scale)\n .attr(\"height\", tiles.scale);\n }\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":343,"value":"initialCenter = [-122.340700, 47.606925]","pinned":true,"hidden":false,"mode":"ojs"},{"id":641,"value":"initialScale = 1 << 18","pinned":true,"hidden":false,"mode":"ojs"},{"id":150,"value":"kingCountyTopojson = await d3.json(\n 'https://raw.githubusercontent.com/Ryshackleton/d3_maptime_III/master/public_webserver_files/data/king_county_census_tracts.json'\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":330,"value":"url = (x, y, z) =>\n `https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/${z}/${x}/${y}${\n devicePixelRatio > 1 ? \"@2x\" : \"\"\n }?access_token=pk.eyJ1IjoibWJvc3RvY2siLCJhIjoiY2s5ZWRlbTM4MDE0eDNocWJ2aXR2amNmeiJ9.LEyjnNDr_BrxRmI4UDyJAQ`","pinned":true,"hidden":false,"mode":"ojs"},{"id":705,"value":"md`\n---\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"dis = {\n var result = [];\n for (var i = 0; i < SeattleSafety.length; i++) {\n var temp = d3.map(SeattleSafety[i]);\n var cur = d3.values(temp);\n var str = cur[9];\n if (str.length === 1 && str.match(/[a-z]/i)) {\n result.push(str);\n } else {\n result.push('Other');\n }\n }\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":301,"value":"dist = _.countBy(dis)","pinned":false,"hidden":false,"mode":"ojs"},{"id":354,"value":"dkey = d3.keys(dist)","pinned":false,"hidden":false,"mode":"ojs"},{"id":356,"value":"dval = d3.values(dist)","pinned":false,"hidden":false,"mode":"ojs"},{"id":370,"value":"District = {\n var result = [];\n for (var i = 0; i < dkey.length; i++) {\n var temp = { name: dkey[i], value: dval[i] };\n result.push(temp);\n }\n return result.sort((a, b) => d3.descending(a.value, b.value));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":789,"value":"import { chart as DistrictfreqBar } with {\n data as District\n} from '@d3/bar-chart'","pinned":false,"hidden":false,"mode":"ojs"},{"id":797,"value":"DistrictfreqBar","pinned":false,"hidden":false,"mode":"ojs"},{"id":708,"value":"md`\n---\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":401,"value":"disformat = disx.tickFormat(20, District.format)","pinned":false,"hidden":false,"mode":"ojs"},{"id":403,"value":"disx = d3\n .scaleLinear()\n .domain([0, d3.max(District, d => d.value)])\n .range([dismargin.left, width - dismargin.right])","pinned":true,"hidden":false,"mode":"ojs"},{"id":411,"value":"disy = d3\n .scaleBand()\n .domain(d3.range(District.length))\n .rangeRound([dismargin.top, disheight - dismargin.bottom])\n .padding(0.1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":414,"value":"disxAxis = g =>\n g\n .attr(\"transform\", `translate(0,${dismargin.top})`)\n .call(d3.axisTop(disx).ticks(width / 80, District.format))\n .call(g => g.select(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs"},{"id":416,"value":"disyAxis = g =>\n g.attr(\"transform\", `translate(${dismargin.left},0)`).call(\n d3\n .axisLeft(disy)\n .tickFormat(i => District[i].name)\n .tickSizeOuter(0)\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":418,"value":"disbarHeight = 25","pinned":false,"hidden":false,"mode":"ojs"},{"id":420,"value":"disheight = Math.ceil((District.length + 0.1) * disbarHeight) +\n dismargin.top +\n dismargin.bottom","pinned":false,"hidden":false,"mode":"ojs"},{"id":426,"value":"dismargin = ({ top: 50, right: 0, bottom: 10, left: 40 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":395,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":481,"value":"md`These links need to be included in the writeup\n1. https://www.seattle.gov/police/information-and-data/tweets-by-beat\n2. https://seattle.findwell.com/seattle-neighborhoods/`","pinned":false,"hidden":false,"mode":"ojs"},{"id":698,"value":"md`\n---\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":269,"value":"md`When's the best time to visit Seattle?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"md`While this question could be differnt by people, we generally love to go out in a good weather. So visualizing weather could provide some help`","pinned":false,"hidden":false,"mode":"ojs"},{"id":559,"value":"swatches({ color: color_weather_bar })","pinned":false,"hidden":false,"mode":"ojs"},{"id":537,"value":"Stacked_weather_chart = {\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n\n svg\n .append(\"g\")\n .selectAll(\"g\")\n .data(series)\n .join(\"g\")\n .attr(\"fill\", d => color_weather_bar(d.key))\n .selectAll(\"rect\")\n .data(d => d)\n .join(\"rect\")\n .attr(\"x\", (d, i) => x_weather_bar(d.data.months))\n .attr(\"y\", d => y_weather_bar(d[1]))\n .attr(\"height\", d => y_weather_bar(d[0]) - y_weather_bar(d[1]))\n .attr(\"width\", x_weather_bar.bandwidth())\n .append(\"title\")\n .text(\n d => `${d.data.months} ${d.key}\n${formatValue(d.data[d.key])}`\n );\n\n svg.append(\"g\").call(xAxis);\n\n svg.append(\"g\").call(yAxis);\n\n //append title\n svg\n .append(\"text\")\n .attr('transform', `translate(${width / 2}, ${50 / 2})`)\n .style('text-anchor', 'middle')\n .style('font-size', '20px')\n .style('font-weight', 'bold')\n .text('average weather from 2015-2019');\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":623,"value":"md`As we can see, May - September are mostly sunny. Choose a season you would like to visit Seattle, and we can share more events based on that! `","pinned":false,"hidden":false,"mode":"ojs"},{"id":586,"value":"md`\n---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":570,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":590,"value":"md`### General`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"import { select } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"import {\n displayCaution,\n code_styles,\n render_data_table\n} from \"@info474/utilities\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"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"},{"id":19,"value":"d3 = require(\"d3@5\", \"d3-array@2\", \"d3-tile@1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"// Require the lodash package\n_ = require(\"lodash\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"md`### Graphs`","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"d3format = require(\"d3-format@1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"formatTime = d3.timeFormat(\"%Y/%m/%d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"// Format the decimals (2 places)\nformatDecimal = d3.format(\".2f\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"md`### Visuals`","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"margin = ({ top: 40, right: 30, bottom: 40, left: 70 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":429,"value":"width2 = 900","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":549,"value":"import { legend } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":557,"value":"import { swatches } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":595,"value":"md`### Weather - stacked bar chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":600,"value":"series = d3\n .stack()\n .keys(weather_for_bar.columns.slice(1))(weather_for_bar)\n .map(d => (d.forEach(v => (v.key = d.key)), d))","pinned":false,"hidden":false,"mode":"ojs"},{"id":603,"value":"x_weather_bar = d3\n .scaleBand()\n .domain(weather_for_bar.map(d => d.months))\n .range([margin.left, width - margin.right])\n .padding(0.1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":606,"value":"y_weather_bar = d3\n .scaleLinear()\n .domain([0, d3.max(series, d => d3.max(d, d => d[1]))])\n .rangeRound([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":609,"value":"color_weather_bar = d3\n .scaleOrdinal()\n .domain(series.map(d => d.key))\n .range(d3.schemeSpectral[series.length])\n .unknown(\"#ccc\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":612,"value":"xAxis = g =>\n g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x_weather_bar).tickSizeOuter(0))\n .call(g => g.selectAll(\".domain\").remove())","pinned":false,"hidden":false,"mode":"ojs"},{"id":615,"value":"yAxis = g =>\n g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y_weather_bar).ticks(null, \"s\"))\n .call(g => g.selectAll(\".domain\").remove())","pinned":false,"hidden":false,"mode":"ojs"},{"id":618,"value":"formatValue = x => (isNaN(x) ? \"N/A\" : x.toLocaleString(\"en\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":684,"value":"md`### Crime`","pinned":false,"hidden":false,"mode":"ojs"},{"id":808,"value":"SeattleSafety","pinned":false,"hidden":false,"mode":"ojs"},{"id":281,"value":"weatherData.columns","pinned":false,"hidden":false,"mode":"ojs"},{"id":688,"value":"md`### Festivals`","pinned":false,"hidden":false,"mode":"ojs"},{"id":680,"value":"festivals = d3.csvParse(await FileAttachment(\"festivals.csv\").text())","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"code_styles","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}