30: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; }31:[{"id":"09e44c63e33096d2af261a1636224ae37cfb83e306e1babba9c31b0e0563f91552b266c7038f743dbce121244d75fa88e52a36e3fb3776e16764082063b8a2db","href":"https://static.observableusercontent.com/files/09e44c63e33096d2af261a1636224ae37cfb83e306e1babba9c31b0e0563f91552b266c7038f743dbce121244d75fa88e52a36e3fb3776e16764082063b8a2db","name":"SeattleCalls.csv","type":"text/csv","lastModified":1591388900610.271,"size":2289204}] 2e:{"title":"Google Map","cells":[{"id":0,"value":"md`# Google Map`","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":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":713,"value":"crimeChart = {\n let div = html`

`;\n\n const mapHolder = [0];\n\n // Like Leaflet and Mapbox GL JS, Google Maps is very picky about\n // needing to be initialized on a div that's already included\n // in the page. So I yield the div first, to establish it in\n // the page.\n yield div;\n let map = new google.maps.Map(div, {\n center: { lng: -122.340700, lat: 47.606925 },\n zoom: 10\n });\n mapHolder[0] = map;\n\n points.map(\n p =>\n new google.maps.Marker({\n position: { lng: p.x, lat: p.y },\n map: mapHolder[0]\n })\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":343,"value":"initialCenter = [-122.340700, 47.606925]","pinned":true,"hidden":false,"mode":"ojs"},{"id":641,"value":"google = require('https://maps.googleapis.com/maps/api/js?key=AIzaSyB4JQkUKSUqHQmteJ5xdk4RdrFqHi04hdg').catch(\n () => window.google\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":686,"value":"formatTime1 = d3.timeParse(\"%m/%d/%Y %I:%M:%S %p\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":673,"value":"points = SeattleSafety.filter(\n d => formatTime1(d[\"Event Clearance Date\"]).getFullYear() == \"2016\"\n).map(d => {\n return {\n x: +d.Longitude,\n y: +d.Latitude\n };\n})","pinned":true,"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":586,"value":"md`\n---`","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":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"md`### Graphs`","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"$30","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":true,"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":true,"hidden":false,"mode":"ojs"},{"id":621,"value":"md`### Crime`","pinned":true,"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":"$W31","stdlib":"1","titling":"auto"}