d3 = require("d3")
bayAreaMap= await d3.json("https://raw.githubusercontent.com/geoiq/gc_data/master/datasets/9018.geojson")
markers = [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
122.2111576795578,
-17.928395068168417
]
}
}
]
viewof circleTwoRadius = Scrubber(
d3.range(50, 401, 1),
{ autoplay: false, delay: 1500, loop: false }
)
viewof circleOneRadius = Scrubber(
d3.range(50, 401, 1),
{ autoplay: false, delay: 1500, loop: false }
)
projection = d3.geoMercator()
.scale([180])
.center(markers[0].geometry.coordinates)
.translate([300 / 4, 300 / 3]);
yelpCoords= FileAttachment("asst3_yelp (1).csv").csv()
dataset = yelpCoords.map(shop => {
let coordinates = shop.coordinates.split(',')
shop.longitude = parseFloat(coordinates[0])
shop.latitude = parseFloat(coordinates[1])
return shop
})
pathRenderer = d3.geoPath().projection(projection);
chart = {
const width=800, height=800;
const svg = d3.select(DOM.svg(width, height))
// Use Mercator projection
var projection = d3.geoMercator()
.fitExtent([[10, 10], [width, height]], bayAreaMap);
var path = d3.geoPath()
.projection(projection);
// Draw each province as a path
svg.append('g').selectAll('path')
.data(bayAreaMap.features)
.enter().append('path')
.attr('d', path)
// Styling
.style('fill', 'white')
.style('stroke', '#ccc')
svg.selectAll('circle')
.data(dataset)
.join('circle')
.attr('cx', d => {
console.log(d)
return projection([d.latitude, d.longitude])[0]
})
.attr('cy', d => projection([d.latitude, d.longitude])[1])
.attr('fill', "purple")
.attr('r', 3);
//svg.selectAll("circle")
//.data(yelpCoords)
//.join("circle")
//.attr("cx", d => projection(d.latitude))
//.attr("cy", d => projection(d.longitude))
//.attr("r", 4)
//.attr("fill-opacity", 0.5)
//.attr("fill", "blue")
//.attr("stroke", "blue");
// const yelp = yelpCoordinates
// .append('g')
// .attr(
// 'transform',
// ({ longitude, latitude }) =>
// `translate(${projection([longitude, latitude]).join(",")})`
// );
//yelp.append('circle').attr('r', 2);
// const labels = svg.append("g").attr("id", "labels")
// labels.selectAll("text")
// .data(bayAreaMap.features)
// .join('text')
// .attr('text-anchor', 'middle')
// .attr('fill', 'white')
// .text(d => d.properties.CITY)
// .attr('x', d => pathRenderer.centroid(d)[0])
// .attr('y', d => pathRenderer.centroid(d)[1])
/* show tooltip on mouseover ******/
svg.selectAll("circle")
.on("mouseover", function (event, d) {
let x = projection([d.longitude, d.latitude])[0];
let y = projection([d.longitude, d.latitude])[1];
svg.select("#tooltip-text")
.text(d.name);
let positionOffest = 8;
svg.select("#tooltip")
.attr("transform", `translate(${x + positionOffest}, ${y + positionOffest})`)
.style("display", "block");
d3.select(this)
.attr("stroke", "#333333")
.attr("stroke-width", 2);
})
/* hide tooltip on mouseout ******/
.on("mouseout", function (event, d) {
svg.select("#tooltip").style("display", "none");
d3.select(this)
.attr("stroke", "purple")
.attr("stroke-width", 1);
});
/* tooltip code */
const tooltipGroup = svg.append("g")
.attr("id", "tooltip")
.style("display", "none")
.append("text")
.attr("id", "tooltip-text")
.attr("x", 5)
.attr("y", 15)
.attr("font-size", "14px")
.attr("font-weight", "bold")
.attr("fill", "black");
/* intersection circle 1 */
svg.append("circle")
.attr("id", "circleOne")
.attr("cx", d => projection([-122.3642615, 37.5863038])[0])
.attr("cy", d => projection([-122.3642615, 37.5863038])[1])
.attr("r", 100)
.attr("fill-opacity", 0.25)
.attr("fill", "steelblue")
.attr("stroke", "steelblue")
/* intersection circle 2 */
svg.append("circle")
.attr("id", "circleTwo")
.attr("cx", d => projection([-122.3642615, 37.5863038])[0] + 100)
.attr("cy", d => projection([-122.3642615, 37.5863038])[1] + 100)
.attr("r", 100)
.attr("fill-opacity", 0.25)
.attr("fill", "steelblue")
.attr("stroke", "steelblue")
return svg.node()
}
updateCircleOneRadius = function (newRadius) {
d3.select("#circleOne")
.attr('r', newRadius)
}
updateCircleTwoRadius = function (newRadius) {
d3.select("#circleTwo")
.attr('r', newRadius)
}
updateCircleOneRadius(circleOneRadius)
import {Scrubber} from "@mbostock/scrubber"
yelpCoords
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
