28:null 29:["$","title",null,{"children":"NYC Map - Fleet's version - class prep | Fleet Hower | Observable"}] 2e:T226d,chart = { const width = 800,//pixel size of the map height = 800; const svg = d3.create("svg") .attr("viewBox", [0, 0, width-50, height-10]); // Use Mercator projection var projection = d3 .geoMercator()//projection system used .fitSize([width, height], bbox_new);//out bounding box is here var path = d3.geoPath().projection(projection);//need one of these for each line layer from qgis 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 path6 = d3.geoPath().projection(projection); var g = svg.selectAll('g').attr("id", "paths");//qgis lines variable //one variable for each geometry type var c = svg.selectAll("circle")//for circles var p = svg.selectAll("polyline")//for polylines from rhino var t = svg.selectAll("text")//for polylines from rhino svg.append("foreignObject") .attr("transform",(d,i)=> "translate(0,0)" ) .attr("width", 800) .attr("height", 800) .append("xhtml:div") .attr("class", "textbox") .html(''); /* const text = await FileAttachment("test.svg").text(); const document = (new DOMParser).parseFromString(text, "image/svg+xml"); //const svg1 = d3.select(document.documentElement).remove(); const redCircle = svg.selectAll("path[fill='#ed2024']").attr("fill","cyan"); //console.log(svg1) */ //static lines from qgis //staticLines(path3, subways.features,"none",1,.5,"rgb(180,180,180)") staticLines(path4, parks.features,"rgb(200,225,200)",'.25','.1',"rgb(0,255,0)") staticLines(path5, dining_lines.features,"none",'1','.25',"rgb(255,0,0)") function staticLines(path, data, sfill, sOpac, sW, stroke){ g.enter().append("path") .data(data) //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", path) //The d attribute defines a path to be drawn, only applies to appended elements .style("fill", sfill) .style('stroke-opacity',sOpac) .style("stroke-width", sW) .style("stroke", stroke) } //static points from qgis staticCircles(restrooms.features,'2','black','1',"0") staticCircles(theaters.features,'4','blue','1',"0") function staticCircles(data,r,sfill, sOpac, sWidth){ c.enter().append('circle') .data(data) //get data to define path .enter() //there are more data than elements, this selects them .append("circle") //appends path to data .attr('cx',function(d) {return path.centroid(d)[0]}) .attr("cy",function(d) {return path.centroid(d)[1]}) .attr('r', r) .attr('fill', sfill) .style('fill-opacity',sOpac) .style("stroke-width", sWidth) } //lines from rhino polyline(graphic_test,'red','1','0','none') polyline(face_outline,'rgb(255,255,0)','1','2','black') polyline(eyes,'blue','1','1','black') polyline(mouth,'none','1','3','red') function polyline(data, sfill, sOpac, sW, stroke){ g.enter().append("polyline") .data(data) //get data to define path .enter() //there are more data than elements, this selects them .append('polyline') .attr("points", function(d){return d}) //The d attribute defines a path to be drawn, only applies to appended elements .style("fill", sfill) .style('stroke-opacity',sOpac) .style("stroke-width", sW) .style("stroke", stroke) } t.enter().append('text') .data(museum) //get data to define path .enter() .append("text") //appends path to data //.attr('class','sText') .attr('x',200) .attr("y",function(d,i){return 400+(15*i)}) .attr('fill', 'black') .style('fill-opacity','1') .style('font-family','helvetica') .style('font-size','1vw') .style("stroke", "none") .style("stroke-width", "1") .style("text-anchor", "end") .text(function(d){return d.Name}) p.enter().append('polyline') .data(museum) //get data to define path .enter() //there are more data than elements, this selects them //svg .append('polyline') //.attr("points", '200,'+function(d,i){return 400+(15*i)}+' 50 80,20 30,40') //The d attribute defines a path to be drawn, only applies to appended elements .attr("points", function(d,i){return '200,'+(400+(15*i))+' ' +projection([d.Long,d.Lat])[0]+','+(400+(15*i))+' '+projection([d.Long,d.Lat])[0]+','+projection([d.Long,d.Lat])[1]}) .style("fill", 'none') .style('stroke-opacity','1') .style("stroke-width", '1') .style("stroke", 'blue') p.enter().append('polyline') .data(museum) //get data to define path .enter() //there are more data than elements, this selects them //svg .append('polyline') //.attr("points", '200,'+function(d,i){return 400+(15*i)}+' 50 80,20 30,40') //The d attribute defines a path to be drawn, only applies to appended elements .attr("points", bunny) .attr('transform',function(d){return 'translate('+ projection([d.Long,d.Lat])[0]+" " +projection([d.Long,d.Lat])[1] + ")"}) .style("fill", 'pink') .style('stroke-opacity','1') .style("stroke-width", '.5') .style("stroke", 'blue') p.enter().append('polyline') .data(theaters.features) //get data to define path .enter() //there are more data than elements, this selects them //svg .append('polyline') //.attr("points", '200,'+function(d,i){return 400+(15*i)}+' 50 80,20 30,40') //The d attribute defines a path to be drawn, only applies to appended elements .attr("points", bunny) .attr('transform',function(d){return 'translate('+ path.centroid(d)[0]+" " +path.centroid(d)[1] + ")"}) .style("fill", 'pink') .style('stroke-opacity','1') .style("stroke-width", '.5') .style("stroke", 'blue') //points from spreadsheet c.enter().append('circle') .data(museum) //get data to define path .enter() //there are more data than elements, this selects them .append("circle") //appends path to data .attr('class','spots') .attr('cx',function(d) {return projection([d.Long,d.Lat])[0]}) .attr("cy",function(d) {return projection([d.Long,d.Lat])[1]}) .attr('r', 4) .attr('fill', fillColor) .style('fill-opacity','1') .style("stroke", "black") .style("stroke-width", "1") .on('click', addText) .on('mouseout', removeText) function fillColor(d){ var color = 'rgb(255,0,0)' if(d.ID == 1){color = 'rgb(50,0,0)'} if(d.ID == 2){color = 'rgb(100,0,0)'} if(d.ID == 3){color = 'rgb(150,0,0)'} if(d.ID == 4){color = 'rgb(200,0,0)'} return color } /* c.enter().append('circle') .data(bikes.features) //get data to define path .enter() //there are more data than elements, this selects them .append("circle") //appends path to data .attr('class','spots') .attr('cx',function(d) {return path6.centroid(d)[0]}) .attr("cy",function(d) {return path6.centroid(d)[1]}) //.attr('r', 4) .attr('r', function(d) {return d.properties.bikes_available/10}) .attr('fill', fillColor) .style('fill-opacity','1') .style("stroke", "black") .style("stroke-width", "1") */ function addText(event,d){ var color = 'rgb(255,0,0)' if(d.ID == 1){color = 'rgb(50,0,0)'} if(d.ID == 2){color = 'rgb(100,0,0)'} if(d.ID == 3){color = 'rgb(150,0,0)'} if(d.ID == 4){color = 'rgb(200,0,0)'} svg .append("text") //appends path to data .attr('class','sText') .attr('x',projection([d.Long,d.Lat])[0]) .attr("y",projection([d.Long,d.Lat])[1]) .attr('fill', color) .style('fill-opacity','1') .style('font-family','helvetica') .style('font-size','1vw') .style("stroke", "none") .style("stroke-width", "1") .text(d.Name) svg .append("text") //appends path to data .attr('class','sText') .attr('x',25) .attr("y",200) .attr('fill', 'black') .style('fill-opacity','1') .style('font-family','helvetica') .style('font-size','1vw') .style("stroke", "none") .style("stroke-width", "1") .text(d.Description) var wrap = svg.selectAll("text.sText") .each(function(d, i) { wrap_text(d3.select(this), 100) }); } function removeText(event,d){ svg.selectAll('text.sText').remove() } return svg.node(); }2f:[{"id":"3230f33317a4ab5151caac8e4db1d0d2d5c7f399a12497f442769d36ba0a97d46d8e9a92e85c39a6b383dffd2fb73080570a5a8c6b7a9db846a978bbf833d779","href":"https://static.observableusercontent.com/files/3230f33317a4ab5151caac8e4db1d0d2d5c7f399a12497f442769d36ba0a97d46d8e9a92e85c39a6b383dffd2fb73080570a5a8c6b7a9db846a978bbf833d779","name":"eyes.txt","type":"text/plain","lastModified":1721155974124.882,"size":5660},{"id":"409f95071f03f20afe09c998bf7c00d6349c51eaf884fe867a517cbeaec9ea8580217905dc03fe2d7c1ad2b7b11b14deb59972558e8a45f807cd0967218831af","href":"https://static.observableusercontent.com/files/409f95071f03f20afe09c998bf7c00d6349c51eaf884fe867a517cbeaec9ea8580217905dc03fe2d7c1ad2b7b11b14deb59972558e8a45f807cd0967218831af","name":"face_outline.txt","type":"text/plain","lastModified":1721155974124.882,"size":2830},{"id":"a536080c88f6ca4be1d3d074cba7c75a4c8f0ce8fe865a8fc872365b6c92937d749ade7aa9a080b16b9f769a1bb660dc8b9947734a669638e2ccdffc24c5b7f9","href":"https://static.observableusercontent.com/files/a536080c88f6ca4be1d3d074cba7c75a4c8f0ce8fe865a8fc872365b6c92937d749ade7aa9a080b16b9f769a1bb660dc8b9947734a669638e2ccdffc24c5b7f9","name":"theaters.geojson","type":"application/geo+json","lastModified":1721155974124.882,"size":38575},{"id":"77386e02a0f4f1f1ee34a3a2dd1a34bcba18849d2fc2771d9c228f4d521c142805edd9699a8dec365c619b04eb296b9a46cc93d0d62f712ab0500657aa4defad","href":"https://static.observableusercontent.com/files/77386e02a0f4f1f1ee34a3a2dd1a34bcba18849d2fc2771d9c228f4d521c142805edd9699a8dec365c619b04eb296b9a46cc93d0d62f712ab0500657aa4defad","name":"bbox_new.geojson","type":"application/geo+json","lastModified":1721155974124.882,"size":498},{"id":"ad277501ba8e983d7c59490fab360b11d26475480e2c7e4ea05ba96c27f01efbd0cb07661b5bf089b9a4f35fd4e79559bd092ce7f20b664780e25ff1ae50ea6d","href":"https://static.observableusercontent.com/files/ad277501ba8e983d7c59490fab360b11d26475480e2c7e4ea05ba96c27f01efbd0cb07661b5bf089b9a4f35fd4e79559bd092ce7f20b664780e25ff1ae50ea6d","name":"dining_lines.geojson","type":"application/geo+json","lastModified":1721155974124.882,"size":1386663},{"id":"1cff307aca2fb60938d0e2c8336ff19a4115d7d2ec799085b9b6ca3788c42166cb44ccf102a8764ca1c862de4dc4f3fff698ddfb9c629c592e7d9455cbb1aa96","href":"https://static.observableusercontent.com/files/1cff307aca2fb60938d0e2c8336ff19a4115d7d2ec799085b9b6ca3788c42166cb44ccf102a8764ca1c862de4dc4f3fff698ddfb9c629c592e7d9455cbb1aa96","name":"mouth.txt","type":"text/plain","lastModified":1721155974124.882,"size":2802},{"id":"09a0157278003e85810fbfacec564161506cf68d7a8fd682813886ef609455e026902c0ed337fcfe70ba1878f10d6b2090c2a89a0dc3fbccae745abbb2828552","href":"https://static.observableusercontent.com/files/09a0157278003e85810fbfacec564161506cf68d7a8fd682813886ef609455e026902c0ed337fcfe70ba1878f10d6b2090c2a89a0dc3fbccae745abbb2828552","name":"bunny.txt","type":"text/plain","lastModified":1721158491919.512,"size":5884},{"id":"cfef49b55b633688af7b659d01bfd72bbf28c32f6d619c5580951ecbefe397114d0248c1ff41ba448b232ddcf428b55d92fd5a2431eb93c78ec3ae23cae85e22","href":"https://static.observableusercontent.com/files/cfef49b55b633688af7b659d01bfd72bbf28c32f6d619c5580951ecbefe397114d0248c1ff41ba448b232ddcf428b55d92fd5a2431eb93c78ec3ae23cae85e22","name":"parks.geojson","type":"application/geo+json","lastModified":1721155974124.882,"size":2989931},{"id":"2f57f9225c681f5f72cbf23c0354cda86cae39588e8f0642cc0f1ca9495e41c01fa5bea8ebbae9bc7aeceade42937338ed79c864fc316643a0bb4f02ab9c9813","href":"https://static.observableusercontent.com/files/2f57f9225c681f5f72cbf23c0354cda86cae39588e8f0642cc0f1ca9495e41c01fa5bea8ebbae9bc7aeceade42937338ed79c864fc316643a0bb4f02ab9c9813","name":"subways.geojson","type":"application/geo+json","lastModified":1721155974124.882,"size":464921},{"id":"9ac4028331d6f608560273100bb5552b5e8219d8f8c85837ae88642005e73db93aa8ad8afc29940cf5ec13b0b31566bf8683940d3369c90d3c35b0d8d391c0c3","href":"https://static.observableusercontent.com/files/9ac4028331d6f608560273100bb5552b5e8219d8f8c85837ae88642005e73db93aa8ad8afc29940cf5ec13b0b31566bf8683940d3369c90d3c35b0d8d391c0c3","name":"restrooms.geojson","type":"application/geo+json","lastModified":1721155974124.882,"size":234164},{"id":"fa0258178f56d9f0a787c81e1aa77a7a46940eee48e4e0bfd714adc8848d2300ddf00fcc9a9cdef9f15bbb416e4dff5938ec7090ee39fa105f00f0199fff4c05","href":"https://static.observableusercontent.com/files/fa0258178f56d9f0a787c81e1aa77a7a46940eee48e4e0bfd714adc8848d2300ddf00fcc9a9cdef9f15bbb416e4dff5938ec7090ee39fa105f00f0199fff4c05","name":"bbox@1.geojson","type":"application/geo+json","lastModified":1721155974124.882,"size":492},{"id":"525f66ffecfe683c27d13e281b7589fdeec2a011cf15b1a5bdb1658f0f43118b8ba5fd58343da754103aa13e4b6d44a5fd7338aaedb43392db8712c8c79bfdb5","href":"https://static.observableusercontent.com/files/525f66ffecfe683c27d13e281b7589fdeec2a011cf15b1a5bdb1658f0f43118b8ba5fd58343da754103aa13e4b6d44a5fd7338aaedb43392db8712c8c79bfdb5","name":"graphic_test.txt","type":"text/plain","lastModified":1721155974124.882,"size":593},{"id":"c962f4ec1a5bc87169d5c7bbea7c06a6da4e8a0b571287ee1b5d8055f8abb96f5f8532cf196b45c2f1f7d787b3947c596eff701eb7309762f728cf38564c4116","href":"https://static.observableusercontent.com/files/c962f4ec1a5bc87169d5c7bbea7c06a6da4e8a0b571287ee1b5d8055f8abb96f5f8532cf196b45c2f1f7d787b3947c596eff701eb7309762f728cf38564c4116","name":"test.svg","type":"image/svg+xml","lastModified":1773676434012.84,"size":488}] 2c:{"id":"2f8b479a423e641a","slug":null,"title":"NYC Map - Fleet's version - class prep","thumbnail":"9cda785357df87b7d5beff15a2553388c7f7b7974b65ae2848de97b6f8b37d84","access_level":"public","create_time":"$D2024-07-16T18:52:54.124Z","update_time":"$D2026-03-17T00:02:04.211Z","view_time":null,"first_public_time":"$D2024-11-14T17:45:07.614Z","fork":{"id":"2d4e65dc2b400ef3","slug":null,"title":"NYC Map - Fleet's version","owner":{"id":"e88d5b4a989c506e","login":"fleeth","name":"Fleet Hower"}},"stars":1,"starred":false,"owner":{"type":"team","id":"e88d5b4a989c506e","login":"fleeth","name":"Fleet Hower","avatar_url":"https://avatars-next.observableusercontent.com/bac6c76c1e7bcb5ac4be02b2a91e9bee64ecbb953fb1e9d52d6563dcb78eefca","tier":"starter_2024"},"version":1384,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"df84799035553ff3","login":"fleeth","name":"Fleet Hower","avatar_url":"https://avatars-next.observableusercontent.com/bac6c76c1e7bcb5ac4be02b2a91e9bee64ecbb953fb1e9d52d6563dcb78eefca","tier":null}],"members":[{"type":"individual","id":"df84799035553ff3","login":"fleeth","name":"Fleet Hower","avatar_url":"https://avatars-next.observableusercontent.com/bac6c76c1e7bcb5ac4be02b2a91e9bee64ecbb953fb1e9d52d6563dcb78eefca","tier":null,"role":"editor"},{"type":"team","id":"e88d5b4a989c506e","login":"fleeth","name":"Fleet Hower","avatar_url":"https://avatars-next.observableusercontent.com/bac6c76c1e7bcb5ac4be02b2a91e9bee64ecbb953fb1e9d52d6563dcb78eefca","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"NYC Map - Fleet's version - class prep","cells":[{"id":762,"value":"# NYC Map - Fleet's version - class prep","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":44,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1320,"value":"bunny = FileAttachment(\"bunny.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1264,"value":"mouth = FileAttachment(\"mouth.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1261,"value":"eyes = FileAttachment(\"eyes.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1258,"value":"face_outline = FileAttachment(\"face_outline.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1251,"value":"bbox_new = FileAttachment(\"bbox_new.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1232,"value":"graphic_test = FileAttachment(\"graphic_test.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1189,"value":"bbox1 = FileAttachment(\"bbox@1.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1255,"value":"theaters = FileAttachment(\"theaters.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1200,"value":"restrooms = FileAttachment(\"restrooms.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1197,"value":"subways = FileAttachment(\"subways.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1194,"value":"parks = FileAttachment(\"parks.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1244,"value":"dining_lines = FileAttachment(\"dining_lines.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1016,"value":"spotsLink = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vRwB-ukffxTe8cd2j54Lg_PGvR-3Dm6A6TZNS9AV1TRz5iNL3shNkXsyJLlXTGzcI4UCkyh9MJS9P0G/pub?output=csv'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1228,"value":"spots = d3.csv(spotsLink,d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1274,"value":"museumLink = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vQmozuAO_jL9hGjjz4am72WDiCCxXdisziHKELuhwPArAnUeQQf_y0SCetuqS9JP9LxuJW1JhTYLO3t/pub?output=csv'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1276,"value":"museum = d3.csv(museumLink,d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":894,"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"},{"id":1337,"value":"bikesLink = 'https://layer.bicyclesharing.net/map/v1/nyc/stations'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1339,"value":"//bikes = d3.json(bikesLink, d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1350,"value":"testimage = FileAttachment(\"test.svg\").text()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1355,"value":"graphic = {\n const text = await FileAttachment(\"test.svg\").text();\n const document = (new DOMParser).parseFromString(text, \"image/svg+xml\");\n const svg = d3.select(document.documentElement).remove();\n //const svg = d3.create(\"svg\")\n //.attr(\"viewBox\", [0, 0, 500, 500]);\n const redCircle = svg.selectAll(\"path[fill='#ed2024']\").attr(\"fill\",\"cyan\");\n\n redCircle.on(PointerEvent, sayText)\n\n function sayText(){\n console.log(\"hello!\")\n \n }\n \n console.log(svg)\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1374,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2d:"$2c:body"