2b:null 2c:["$","title",null,{"children":"Location test | Ernesto Laval | Observable"}] 31:T8f8,mapZip3Code = { const us = zip3topojson; const container = d3.select(zip3Map); const size = d3.scaleLinear().domain([0,1]).range([2,10]); const mapLayer = container.select("g.map"); const othercirclesLayer = container.select("g.others"); const mycirclesLayer = container.select("g.mine"); const projection = d3.geoMercator() .translate([width / 2, height / 2]).scale(800).center([-100,35]) const path = d3.geoPath().projection(projection); let zip3Areas = mapLayer.selectAll("path.zip3") .data(topojson.feature(us, us.objects.zip3).features) zip3Areas = zip3Areas.enter().append("path") .attr("class", "zip3") .attr("stroke", "grey") .attr("stroke-linejoin", "round") .attr("d", path) .on("click", d => { d3.select("#selectedZip3").property("value",d.properties.ZIP).dispatch("input"); }) .merge(zip3Areas) ; let circles = mycirclesLayer.selectAll("circle.my") .data(myWithScores) circles.exit().remove(); circles = circles.enter().append("circle") .classed("my", true) .merge(circles); circles .on("mouseover", d => showDetails(d)) .attr("stroke-width", 0.1) .attr("stroke", "grey") .attr("opacity", 0.8) .attr("cx", d => { return projection([d.long, d.lat]) && projection([d.long, d.lat])[0] }) .attr("cy", d => { return projection([d.long, d.lat]) && projection([d.long, d.lat])[1] }) .attr("r", d => { return size(d.competitiveScore) }) let othercircles = othercirclesLayer.selectAll("circle.other") .data(otherlocationsMerged); othercircles.exit().remove(); othercircles = othercircles.enter().append("circle") .classed("other", true) .merge(othercircles); othercircles .attr("stroke-width", 0.1) .attr("stroke", "grey") .attr("opacity", 0.8) .attr("cx", d => { return projection([d.long, d.lat]) && projection([d.long, d.lat])[0] }) .attr("cy", d => { return projection([d.long, d.lat]) && projection([d.long, d.lat])[1] }) .attr("r", d => { return 2 }) function showDetails(d) { d3.select("text.details") .text(`Id: ${d.storeId} Score: ${d.competitiveScore} (lat:${d.lat} long:${d.long}`) } return md`Expand to see the code that builds the Zip3 map` }32:[] 2f:{"id":"ef64ae799f13e55a","slug":"location-test","title":"Location test","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2018-05-25T10:37:40.756Z","update_time":"$D2018-05-29T13:58:32.463Z","view_time":null,"first_public_time":"$D2018-05-25T12:38:17.237Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"0843f5dc42ca68a0","login":"elaval","name":"Ernesto Laval","avatar_url":"https://avatars-next.observableusercontent.com/089f0414fc9025dadb05cc06d7a406bc9be10093187c46729cb4ba3a4098dc30","tier":"starter_2024"},"version":150,"publish_version":150,"role":null,"authored":false,"authors":[{"type":"individual","id":"e04cd7b5f4351ae9","login":"elaval","name":"Ernesto Laval","avatar_url":"https://avatars-next.observableusercontent.com/089f0414fc9025dadb05cc06d7a406bc9be10093187c46729cb4ba3a4098dc30","tier":null}],"members":[{"type":"individual","id":"e04cd7b5f4351ae9","login":"elaval","name":"Ernesto Laval","avatar_url":"https://avatars-next.observableusercontent.com/089f0414fc9025dadb05cc06d7a406bc9be10093187c46729cb4ba3a4098dc30","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Location test","cells":[{"id":0,"value":"md`# Location test`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"md`## Current map is against ${otherlocations.data.competitors.map(d => competitor).join(\",\")}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"zip3Map = svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"viewof token = {\n const options = {};\n options[\"value\"] = window.localStorage.getItem(\"mytoken\") || null;\n return text(options)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"viewof competitor = {\n return text({value:\"ALDI\"})\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"competitor","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"otherlocationsMerged = _.concat(...otherlocations.data.competitors.map(d => d.stores))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"otherlocations = d3.json(`https://seyc-cms-api-dev-customer360.azurewebsites.net/cms/api/36/1/tradeArea/competitorStore?CompetitorNames=${competitor}&dateRangeType=fytd&to=201806&from=201801\n`, {\"headers\":{\"Authorization\":`Bearer ${token}`}})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"myWithScores = {\n const locDict = {};\n \n mylocations.data.forEach(d => {\n locDict[d.storeId] = {lat: d.lat, long: d.long}\n })\n \n let onlywithScore = scores.data.stores.filter(d=> d.competitiveScore > 0)\n \n onlywithScore.forEach(d => {\n d.lat = locDict[d.storeId].lat;\n d.long = locDict[d.storeId].long;\n })\n \n return onlywithScore\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"scores = {\n competitor;\n\n return d3.json(`https://seyc-cms-api-dev-customer360.azurewebsites.net/cms/api/36/1/tradeArea/Stores/CompetitiveScore?CompetitorNames=${competitor}&dateRangeType=fytd&to=201806&from=201801\n`, {\"headers\":{\"Authorization\":`Bearer ${token}`}})\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"mylocations = d3.json(`https://seyc-cms-api-dev.azurewebsites.net/cms/api/36/1/stores`, {\"headers\":{\"Authorization\":`Bearer ${token}`}})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"storeToken = {\n window.localStorage.setItem(\"mytoken\", token)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"_ = require(\"lodash\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"import {text} from \"@jashkenas/inputs\"\n\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"topojson = require(\"topojson\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"zip3topojson = d3.json(\"https://gist.githubusercontent.com/elaval/97a2a5b7114c856607949ab0a843bc13/raw/7dcb300ec4cc1d8a8039c50bbd5aea563664c911/zip3.topo.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"styles = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"