27:null 28:["$","title",null,{"children":"230208_SYD | Anish De | Observable"}] 2d:T1794,chart = { const width = 400, height = 450; const svg = d3.create("svg") .attr("viewBox", [50, 0, width-100, height-100]); // Use Mercator projection var projection = d3 .geoMercator() .fitSize([width - 50, height - 50], SYDbox); var path1 = d3.geoPath().projection(projection); var path2 = d3.geoPath().projection(projection); var path3 = d3.geoPath().projection(projection); var path4 = d3.geoPath().projection(projection); var path5 = d3.geoPath().projection(projection); var g = svg.append("g").attr("id", "paths"); //i'm not using the boundary lines, so I'm going to comment them out /* g.selectAll("path1") //d3 geopath .data(boundary.features) //get data to define path .enter() //there are more data than elements, this selects them .append("path") //appends path to data .attr('class','outlines') .attr("d", path1) //The d attribute defines a path to be drawn, only applies to appended elements .style("fill", "none") .style('stroke-opacity','1') .style("stroke-width", '.5') .style("stroke", "rgb(0,0,0)") */ g.selectAll("path4") //d3 geopath .data(SYDwater.features) //get data to define path .enter() //there are more data than elements, this selects them .append("path") //appends path to data .attr('class','outlines') .attr("d", path4) //The d attribute defines a path to be drawn, only applies to appended elements .style('fill', 'lavender') .style("fill-opacity", ".6") .style('stroke-opacity','.4') .style("stroke-width", '.25') .style('stroke', 'black') g.selectAll("path4") //d3 geopath .data(SYDbuildings.features) //get data to define path .enter() //there are more data than elements, this selects them .append("path") //appends path to data .attr('class','outlines') .attr("d", path3) //The d attribute defines a path to be drawn, only applies to appended elements .style('fill', 'lightblue') .style("fill-opacity", ".6") .style('stroke-opacity','.4') .style("stroke-width", '.25') .style('stroke', 'steelblue') g.selectAll("path5") //d3 geopath .data(SYDroads.features) //get data to define path .enter() //there are more data than elements, this selects them .append("path") //appends path to data .attr('class','outlines') .attr("d", path2) //The d attribute defines a path to be drawn, only applies to appended elements .style("fill", "none") .style('stroke-opacity','.4') .style("stroke-width", '.3') .style('stroke', 'dodgerblue') var c = svg.selectAll("circle") //d3 geopath .data(SYDspots) .enter() //there are more data than elements, this selects them .append("circle") //appends path to data .attr("cx", function(d) {return projection([d.LONG,d.LAT])[0]}) .attr("cy", function(d) {return projection([d.LONG,d.LAT])[1]}) .attr('r', 3) .attr('fill',colorType) // add function to control color by 'type' .attr('stroke-opacity','.65') .attr("stroke-width", "2") .attr('stroke', 'pink') .style('fill-opacity','1') .on('mouseover', spotText) .on('mouseout', removeSpotText) function colorType(d,i) { var color = 'black' if(d.CATEGORY=='Restaurant'){color = 'firebrick'} if(d.CATEGORY=='Place'){color = 'mediumvioletred'} return color } function spotText(event,d){ d3.select(this) .attr('fill', 'indigo') .attr('r', 6) .style('stroke', 'mediumslateblue') .style("stroke-opacity",'.65') .style("stroke-width", '5') svg.append("rect") .attr('class','whitebox') .attr("x", 245) .attr("y", 170) .attr("height", 30) .attr("width", 100) .attr('stroke','black') .attr("stroke-width", '.5') .attr('stroke-opacity', '.4') .style("fill", 'white'); svg.append('text') .attr('class','spots') .attr('x','252') .attr('y','183') .attr('font-family','Helvetica') .attr('font-size','.35em') .attr('text-anchor','start') .attr('font-weight','bold') .text(d.NAME) svg.append('text') .attr('class','spots') .attr('x','252') .attr('y','191') .attr('font-family','Helvetica') .attr('font-size','.2em') .attr('text-anchor','start') .attr('font-weight','normal') .attr('font-style','italic') .text(d.DESCRIPTION) svg.append('line') .attr('class','spotLine') .attr('x1','245') .attr('y1','183') .attr('x2',projection([d.LONG,d.LAT])[0]) .attr('y2','183') .style('stroke-width','.5') .style('stroke','black') .style('stroke-dasharray','2 1') svg.append('line') .attr('class','spotLine') .attr('x1',projection([d.LONG,d.LAT])[0]) .attr('y1','183') .attr('x2',projection([d.LONG,d.LAT])[0]) .attr('y2',projection([d.LONG,d.LAT])[1]) .style('stroke-width','.5') .style('stroke','black') .style('stroke-dasharray','2 1') } function removeSpotText(event,d) { d3.select(this).attr('fill', colorType) d3.select(this).attr('r', 3) d3.select(this).style('stroke', 'pink') d3.select(this).style('fill-opacity','1') d3.select(this).style('stroke-opacity','.65') d3.select(this).style('stroke-width', '2') d3.selectAll('text.spots').remove() d3.selectAll('line.spotLine').remove() d3.selectAll('rect.whitebox').remove() var wrap = svg.selectAll("text.spots") .each(function(d,i) {wrap_text(d3.select(this), 100) } ); } /* c.enter.append('circle')// format to add additional circles .data(spots) .enter() //there are more data than elements, this selects them .append("circle") //appends path to data .attr("cx", function(d) {return projection([d.longitude,d.latitude])[0]}) .attr("cy", function(d) {return projection([d.longitude,d.latitude])[1]}) .attr('r',3) .attr('fill','black') .style('fill-opacity','1') */ return svg.node(); }2e:Td3e,function searchCheckbox( data, // An array of possible selectable options options ) { options = { value: [], optionsCheckboxes: undefined, // use this if you want to pass specific options to the checkboxes or the search optionsSearch: { filter: fullSearchFilter // searches in the whole word }, height: 300, ...options }; // To remove the label from the options for the checkboxes function cloneIgnoring(obj, attrToIgnore) { const { [attrToIgnore]: _, ...rest } = obj; return rest; } data = Array.from(data); // options.value = options.value === undefined ? [] : options.value; let checkboxes = Inputs.checkbox( data, options.optionsCheckboxes || cloneIgnoring(options, "label") ); const search = Inputs.search(data, options.optionsSearch || options); const btnAll = html``; const btnNone = html``; let selected = new Map(Array.from(options.value).map((d) => [d, true])); function countSelected() { return Array.from(selected.entries()).filter(([k, v]) => v).length; } function changeSome(sel, changeTo) { for (let o of sel) selected.set(o, changeTo); } function selectedFromArray(sel) { changeSome(data, false); changeSome(sel, true); } function selectedToArray() { return Array.from(selected.entries()) .filter(([k, v]) => v) .map(([k, v]) => k); } // HTML let output = htl.html`(${countSelected()} of ${ data.length } selected)`; const component = htl.html`${ options.label ? htl.html`${options.label}` : "" } ${output}

${search}

${btnAll}

${btnNone}

${checkboxes}

`; // Update the display whenever the value changes Object.defineProperty(component, "value", { get() { return selectedToArray(); }, set(v) { selectedFromArray(v); } }); function updateValueFromSelected() { checkboxes.value = selectedToArray(); output.innerHTML = `(${countSelected()} of ${data.length} selected)`; component.dispatchEvent(new Event("input", { bubbles: true })); } btnAll.addEventListener("click", () => { changeSome(search.value, true); updateValueFromSelected(); }); btnNone.addEventListener("click", () => { changeSome(search.value, false); console.log("None", selectedToArray()); updateValueFromSelected(); }); component.value = selectedToArray(); search.addEventListener("input", (evt) => { // Hide all the checkboxes that aren't in the searchbox result for (let check of checkboxes.querySelectorAll("input")) { if (search.value.includes(data[+check.value])) { check.parentElement.style.display = "inline-block"; } else { check.parentElement.style.display = "none"; } } // We don't really need to update when value when searching // component.dispatchEvent(new Event("input", { bubbles: true })); }); checkboxes.addEventListener("input", (evt) => { // avoids duplicated events evt.stopPropagation(); selectedFromArray(checkboxes.value); updateValueFromSelected(); }); return component; }2f:[{"id":"a682afa7e476dc1ede04d6d9637cc0433c75c47748cc29cf980f0b45f33db6ff4f6ab30a42dc5390f9412164559c513bbdabc4238f153717af7dcc014589f4c3","href":"https://static.observableusercontent.com/files/a682afa7e476dc1ede04d6d9637cc0433c75c47748cc29cf980f0b45f33db6ff4f6ab30a42dc5390f9412164559c513bbdabc4238f153717af7dcc014589f4c3","name":"SYD_boundingbox_001.geojson","type":"application/geo+json","lastModified":1675844086595.711,"size":656},{"id":"a1130b711ffc177ffc1c58932acb73a027efa5e28b49d95acedfd6badfd78b7cb76bb344847a575ac7084d7423b0146dd6acddadd23753b19fb260fe78e43746","href":"https://static.observableusercontent.com/files/a1130b711ffc177ffc1c58932acb73a027efa5e28b49d95acedfd6badfd78b7cb76bb344847a575ac7084d7423b0146dd6acddadd23753b19fb260fe78e43746","name":"SYD_railways_001.geojson","type":"application/geo+json","lastModified":1675844086595.711,"size":1788675},{"id":"3e59fb2672258e3fb0cc9e6e55da6c994b59b028035511c1d5ea900c1aa86c42245d9e13be64c9ee3361548734dfa78c274bb48c8d512b23300b3ce1bc00b1c4","href":"https://static.observableusercontent.com/files/3e59fb2672258e3fb0cc9e6e55da6c994b59b028035511c1d5ea900c1aa86c42245d9e13be64c9ee3361548734dfa78c274bb48c8d512b23300b3ce1bc00b1c4","name":"SYD_water_001.geojson","type":"application/geo+json","lastModified":1675844086595.711,"size":1640317},{"id":"27fefe529daf5c41f8f9e77810bc8cc94c5977084d49a7601095c9bbc75758f27c6d542a5cf5cf4b3ed44e865071399e55856b59f3f39f2310e03d2388863de4","href":"https://static.observableusercontent.com/files/27fefe529daf5c41f8f9e77810bc8cc94c5977084d49a7601095c9bbc75758f27c6d542a5cf5cf4b3ed44e865071399e55856b59f3f39f2310e03d2388863de4","name":"SYD_roads_004.geojson","type":"application/geo+json","lastModified":1675844086595.711,"size":6812681},{"id":"589fee83b2e71282e2d7192ebcbba46e0467a7c8c7037cd3cb81655278564a1db2dc807ead675af1afe3beecbdb3f5055b305b541e5db98488af8cc4066cffd9","href":"https://static.observableusercontent.com/files/589fee83b2e71282e2d7192ebcbba46e0467a7c8c7037cd3cb81655278564a1db2dc807ead675af1afe3beecbdb3f5055b305b541e5db98488af8cc4066cffd9","name":"SYD_buildings_004.geojson","type":"application/geo+json","lastModified":1675844086595.711,"size":7482623},{"id":"607ebb7e6d394f059deb7f4cc38a9e01efede40392656569824294d3c3616b1c3613781a784857721c809ceed0522a112eda1d7d1e0d599a6cca4beb23b96779","href":"https://static.observableusercontent.com/files/607ebb7e6d394f059deb7f4cc38a9e01efede40392656569824294d3c3616b1c3613781a784857721c809ceed0522a112eda1d7d1e0d599a6cca4beb23b96779","name":"220118_SYD_locations_V3.csv","type":"text/csv","lastModified":1675844086595.711,"size":1789},{"id":"62765e968cfebd850fbe52f642dc8ca4886b08b1958bb8826ef346bdbc7a5eea79d39fd098dd88b01ce4801343912ee9f41b2d6ab77adc116180a5071cc81ab0","href":"https://static.observableusercontent.com/files/62765e968cfebd850fbe52f642dc8ca4886b08b1958bb8826ef346bdbc7a5eea79d39fd098dd88b01ce4801343912ee9f41b2d6ab77adc116180a5071cc81ab0","name":"220118_SYD_locations_V4.csv","type":"text/csv","lastModified":1675846699378.134,"size":1909}] 2b:{"id":"d98469d8eb309b98","slug":null,"title":"230208_SYD","thumbnail":"e36cf2bc0e3c93622a5a818df88acc183956ce3cb3d74b84f6e4412884f142bf","access_level":"public","create_time":"$D2023-02-08T08:14:46.595Z","update_time":"$D2023-02-08T09:22:27.820Z","view_time":null,"first_public_time":"$D2023-02-08T08:14:46.595Z","has_unpublished_edits":null,"fork":{"id":"1e3af0efbf188c43","slug":null,"title":"230118_SYD","owner":{"id":"f4622b8442cfbf58","login":"anishde","name":"Anish De"}},"stars":0,"starred":false,"owner":{"type":"team","id":"f4622b8442cfbf58","login":"anishde","name":"Anish De","avatar_url":"https://avatars-next.observableusercontent.com/241eef800ec1a86dd33366d0d8bfa1f44a88120710f5f80e130f9088a67fd914","tier":"starter_2024"},"version":603,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"109b7cb49765baa3","login":"anishde","name":"Anish De","avatar_url":"https://avatars-next.observableusercontent.com/241eef800ec1a86dd33366d0d8bfa1f44a88120710f5f80e130f9088a67fd914","tier":null}],"members":[{"type":"individual","id":"109b7cb49765baa3","login":"anishde","name":"Anish De","avatar_url":"https://avatars-next.observableusercontent.com/241eef800ec1a86dd33366d0d8bfa1f44a88120710f5f80e130f9088a67fd914","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"230208_SYD","cells":[{"id":11,"value":"# 230208_SYD","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"$2d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":487,"value":"selectedplaces = selected","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"placestogo = [\"Coles\", \"Library\", \"Rowhouses\", \"Maritime Museum\", \"Circular Quay\", \"Powerhouse Museum\",\"Pyrmont Bridge\",\"Paddy's Markets\",\"Hobbyco\",\"Noodle Star\", \"Istanbul on Oxford\", \"Mille Vini\", \"The Prophet\", \"Oporto\",\"Thai Tha Poh\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":470,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":476,"value":"function termFilter(term) {\n return new RegExp(`(?:^.*|[^\\\\p{L}-])${escapeRegExp(term)}`, \"iu\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"\nfunction escapeRegExp(text) {\n return text.replace(/[\\\\^$.*+?()[\\]{}|]/g, \"\\\\$&\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":472,"value":"// https://github.com/observablehq/inputs/blob/main/src/search.js\nfunction fullSearchFilter(query) {\n const filters = `${query}`\n .split(/\\s+/g)\n .filter((t) => t)\n .map(termFilter);\n return (d) => {\n if (d == null) return false;\n if (typeof d === \"object\") {\n out: for (const filter of filters) {\n for (const value of valuesof(d)) {\n if (filter.test(value)) {\n continue out;\n }\n }\n return false;\n }\n } else {\n for (const filter of filters) {\n if (!filter.test(d)) {\n return false;\n }\n }\n }\n return true;\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":474,"value":"function* valuesof(d) {\n for (const key in d) {\n yield d[key];\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":431,"value":"tD = [//create cost and happiness dataset\n {name:\"COL\", time:1, dist:140},\n {name:\"NOO\", time:5, dist:350},\n {name:\"IST\", time:20, dist:1600},\n {name:\"MIL\", time:11, dist:800},\n {name:\"LIB\", time:10, dist:800},\n {name:\"PRP\", time:3, dist:240},\n {name:\"CLE\", time:2, dist:130},\n {name:\"MAR\", time:37, dist:3000},\n {name:\"POW\", time:25, dist:2000},\n {name:\"PYR\", time:36, dist:2900},\n {name:\"PAD\", time:19, dist:1600},\n {name:\"HOB\", time:32, dist:2500},\n {name:\"CQY\", time:44, dist:3600},\n {name:\"OPO\", time:9, dist:700},\n {name:\"THA\", time:3, dist:240},\n \n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"totalValues = {//calculate total cost and total happiness\n var totalTime = 0\n var totalDist = 0\n\n totalTime = totalTime+([selectedplaces[0].time] + [selectedplaces[1].time] + [selectedplaces[2].time] + [selectedplaces[3].time] + [selectedplaces[4].time] + [selectedplaces[5].time] + [selectedplaces[6].time] + [selectedplaces[7].time])\n\n totalDist = totalDist+([selectedplaces[0].dist] + [selectedplaces[1].dist] + [selectedplaces[2].dist] + [selectedplaces[3].dist] + [selectedplaces[4].dist] + [selectedplaces[5].dist] + [selectedplaces[6].dist] + [selectedplaces[7].dist])\n\n return[totalTime,totalDist]\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"timevalue = function(){\n var total = 0;\n for (var i = 0; i < selectedplaces.length; i++) {\n total = total + selectedplaces[i].time;\n }\n return total;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":429,"value":"viewof ss = Inputs.radio([0,1, 2, 3, 4], {label: \"Saigon Shack\",value:0})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":415,"value":"viewof cc = Inputs.radio([0,1, 2, 3, 4], {label: \"Comedy Cellar\",value:0})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":425,"value":"viewof hs = Inputs.radio([0,1, 2, 3, 4], {label: \"Hello Saigon\",value:0})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":417,"value":"viewof bnj = Inputs.radio([0,1, 2, 3, 4], {label: \"Blue Note Jass\",value:0})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":419,"value":"viewof spotRadius = Inputs.radio([2, 4, 6, 8], {label: \"Radius\",value:4})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":421,"value":"viewof y = Inputs.range([0, 255], {step: 1, label: \"Favorite number\", value:0})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"viewof transportation = Inputs.checkbox([\"subway\", \"taxi\", \"citibike\", \"revel\", \"bus\"], {label: \"NYC Transport\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":446,"value":"viewof places = Inputs.checkbox([\"Coles\", \"Library\", \"Rowhouses\", \"Maritime Museum\", \"Circular Quay\", \"Powerhouse Museum\",\"Pyrmont Bridge\",\"Paddy's Markets\",\"Hobbyco\"], {label: \"Places\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":438,"value":"viewof restaurants = Inputs.checkbox([\"Noodle Star\", \"Istanbul on Oxford\", \"Mille Vini\", \"The Prophet\", \"Oporto\",\"Thai Tha Poh\"], {label: \"Restaurants\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":594,"value":"viewof selected = searchCheckbox(\n SYDspots, // What elements to chose from\n {// Any other options you pass here will be passed to the checkbox and search inputs\n value: SYDspots,// Start with everything selected\n label: \"Locations\",\n height: 200\n // You can also pass specific options for the search and the checkboxes\n // optionsSearch: {\n // filter: fullSearchFilter\n // }\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":600,"value":"dashboard =\n\n html`\n\n\n

\n\n\n\n

\n ${md` Time - Minutes: **${totalValues[0]}** `}\n

\n\n

\n ${md` Distance - Meters: **$${totalValues[1]}** `}\n

\n\n

\n ${chart}\n

\n\n\n

\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"SYDbuildings = FileAttachment(\"SYD_buildings_004.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"SYDbox = FileAttachment(\"SYD_boundingbox_001.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"SYDroads = FileAttachment(\"SYD_roads_004.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"SYDwater = FileAttachment(\"SYD_water_001.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"SYDrails = FileAttachment(\"SYD_railways_001.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"SYDspots = FileAttachment(\"220118_SYD_locations_V4.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"import { wrap_text, wrap_text_nchar } from \"@ben-tanen/svg-text-and-tspan-word-wrapping\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2c:"$2b:body"