30: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` }31:[] 2e:{"title":"Location test","cells":[{"id":0,"value":"md`# Location test`","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"md`## Current map is against ${otherlocations.data.competitors.map(d => competitor).join(\",\")}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"zip3Map = svg``","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":43,"value":"viewof competitor = {\n return text({value:\"ALDI\"})\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"competitor","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"otherlocationsMerged = _.concat(...otherlocations.data.competitors.map(d => d.stores))","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"id":25,"value":"storeToken = {\n window.localStorage.setItem(\"mytoken\", token)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"_ = require(\"lodash\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"import {text} from \"@jashkenas/inputs\"\n\n\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"topojson = require(\"topojson\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"zip3topojson = d3.json(\"https://gist.githubusercontent.com/elaval/97a2a5b7114c856607949ab0a843bc13/raw/7dcb300ec4cc1d8a8039c50bbd5aea563664c911/zip3.topo.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"styles = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}