asst3_yelp.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
attachment = FileAttachment("asst3_yelp.csv").csv()
restaurantData = attachment.map((res) => {
return {id: res.id,
name:res.name,
img: res.image_url,
category:res.categories,
rating:res.rating,
coordinates:[parseFloat(res.coordinates.split(',')[1]),parseFloat(res.coordinates.split(',')[0])],
price:res.price,
selected:0,
x: projection1([parseFloat(res.coordinates.split(',')[1]),parseFloat(res.coordinates.split(',')[0])])[0],
y: projection1([parseFloat(res.coordinates.split(',')[1]),parseFloat(res.coordinates.split(',')[0])])[1] }
});//.slice(1, 2);
bayArea = FileAttachment("counties.geojson").json()
markers = [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-122.354344,37.820594
]
}
}
]
data = {
let data = Object.assign({}, bayArea);
data.features = bayArea.features;
return data;
}
projection1 = d3.geoMercator()
.scale([17000])
.center(markers[0].geometry.coordinates)
.translate([width / 2, 400]);
map = {
const newData = overlapData;
const chartWidth = width;
const chartHeight = 800;
const backgroundColor = "#ADD8E6";
const landColor = "#09A573";
const landStroke = "#FCF5E9";
const markerColor = "#5A5A5A";
const projection = d3.geoMercator()
.scale([17000])
.center(markers[0].geometry.coordinates)
.translate([chartWidth / 2, chartHeight / 2]);
const pathGenerator = d3.geoPath(projection);
const svg = d3.create('svg')
.attr("id","map")
.attr("title", "Map")
.attr('width', chartWidth)
.attr('height', chartHeight)
.attr("stroke-width", 0);
svg.append("rect")
.attr("width", chartWidth)
.attr("height", chartHeight)
.attr('fill', backgroundColor);
svg.selectAll('path')
.attr("class","unique")
.data(bayArea.features)
.join('path')
.attr('d', pathGenerator)
.attr('fill', landColor)
.attr('stroke', landStroke)
.attr('stroke-width', 0.5);
const circles = d3.range(2).map(i => ({
x: 100,
y: [100,300],
r: [size1,size2]
}));
svg.selectAll("circle")
.data(circlesData)
.attr("id","circle1")
.join("circle")
.attr("cx", d => d.x)
.attr("cy", d => d.y)
.attr("r", (d,i) => d.r[i])
.attr('fill-opacity', 0.25)
.attr('stroke', "black")
.attr('stroke-width', .1)
.attr("fill", "#E26F99")
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
svg.selectAll("circle").enter()
.attr("id", "restaurantMarker")
.data(overlapData)
.join("circle")
.attr("cx", d => projection(d.coordinates)[0])
.attr("cy", d => projection(d.coordinates)[1])
.attr("r", 4)
.attr("fill-opacity", 0.6)
.attr("fill", d => d.selected == 0 ? "#cccccc":"#E26F99")
.attr("stroke", markerColor)
.attr('stroke-width', 1)
.on("mouseover", function (event, d) {
svg.select("#tooltip-text")
.append("text").text(d.name + " (" + d.price + ")");
let positionOffest = 8;
svg.select("#tooltip")
.attr("transform", `translate(${projection(d.coordinates)[0] + positionOffest}, ${projection(d.coordinates)[1] + positionOffest})`)
.style("display", "block");
d3.select(this)
.attr("stroke", "#333333")
.attr("stroke-width", 2);
const path = tooltip.append("path")
.attr("fill", "white")
.attr("stroke", "black");
})
.on("mouseout", function (event, d) {
svg.select("#tooltip").style("display", "none"); // hide tooltip
svg.select("#tooltip-text").text(" ");
d3.select(this).attr("stroke", "none"); // undo the stroke
});
var path = d3.path();
svg.append("path")
.attr("fill", "none")
.attr("stroke", "#FFF")
.attr("d",path)
const tooltip = svg.append("g") // the tooltip needs to be added last so that it stays on top of all circles
.attr("id", "tooltip")
.style("display", "none") // hidden by default
.append("g")
.attr("id", "tooltip-text")
.attr("x", 5)
.attr("y", 15)
.attr("font-size", "14px")
.attr("font-weight", "bold")
.attr("fill", "black")
tooltip.append("text")
.attr("id", "tooltip-text1")
.attr("x", 5)
.attr("y", 30)
.attr("font-size", "14px")
.attr("font-weight", "bold")
.attr("fill", "black")
function dragstarted(event, d) {
d3.select(this).raise().attr("stroke", "black");
}
function dragged(event, d) {
d3.select(this).attr("cx", d.x = event.x).attr("cy", d.y = event.y);
var id = d.id
circlesData[id].x = d.x
circlesData[id].y = d.y
overlapData.forEach(function(d,i) {
var a = projection1(d.coordinates)
var x = a[0]
var y = a[1]
if (overlaps(x,y)){
overlapData[i].selected = 1
d.selected = 1
console.log("overlaps")
} else {
overlapData[i].selected = 0
d.selected = 0
}
})
overlapData.filter(function(d,i) {
var a = projection1(d.coordinates)
var x = a[0]
var y = a[1]
if (overlaps(x,y)){
overlapData[i].selected = 1
d.selected = 1
return d
} else {
overlapData[i].selected = 0
d.selected = 0
return null
}
})
const svg = d3.select("#map")
const marker = svg.select("#restaurantMarker")
d3.selectAll("circle").attr("fill", d => d.selected === 0 ? "#cccccc":"#E26F99").filter(d=>d.selected === 1)
}
function dragended(event, d) {
d3.select(this).attr("stroke", "black");
}
return svg.node()
}
circlesData = d3.range(2).map(i => ({
id: i,
x: 100,
y: 100+200*i,
r: [size1,size2]
}));
viewof size2 = Inputs.range([0, 100], {step: 1, label: "Adjust Circle 1 Radius"})
viewof size1 = Inputs.range([0, 100], {step: 1, label: "Adjust Circle 2 Radius"})
viewof sizes = Inputs.checkbox(new Map([["$", 1], ["$$", 2], ["$$$", 3]]), {value: [12], label: "Filter by Price"})
sizes
filtered = restaurantData.filter(function(d) {
if (sizes.length == 0){
return d
} else {
return d.price.length == sizes[0] || d.price.length == sizes[1] || d.price.length == sizes[2] ? d : null
}
})
overlapData = filtered.map(function(d) {
var a = projection1(d.coordinates)
var x = a[0]
var y = a[1]
if (overlaps(x,y)){
d.selected = 1
} else {
d.selected = 0
}
return d
})
function overlaps(x,y){
var circle1 = 0
var circle2 = 0
if ((x - circlesData[0].x)**2 + (y - circlesData[0].y)**2 < circlesData[0].r[0]**2){
circle1 = 1
}
if ((x - circlesData[1].x)**2 + (y - circlesData[1].y)**2 < circlesData[0].r[1]**2){
circle2 = 1
}
if (circle1 == 1 && circle2 == 1){
return true
}
return false
}
function update(){
overlapData.forEach(function(d,i) {
var a = projection1(d.coordinates)
var x = a[0]
var y = a[1]
if (overlaps(x,y)){
overlapData[i].selected = 1
d.selected = 1
} else {
overlapData[i].selected = 0
}
})
}
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.
