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] }
});
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]);
hi = {
const chartWidth = width;
const chartHeight = 800;
const backgroundColor = "#ADD8E6";
const landColor = "#09A573";
const landStroke = "#FCF5E9";
const markerColor = "#E26F99";
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("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', 1);
// svg.selectAll("circle")
// .attr("id", "restaurantMarker")
// .data(filtered)
// .join("circle")
// .attr("cx", d => projection(d.coordinates)[0])
// .attr("cy", d => projection(d.coordinates)[1])
// .attr("r", 4)
// .attr("fill-opacity", 0.5)
// .attr("fill", "#FFFF00")
// .attr("stroke", markerColor)
// .on("mouseover", function (event, d) { // <-- need to use the regular function definition to have access to "this"
const circles = d3.range(2).map(i => ({
// x: Math.random() * (width - 32 * 2) + 32,
// y: Math.random() * (chartHeight - 32 * 2) + 32,
x: 100,
y: [100,300],
r: [size1,size2]
}));
console.log("in cell",circlesData)
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.5)
.attr("fill", (d, i) => d3.schemeCategory10[i % 10])
.call(drag)
.call(contains);
// .call(d3.drag().on("drag", function(d){
// console.log("saywer",d)
// }));
// svg.select("#tooltip-text1")
// .text("Price " + d.name);
// svg.select("#tooltip-text")
// .append("rect").attr('x', 0)
// .attr('y', 0)
// .attr('width', 200)
// .attr('height', 40)
// .attr('stroke', 'black')
// .attr('fill', '#69a3b2');
// svg.select("#tooltip-text1")
// .text("Price " + d.name);
// svg.selectAll("path").enter().append()
// .attr("id", "restaurantMarker")
// .data(filtered)
// .join('path')
// .attr("cx", d => projection(d.coordinates)[0])
// .attr("cy", d => projection(d.coordinates)[1])
// .attr('d', symbolGenerator.type(d3['symbolStar']))
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.5)
.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")
// move the tooltip to where the cursor is
.attr("transform", `translate(${projection(d.coordinates)[0] + positionOffest}, ${projection(d.coordinates)[1] + positionOffest})`)
.style("display", "block"); // make tooltip visible
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")
// tooltipGroup.append("text")
// .attr("id", "tooltip-text1")
// .attr("x", 5)
// .attr("y", 30)
// .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")
return svg.node()
}
circlesData = d3.range(2).map(i => ({
// x: Math.random() * (width - 32 * 2) + 32,
// y: Math.random() * (chartHeight - 32 * 2) + 32,
id: i,
x: 100,
y: 100+200*i,
r: [size1,size2]
}));
viewof size2 = Inputs.range([0, 100], {step: 1, label: "Circle Size 1"})
viewof size1 = Inputs.range([0, 100], {step: 1, label: "Circle Size 1"})
drag = {
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);
console.log("drag end", d.x)
//var id = d3.select(this)
var id = d.id
//console.log("HII",id)
circlesData[id].x = d.x
circlesData[id].y = d.y
console.log(circlesData[id].x)
console.log(circlesData)
overlapData.forEach(function(d,i) {
var a = projection1(d.coordinates)
var x = a[0]
var y = a[1]
if (overlaps(x,y)){
console.log("MEEE",overlapData[i])
overlapData[i].selected = 1
d.selected = 1
} else {
overlapData[i].selected = 0
}
})
}
function dragended(event, d) {
d3.select(this).attr("stroke", null);
print("hello")
console.log("YOOOHH",d3.select(this).attr("cx"))
}
return d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended);
}
function contains(event,d){
console.log(event)
// console.log("HELLOOOO",d._groups[0]);
// var data = d._groups[0]
// var circle1 = data[0].__data__
// var circle2 = data[1].__data__
// console.log("heyy",circle1)
// return circle1
}
price
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)){
console.log("YOOO aaa")
d.selected = 1
} else {
d.selected = 0
}
return d
})
topGenresOther = [
"Action",
"Comedy",
"Animation",
"Drama",
]
viewof colors = Inputs.checkbox(["red", "green", "blue"], {label: "color"})
colors
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(){
var choices = [];
var checkboxes = d3.selectAll("#checkbox");//.on("click", function(){
checkboxes.each(function(d){
var cbox = d3.select(this);
if(cbox.property("checked")){
choices.push(cbox.property("value"));
}
});
// //checkbox filter
// var filterData;
// if(choices.length > 0){
// filterData = data.filter(function(d,i){return choices.includes(d);});
// } else {
// filterData = data;
// }
// //filterData = filterData.filter(d => d.price >= priceSlider[0] && d.price <= priceSlider[1]);
// var circles = d3.selectAll("circle");
// circles.data(filterData).enter()
// .append('circle');
// circles.attr('cx', (d) => 10)
// .attr('cy', (d) => 20)
// .attr('r', 1);
// //.attr('fill', (d) => colorScale(d.cut));
// circles.exit().remove();
// d3.selectAll(".axes").remove();
}
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.
