Notebooks 2.0 is here.
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])]}
});
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;
}
map = {
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)
svg.append("rect")
.attr("width", chartWidth)
.attr("height", chartHeight)
.attr('fill', backgroundColor);
svg.selectAll('path')
.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(restaurantData)
.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"
svg.select("#tooltip-text")
.text(d.name);
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);
})
.on("mouseout", function (event, d) {
svg.select("#tooltip").style("display", "none"); // hide tooltip
d3.select(this).attr("stroke", "none"); // undo the stroke
});
const tooltipGroup = 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("text")
.text("hello")
.attr("id", "tooltip-text")
.attr("x", 5)
.attr("y", 15)
.attr("font-size", "14px")
.attr("font-weight", "bold")
.attr("fill", "black");
const colors = Inputs.checkbox(["$", "SS", "$$$"], {label: "Filter by Price"})
return svg.node();
}
viewof colors = Inputs.checkbox(["$", "SS", "$$$"], {label: "Filter by Price"})
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.
