Public
Edited
Feb 3, 2023
asst3_yelp.csv
Type SQL, 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:res.coordinates}
});
height = 580;
width = 800;
{
// Create SVG
let svg = d3.select( "body" )
.append( "svg" )
.attr( "width", width )
.attr( "height", height );
// Append empty placeholder g element to the SVG
// g will contain geometry elements
let g = svg.append( "g" );
return svg.node();
}
bosProjection = d3.geoAlbers()
.scale( 50 )
.rotate( [122.221921,0] )
.center( [0, 37.600329] )
.translate( [width/2,height/2] );
bos_geoPath = d3.geoPath()
.projection( bosProjection );
bosNeighborhoods = FileAttachment("bayarea-neighborhoods.geo.json").json()
{
// Create SVG
let svg = d3.select(DOM.svg(width, height));
// Append empty placeholder g element to the SVG
// g will contain geometry elements
let g = svg.append("g");
// Classic D3... Select non-existent elements, bind the data, append the elements, and apply attributes
g.selectAll( "path" )
.data( bosNeighborhoods.features )
.enter()
.append( "path" )
.attr( "fill", "#ccc" )
.attr( "stroke", "#333")
.attr( "d", bos_geoPath );
return svg.node();
}
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.
