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);
x = d3.scaleLinear()
.domain([0,1])
.range([0, width])
y = d3.scaleLinear()
.domain([0,1])
.range([800, 0])
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 => projection([d.latitude, d.longitude])[0])
.attr('cy', d => projection([d.latitude, d.longitude])[1])
.attr('fill', "purple")
.attr('r', 3)
.on("mouseover", function (event, d) { // <-- need to use the regular function definition to have access to "this"
svg.select("#tooltip-text")
.text(d.name);
svg.select("#tooltip-rating")
.text("Rating: " + d.rating);
svg.select("#tooltip-price")
.text("Price: " + d.price);
let positionOffest = 8;
svg.select("#tooltip")
// move the tooltip to where the cursor is
.attr("transform", `translate(${x(d.x) + positionOffest}, ${y(d.y) + positionOffest})`)
.style("display", "block"); // make tooltip visible
d3.select(this)
.attr("stroke", "#000")
.attr("stroke-width", 2);
svg.select("#tooltip")
// move the tooltip to where the cursor is
.attr("transform", `translate(${x(d.x) + positionOffest}, ${y(d.y) + positionOffest})`)
.style("display", "block"); // make tooltip visible
})
/* hide tooltip on mouseout ******/
.on("mouseout", function (event, d) {
svg.select("#tooltip").style("display", "none");
d3.select(this).attr("stroke", "none");
//.attr("stroke", "purple")
//.attr("stroke-width", 1);
});
const labels = svg.append("g").attr("id", "labels")
labels.selectAll("text")
.data(bayAreaMap)
.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])
/* 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", 50)
.attr("fill-opacity", 0.25)
.attr("fill", "steelblue")
.attr("stroke", "steelblue")
.call(drag);
/* 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", 50)
.attr("fill-opacity", 0.25)
.attr("fill", "steelblue")
.attr("stroke", "steelblue")
.call(drag);
/* 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");
return svg.node()
}
updateCircleOneRadius = function (newRadius) {
d3.select("#circleOne")
.attr('r', newRadius)
}
updateCircleTwoRadius = function (newRadius) {
d3.select("#circleTwo")
.attr('r', newRadius)
}
updateCircleOneRadius(circleOneRadius)
updateCircleTwoRadius(circleTwoRadius)
drag = {
function dragstarted(event, d) {
d3.select(this).raise().attr("stroke", "black");
}
function dragged(event, d) {
d3.select(this).attr("cx", event.x).attr("cy", event.y);
}
function dragended(event, d) {
d3.select(this).attr("stroke", null);
}
return d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended);
}
import {Scrubber} from "@mbostock/scrubber"
yelpCoords.p
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.
