31:T153e,map = { const svg = d3.select(DOM.svg(width, height)) .style("width", "100%") .style("height", "auto") .call(zoom) // background svg.append("rect") .attr("width", width) .attr("height", height) .attr("x", 0) .attr("y", 0) .attr("fill", greys[1]) // NOTE: the excessive use of id attributes is for making the output svg more friendly for use in vector editing software such as Adobe Illustrator // group for all map layers const g = svg.append("g").attr("id", "map-layers") // group for all map layers const lg = svg.append("g") // "land" from merged counties const land = g.append("g") .attr("id", "land") .append("path") .datum(landArea) .attr("fill", "#fff") .attr("stroke-width", 0.25) .attr("stroke", greys[3]) .attr("stroke-line-join", "round") .attr("d", path) // county boundaries const countiesGroup = g.append("g").attr("id", "county-boundaries") // county boundaries – bottom countiesGroup.append("path") .attr("id", "county-boundaries-bottom") .datum(countyBoundaries) .attr("fill", "none") .attr("stroke-width", 1.25) .attr("stroke", greys[0]) .attr("stroke-linejoin", "bevel") .attr("d", path) // county boundaries – top countiesGroup.append("path") .attr("id", "county-boundaries-top") .datum(countyBoundaries) .attr("fill", "none") .attr("stroke-width", 0.75) .attr("stroke", greys[5]) .attr("stroke-linejoin", "bevel") .attr("stroke-dasharray", "6 2 2 2") .attr("d", path) // osm major roads g.append("g") .attr("id", "major-roads") .selectAll(".road") .data(roads.features) .enter().append("path") .classed("road", true) .attr("fill", "none") .attr("stroke-width", d => d.properties.type === "motorway" ? 0.5 : 0.3) .attr("stroke", greys[3]) .attr("stroke-linejoin", "round") .attr("d", path) // osm railways g.append("g") .attr("id", "railways") .selectAll(".rail") .data(rail.features) .enter().append("path") .classed("rail", true) .attr("fill", "none") .attr("stroke-width", 0.3) .attr("stroke", greys[3]) .attr("stroke-linejoin", "round") .attr("stroke-dasharray", "1 1") .attr("d", path) // osm places g.append("g") .attr("id", "places") .selectAll(".place") .data(places.features) .enter().append("circle") .classed("place", true) .attr("cx", d => path.centroid(d)[0]) .attr("cy", d => path.centroid(d)[1]) .attr("r", 1.5) .attr("fill", "white") .attr("stroke", greys[5]) .attr("stroke-width", 0.5) // transmitters g.append("g") .attr("id", "transmitters") .selectAll(".tx") .data(rfeatures) .enter().append("circle") .classed("tx", true) .attr("cx", d => path.centroid(d)[0]) .attr("cy", d => path.centroid(d)[1]) .attr("r", d => radiusScale(d.properties.frequency)) .attr("fill", "skyblue") .attr("fill-opacity", 0.35) .attr("stroke", greys[5]) .attr("stroke-opacity", 0.35) .attr("stroke-width", 0.25) .on("mouseover", (d) => { tooltip .transition() .duration(200) .style('opacity', 0.9); tooltip .style("left", d3.event.pageX - 50 + "px") .style("top", d3.event.pageY - 70 + "px") .style("display", "inline-block") .html(`

${d.properties.licensee}

${d.properties.service}

${d3.format(".6s")(d.properties.frequency)+ ' Hz'}

${d.properties.callsign}

`);}) .on("mousemove", d => { tooltip .style("left", (d3.event.pageX+50) + "px") .style("top", (d3.event.pageY-70) + "px"); }) .on("mouseout", () => { tooltip .transition() .duration(500) .style('opacity', 0); }); circleLegend(lg, radiusScale.domain(), radiusScale.range()) .x(width - 120) .y(height - 40) .values([radiusScale.domain()[0], radiusScale.domain()[1]]) //.range(radiusScale.range()) // the circle area/size mapping .circleColor('#333333') .textColor('#333333') .suffix(' Hz') .fontSize(10) .textPadding(60) .title('Center Frequency') .render() // labels const labelsGroup = g.append("g").attr("id", "labels") // county labels labelsGroup.append("g").attr("id", "county-labels") .selectAll(".county-label") .data(countyCentroids.features) .enter().append("text") .classed("county-label", true) .attr("x", d => path.centroid(d)[0]) .attr("y", d => path.centroid(d)[1]) .attr("text-anchor", "middle") .attr("fill", greys[7]) .style("font", "9px sans-serif") .style("text-transform", "uppercase") .style("text-shadow", textShadow) .text(d => d.properties.name) // places labels labelsGroup.append("g").attr("id", "place-labels") .selectAll(".place-label") .data(places.features) .enter().append("text") .classed("place-label", true) .attr("x", d => path.centroid(d)[0]) .attr("y", d => path.centroid(d)[1] - textOffset.y) .attr("text-anchor", "end") .attr("fill", greys[7]) .style("font", "7px sans-serif") .style("text-shadow", textShadow) .text(d => d.properties.name) return svg.node() }32:[{"id":"86d7ad7416f19eca0a545ac68fe05d11d0ab5db44196d32edced5722f252e5defd610bfbec1d24e660f61745bc752f5112a24fd0640acc0513e22d34b01af71d","href":"https://static.observableusercontent.com/files/86d7ad7416f19eca0a545ac68fe05d11d0ab5db44196d32edced5722f252e5defd610bfbec1d24e660f61745bc752f5112a24fd0640acc0513e22d34b01af71d","name":"mergedDf.csv","type":"text/csv","lastModified":1582503745508.789,"size":1321215}] 2f:{"title":"Silicon Valley RF Transmitters","cells":[{"id":0,"value":"md`# Silicon Valley RF Transmitters\n\nForked from [@clhenrick/sf-bay-area-basemap](https://beta.observablehq.com/@clhenrick/sf-bay-area-basemap)`\n\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":245,"value":"md`### Public FCC licensed transmitter data\n\nCollected and merged from queries made here https://fjallfoss.fcc.gov/General_Menu_Reports/engineering_search.cfm?accessible=NO&wild_select=on in 2017.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"rfdata = d3.csvParse(await FileAttachment(\"mergedDf.csv\").text()).map(d => ({\n Distance: +d['Distance From Center'],\n Frequency: +d['Center Frequency'],\n Longitude: +d['Longitude Decimal'],\n Latitude: +d['Latitude Decimal'],\n Type: d.Type,\n Date: parseDate(d['Issue Date']),\n Callsign: d['Callsign'],\n Description: d['Description'],\n Service: d['Radio Service'],\n Licensee: d['Licensee']\n //Date: d['Issue Date']\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"rfeatures = rfdata.map(d => ({type: 'Feature',\n properties: {\n description: d.Description,\n distance: d.Distance,\n callsign: d.Callsign,\n service: d.Service,\n licensee: d.Licensee,\n frequency: d.Frequency\n },\n geometry: {\n type: \"Point\",\n coordinates: [d.Longitude, d.Latitude],\n r: radiusScale(d.Frequency)\n }}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"parseDate = d3.timeParse(\"%Y-%m-%d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":253,"value":"md`### Tooltip and radius scale for frequencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":229,"value":"tooltip = d3.select(\"body\").append(\"div\").attr(\"class\", \"toolTip\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":235,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"frequencyRange = d3.extent(rfdata.map(d => d.Frequency))","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"radiusScale = d3.scalePow().exponent(0.5).domain(frequencyRange).range([3,15])","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"md`### map cropping / bounding box`","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"md`Coordinates for cropping the map were determined from the range of the Latitude and Longitude data.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"mapFrameGeoJSON = {\n const coords = `[[${longitudeRange[0]}, ${latitudeRange[0]}],[${longitudeRange[1]}, ${latitudeRange[1]}]]`\nreturn JSON.parse(`{\"type\":\"Feature\",\"geometry\":{\"type\":\"LineString\",\"coordinates\": ${coords}}}`)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"longitudeRange = d3.extent(rfdata.map(d => d.Longitude))","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"latitudeRange = d3.extent(rfdata.map(d => d.Latitude))","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"md`### Map data from clhenrick\n\nThe \\`basemapTopoJSON\\` layer contains objects for counties, places, roads, and railways. Land areas are derived from the counties using \\`topojson.merge()\\`, county boundaries are derived using \\`topojson.mesh()\\`, and county centroids used for labeling are derived using \\`d3.geoCentroid\\`.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"basemapTopoJSON = await d3.json(\"https://gist.githubusercontent.com/clhenrick/4ebb009378a9ede30d3db672caeb9ff5/raw/bda4918592ff5e089ee4deb6650c4e5d70adb994/basemap_layers.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"landArea = topojson.merge(basemapTopoJSON, basemapTopoJSON.objects[\"county_boundaries\"].geometries)","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"countyBoundaries = topojson.mesh(basemapTopoJSON, basemapTopoJSON.objects[\"county_boundaries\"], boundaryFilter)","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"places = topojson.feature(basemapTopoJSON, basemapTopoJSON.objects.osm_cities_towns)","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"roads = topojson.feature(basemapTopoJSON, basemapTopoJSON.objects.osm_major_roads)","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"rail = topojson.feature(basemapTopoJSON, basemapTopoJSON.objects.osm_railways)","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"countyCentroids = {\n const counties = topojson.feature(basemapTopoJSON, basemapTopoJSON.objects.county_boundaries)\n counties.features.forEach(d => { \n d.geometry = {\n type: \"Point\",\n coordinates: d3.geoCentroid(d)\n }\n })\n return counties\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"md`### misc from dlhenrick`","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"// california state plane 3 | https://github.com/veltman/d3-stateplane\nprojection = d3.geoConicConformal()\n .parallels([37 + 4 / 60, 38 + 26 / 60])\n .rotate([120 + 30 / 60], 0)\n .fitSize([width, height], mapFrameGeoJSON)","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"path = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"function zoom (s) {\n s.call(d3.zoom()\n .on(\"zoom\", () => s.select(\"#map-layers\").attr(\"transform\", d3.event.transform))\n .scaleExtent([1, 18])\n .translateExtent([[0, 0], [width, height]]))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"width = 612","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"height = 500 //792","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"greys = d3.schemeGreys[9]","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"textShadow = \"-1.5px -1.5px white, -1.5px 1.5px white, 1.5px 1.5px white, 1.5px -1.5px white, -1.5px 0 white, 0 1.5px white, 1.5px 0 white, 0 -1.5px white\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"textOffset = ({ x: 0, y: 3 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"boundaryFilter = (a, b) => a !== b","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`### Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"topojson = require(\"topojson\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":313,"value":"import {circleLegend} from \"@jonhelfman/circle-legend\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}