Public
Edited
Feb 16, 2023
1 fork
Insert cell
Insert cell
data = FileAttachment("asst3_yelp.csv").csv()
//data_google = FileAttachment("asst3_google.csv").csv()
Insert cell
mapboxgl = {
const gl = await require("mapbox-gl@0.49");
if (!gl.accessToken) {
gl.accessToken =
"pk.eyJ1IjoidG1jdyIsImEiOiJja3FmbGJoNXMxNmx5Mm9uejIxcmpiNjh2In0.2F8HR-8J859J7frYE6DG9g";
const href = await require.resolve("mapbox-gl@0.49/dist/mapbox-gl.css");
document.head.appendChild(html`<link href=${href} rel=stylesheet>`);
}
return gl;
}
Insert cell
function getLocations(restaurant_data) {
let restaurant_locations = [];
let full_location = [];
let location_json = [];
let ALL_LAT_LONG = [];
let loc_list = [];
var names = [];
var category = [];
for (let i = 0; i < restaurant_data.length; i++) {
full_location = restaurant_data[i]["coordinates"];
loc_list = full_location.split(',');
ALL_LAT_LONG.push([Number(loc_list[1]),Number(loc_list[0])]);
names.push(restaurant_data[i]["name"]);
names.push(restaurant_data[i]["category"]);
}
return ALL_LAT_LONG
}
Insert cell
location_data = getLocations(data)

Insert cell
{
let container = html`<div style='height:600px;' />`;

// Give the container dimensions.
yield container;

let map = new mapboxgl.Map({
container,
center: [-122.159846, 37.601883],
zoom: 9,
style: "mapbox://styles/mapbox/streets-v9",
});

function project(d) {
return map.project(new mapboxgl.LngLat(d[0], d[1]));
}
var svg = d3
.select(container)
.append("svg")
.attr("width", "100%")
.attr("height", "400")
.style("position", "absolute")
.style("z-index", 2);

var dots = svg
.selectAll("circle")
.data(location_data)
.enter()
.append("circle")
.attr("r", 2)
.style("opcaity", 0.5)
.style("fill", "#fa1090");

function render() {
dots
.attr("cx", function(d) {
return project(d).x;
})
.attr("cy", function(d) {
return project(d).y;
});
}

// Call render method, and whenever map changes
render();
map.on("viewreset", render);
map.on("move", render);
map.on("moveend", render);
invalidation.then(() => map.remove());
}
Insert cell

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.
Learn more