Public
Edited
Jul 3, 2023
Schools map
buttonwillow = {
const chartWidth = 60;
const chartHeight = 70;
// const backgroundColor = "#212121";
const landColor = "#212121";
const landStroke = "#767676";
const markerColor = "#00728D";
const labelOnWaterColor = "#504C57";
const labelOnLandColor = "#FAF9FB";
const projection = d3.geoMercator()
.scale([300])
.center([-119.673, 37.250])
.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.selectAll('path')
.data(ca_map.features)
.join('path')
.attr('d', pathGenerator)
.attr('fill', '#fff')
.attr('stroke', landStroke)
.attr('stroke-width', 1);
svg.selectAll("circle")
.data(bw)
.join("circle")
.attr("cx", d => projection(d.coordinates)[0])
.attr("cy", d => projection(d.coordinates)[1])
.attr("r", 3)
.attr("fill-opacity", d => d.name == "Buttonwillow Elementary" ? 1 : 0)
.attr("fill", d => d.type == "school" ? markerColor: "#aaa");
return svg.node();
}
nevada = {
const chartWidth = 60;
const chartHeight = 70;
// const backgroundColor = "#212121";
const landColor = "#212121";
const landStroke = "#767676";
const markerColor = "#00728D";
const labelOnWaterColor = "#504C57";
const labelOnLandColor = "#FAF9FB";
const projection = d3.geoMercator()
.scale([300])
.center([-119.673, 37.250])
.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.selectAll('path')
.data(ca_map.features)
.join('path')
.attr('d', pathGenerator)
.attr('fill', '#fff')
.attr('stroke', landStroke)
.attr('stroke-width', 1);
svg.selectAll("circle")
.data([{
name: "Nevada Union High School",
coordinates: [-121.05492512774796, 39.2401964234913],
type: "school"
}])
.join("circle")
.attr("cx", d => projection(d.coordinates)[0])
.attr("cy", d => projection(d.coordinates)[1])
.attr("r", 3)
.attr("fill-opacity", 1)
.attr("fill", d => d.type == "school" ? markerColor: "#aaa");
return svg.node();
}
sanantonio = {
const chartWidth = 60;
const chartHeight = 70;
// const backgroundColor = "#212121";
const landColor = "#212121";
const landStroke = "#767676";
const markerColor = "#00728D";
const labelOnWaterColor = "#504C57";
const labelOnLandColor = "#FAF9FB";
const projection = d3.geoMercator()
.scale([300])
.center([-119.673, 37.250])
.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.selectAll('path')
.data(ca_map.features)
.join('path')
.attr('d', pathGenerator)
.attr('fill', '#fff')
.attr('stroke', landStroke)
.attr('stroke-width', 1);
svg.selectAll("circle")
.data([{
name: "San Antonio Elementary",
coordinates: [-121.08354543133099, 35.94350047291337],
type: "school"
}])
.join("circle")
.attr("cx", d => projection(d.coordinates)[0])
.attr("cy", d => projection(d.coordinates)[1])
.attr("r", 3)
.attr("fill-opacity", 1)
.attr("fill", d => d.type == "school" ? markerColor: "#aaa");
return svg.node();
}
bw = [
{
name: "Buttonwillow Elementary",
coordinates: [-119.47451528716766, 35.400394477739965],
type: "school"
}
]
data = [
{
name: "Nevada Union High School",
coordinates: [-121.05492512774796, 39.2401964234913],
type: "school"
},
{
name: "Buttonwillow Elementary",
coordinates: [-119.47451528716766, 35.400394477739965],
type: "school"
},
{
name: "San Antonio Elementary",
coordinates: [-121.08354543133099, 35.94350047291337],
type: "school"
},
{
name: "Bakersfield",
coordinates: [-119.02641378577832, 35.65892310306731],
type: "city"
},
{
name: "Sacramento",
coordinates: [-121.48928877186854, 38.77725609908646],
type: "city"
}
]
schools = [
{
name: "Nevada Union High School",
coordinates: [-121.05492512774796, 39.2401964234913],
offset: 150
},
{
name: "Buttonwillow Elementary",
coordinates: [-119.47451528716766, 35.400394477739965],
offset: -170
},
{
name: "San Antonio Elementary",
coordinates: [-121.08354543133099, 35.94350047291337],
offset: -130
}
]
cities = [
{
name: "Bakersfield",
coordinates: [-119.02641378577832, 35.65892310306731],
},
{
name: "Sacramento",
coordinates: [-121.48928877186854, 38.77725609908646]
}
]
ca_map = FileAttachment("ca-test.geojson").json()
style = {
yield html`<style>
@import url('https://fonts.googleapis.com/css2?family=Overpass&display=swap');
div, input, button {
font-family: 'Overpass', sans-serif;
}
</style>`
}
schoolsToDownload = [
{
name: "Nevada Union High School",
coordinates: [-121.05492512774796, 39.2401964234913],
city: "Grass Valley",
county: "Nevada"
},
{
name: "Buttonwillow Elementary",
coordinates: [-119.47451528716766, 35.400394477739965],
city: "Buttonwillow",
county: "Kern"
},
{
name: "San Antonio Elementary",
coordinates: [-121.08354543133099, 35.94350047291337],
city: "Lockwood",
county: "Monterey"
}
]
california = FileAttachment("california.json").json()
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.
