2f: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(); }30: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; }31:[{"id":"a682afa7e476dc1ede04d6d9637cc0433c75c47748cc29cf980f0b45f33db6ff4f6ab30a42dc5390f9412164559c513bbdabc4238f153717af7dcc014589f4c3","href":"https://static.observableusercontent.com/files/a682afa7e476dc1ede04d6d9637cc0433c75c47748cc29cf980f0b45f33db6ff4f6ab30a42dc5390f9412164559c513bbdabc4238f153717af7dcc014589f4c3","name":"SYD_boundingbox_001.geojson","type":"application/geo+json","lastModified":1675848158392.956,"size":656},{"id":"a1130b711ffc177ffc1c58932acb73a027efa5e28b49d95acedfd6badfd78b7cb76bb344847a575ac7084d7423b0146dd6acddadd23753b19fb260fe78e43746","href":"https://static.observableusercontent.com/files/a1130b711ffc177ffc1c58932acb73a027efa5e28b49d95acedfd6badfd78b7cb76bb344847a575ac7084d7423b0146dd6acddadd23753b19fb260fe78e43746","name":"SYD_railways_001.geojson","type":"application/geo+json","lastModified":1675848158392.956,"size":1788675},{"id":"3e59fb2672258e3fb0cc9e6e55da6c994b59b028035511c1d5ea900c1aa86c42245d9e13be64c9ee3361548734dfa78c274bb48c8d512b23300b3ce1bc00b1c4","href":"https://static.observableusercontent.com/files/3e59fb2672258e3fb0cc9e6e55da6c994b59b028035511c1d5ea900c1aa86c42245d9e13be64c9ee3361548734dfa78c274bb48c8d512b23300b3ce1bc00b1c4","name":"SYD_water_001.geojson","type":"application/geo+json","lastModified":1675848158392.956,"size":1640317},{"id":"27fefe529daf5c41f8f9e77810bc8cc94c5977084d49a7601095c9bbc75758f27c6d542a5cf5cf4b3ed44e865071399e55856b59f3f39f2310e03d2388863de4","href":"https://static.observableusercontent.com/files/27fefe529daf5c41f8f9e77810bc8cc94c5977084d49a7601095c9bbc75758f27c6d542a5cf5cf4b3ed44e865071399e55856b59f3f39f2310e03d2388863de4","name":"SYD_roads_004.geojson","type":"application/geo+json","lastModified":1675848158392.956,"size":6812681},{"id":"589fee83b2e71282e2d7192ebcbba46e0467a7c8c7037cd3cb81655278564a1db2dc807ead675af1afe3beecbdb3f5055b305b541e5db98488af8cc4066cffd9","href":"https://static.observableusercontent.com/files/589fee83b2e71282e2d7192ebcbba46e0467a7c8c7037cd3cb81655278564a1db2dc807ead675af1afe3beecbdb3f5055b305b541e5db98488af8cc4066cffd9","name":"SYD_buildings_004.geojson","type":"application/geo+json","lastModified":1675848158392.956,"size":7482623},{"id":"62765e968cfebd850fbe52f642dc8ca4886b08b1958bb8826ef346bdbc7a5eea79d39fd098dd88b01ce4801343912ee9f41b2d6ab77adc116180a5071cc81ab0","href":"https://static.observableusercontent.com/files/62765e968cfebd850fbe52f642dc8ca4886b08b1958bb8826ef346bdbc7a5eea79d39fd098dd88b01ce4801343912ee9f41b2d6ab77adc116180a5071cc81ab0","name":"220118_SYD_locations_V4.csv","type":"text/csv","lastModified":1675848158392.956,"size":1909},{"id":"e828cf66b4da0ecd2baa1e2d65e5b62e207142b0fab8d881d630e7db7a78ad9578826e419da1fe15d9b5dfec05fbf008ae025722b8dd2385165788c51042a8bf","href":"https://static.observableusercontent.com/files/e828cf66b4da0ecd2baa1e2d65e5b62e207142b0fab8d881d630e7db7a78ad9578826e419da1fe15d9b5dfec05fbf008ae025722b8dd2385165788c51042a8bf","name":"export_test_frompython.txt","type":"text/plain","lastModified":1675874108758.234,"size":854},{"id":"5bad7c8db9c90a88547a18d7ebc06a0445b9cec5eed3c9a8035e9ae8d2db0f7ea94515478004969fb05abb51784038255a878e4aa21bcb22c807e860a1641cc5","href":"https://static.observableusercontent.com/files/5bad7c8db9c90a88547a18d7ebc06a0445b9cec5eed3c9a8035e9ae8d2db0f7ea94515478004969fb05abb51784038255a878e4aa21bcb22c807e860a1641cc5","name":"export_test_frompython_002.txt","type":"text/plain","lastModified":1675874241930.539,"size":819}] 2d:{"title":"230208_SYD cleaned up","cells":[{"id":11,"value":"# 230208_SYD cleaned up","pinned":true,"hidden":false,"mode":"md"},{"id":16,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":0,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":487,"value":"selectedplaces = selected","pinned":true,"hidden":false,"mode":"ojs"},{"id":608,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":476,"value":"function termFilter(term) {\n return new RegExp(`(?:^.*|[^\\\\p{L}-])${escapeRegExp(term)}`, \"iu\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":478,"value":"\nfunction escapeRegExp(text) {\n return text.replace(/[\\\\^$.*+?()[\\]{}|]/g, \"\\\\$&\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":474,"value":"function* valuesof(d) {\n for (const key in d) {\n yield d[key];\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"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":false,"hidden":false,"mode":"ojs"},{"id":639,"value":"angledthing_outline = FileAttachment(\"export_test_frompython_002.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":636,"value":"angledthing = {\n\n const width = 150,\n height = 50;\n\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n\n\n var p = svg.selectAll(\"polyline\")\n .data(angledthing_outline)\n .enter()\n .append(\"polyline\")\n .attr('points', function(d) { return d})\n .style('fill', 'red')\n .style(\"fill-opacity\", \".6\")\n .style('stroke-opacity','.4')\n .style(\"stroke-width\", '.25')\n .style('stroke', 'brown')\n \n\n\nreturn svg.node();\n\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":600,"value":"dashboard =\n\n html`\n\n\n

\n\n\n\n

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

\n\n

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

\n\n

\n ${chart}\n

\n\n

\n ${angledthing}\n

\n\n\n

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