Published unlisted
Edited
Mar 16, 2022
Insert cell
# Lemoore, CA
Insert cell
scaleBar = d3.geoScaleBar()
.top(.1)
.left(.1)
//.label("Yards")
.units({units: "150 Feet", radius: 20902259.664}) // Will do the same as the previous two lines

//.units({units: "350 Yards", radius: 6967419.888})
//.distance(width <= 400 ? 1200 : 1000)
.distance(150)
.labelAnchor("left")
//.tickSize(null)
//.tickValues(null)
Insert cell
Lemoore_SubSts = FileAttachment("Lemoore_SubSts_Dissolved_Railroad Crossings@1.geojson").json()
Insert cell
CA_Counties = FileAttachment("Lemoore_County.geojson").json()
Insert cell
Urbansprawl_City = FileAttachment("Lemoore_City.geojson").json()
Insert cell
d3 = require("d3@7", "d3-geo-scale-bar@1.2", "d3-tile@1")
Insert cell
HSR_Route = FileAttachment("California High Speed Rail Route Full.geojson").json()
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
chart = {
const width = 960,
height = 900;
const svg = d3.create("svg")
.attr("viewBox", [70, 450, width -10, height -500]);

// Use Mercator projection
var projection = d3
.geoMercator()
.fitSize([width -5, height -5], CA_Counties);

var path = d3.geoPath().projection(projection);
var path2 = d3.geoPath().projection(projection);
var path5 = d3.geoPath().projection(projection);


var g = svg.append("g").attr("id", "paths");
//HSR Stations
g.selectAll("circle") //d3 geopath
//svg
//.selectAll('path')
.data(HRS_Stations.features) //get data to define path
.enter() //there are more data than elements, this selects them
.append("circle") //appends path to data
.attr('cx',function(d) {return path.centroid(d)[0]})
.attr('cy',function(d) {return path.centroid(d)[1]})
.attr('r' ,4)
.style("fill", "rgb(204, 102, 160)")
.style('fill-opacity','.7')
.style("stroke-width", "1")
.style("stroke", "#ccc")
var g = svg.append("g").attr("id", "paths");
//California Rail Lines
g.selectAll("path") //d3 geopath
//svg
//.selectAll('path')
.data(Rail.features) //get data to define path
.enter() //there are more data than elements, this selects them
.append("path") //appends path to data
.attr('class','outlines')
.attr("d", path) //The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", "none")
.style('fill-opacity','.5')
.style("stroke-width", ".5")
.style("stroke", "rgb(51, 57, 107)")
var g = svg.append("g").attr("id", "paths");
g.selectAll("path") //d3 geopath
//svg
//.selectAll('path')
.data(CA_Counties.features) //get data to define path
.enter() //there are more data than elements, this selects them
.append("path") //appends path to data
.attr('class','outlines')
.attr("d", path) //The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", "white")
.style('fill-opacity','.4')
.style("stroke-width", "1")
.style("stroke", "rgb(255, 255, 255)")

var g = svg.append("g").attr("id", "paths");
g.selectAll("path") //d3 geopath
//svg
//.selectAll('path')
.data(Building.features) //get data to define path
.enter() //there are more data than elements, this selects them
.append("path") //appends path to data
.attr('class','outlines')
.attr("d", path) //The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", "rgb(0,0,0)")
.style('fill-opacity','1')
.style('stroke-opacity','1')
.style("stroke-width", "1")
.style("stroke", "rgb(0, 0, 0)")

var g = svg.append("g").attr("id", "paths");
//California Major Roads
g.selectAll("path") //d3 geopath
//svg
//.selectAll('path')
.data(Roads.features) //get data to define path
.enter() //there are more data than elements, this selects them
.append("path") //appends path to data
.attr('class','outlines')
.attr("d", path) //The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", "none")
.style('fill-opacity','.5')
.style("stroke-width", ".5")
.style("stroke", "rgb(157, 186, 212)")

var g = svg.append("g").attr("id", "paths");
//California HSR Route
g.selectAll("path") //d3 geopath
//svg
//.selectAll('path')
.data(HSR_Route.features) //get data to define path
.enter() //there are more data than elements, this selects them
.append("path") //appends path to data
.attr('class','outlines')
.attr("d", path) //The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", "none")
.style('fill-opacity','.5')
.style("stroke-width", "2")
.style("stroke", "rgb(204, 102, 160)")

var g = svg.append("g").attr("id", "paths");
g.selectAll("path") //d3 geopath
//svg
//.selectAll('path')
.data(Urbansprawl_City.features) //get data to define path
.enter() //there are more data than elements, this selects them
.append("path") //appends path to data
.attr('class','outlines')
.attr("d", path) //The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", "white")
.style('fill-opacity','.6')
.style("stroke-width", ".25")
.style("stroke", "black")

// var c = svg.selectAll("circle") //d3 geopath
// .data(Lemoore_SubSts.features)
// .enter() //there are more data than elements, this selects them
// .append("circle") //appends path to data
// .attr("cx", function(d) {return path.centroid(d)[0]})
// .attr("cy", function(d) {return path.centroid(d)[1]})
// .attr('r',4)
// .attr('fill','black')
// .style('fill-opacity','1')
var g = svg.append("g").attr("id", "paths");
//Sub Stations
g.selectAll("circle") //d3 geopath
//svg
//.selectAll('path')
.data(Lemoore_SubSts.features) //get data to define path
.enter() //there are more data than elements, this selects them
.append("circle") //appends path to data
.attr('cx',function(d) {return path.centroid(d)[0]})
.attr('cy',function(d) {return path.centroid(d)[1]})
.attr('r' ,4)
.style("fill", "rgb(0, 0, 0)")
.style('fill-opacity','.7')
.style("stroke-width", "1")
.style("stroke", "#ccc")
//subway text
var t = svg.selectAll("text")
.data(Lemoore_SubSts.features)
.enter() //there are more data than elements, this selects them
.append("text") //appends path to data
.attr("x", function(d) {return path.centroid(d)[0]})
.attr("y", function(d) {return path.centroid(d)[1]-5})
.attr('font-family','helvetica')
.attr('font-size','1em')
.attr('font-weight','400')
.style("fill", "rgb(110,110,110)")
.attr('text-anchor','middle')
.text(function(d) {return d.properties.name})



// function addfill(event,d) {
// d3.select(this).style("fill", "red")
// d3.select(this).style('fill-opacity','.5')

// svg
// .append('text')
// .attr('class', 'labels')
// .attr('x', '100')
// .attr('y', '700')
// .attr('fontsize', '.75em')
// .text(d.properties.NAME)

// svg
// .append('text')
// .attr('class', 'labels')
// .attr('x', '100')
// .attr('y', '725')
// .attr('fontsize', '.75em')
// .text(d.properties.California_Population_Population)

// svg
// .append('text')
// .attr('class', 'labels')
// .attr('x', '100')
// .attr('y', '750')
// .attr('fontsize', '.75em')
// .text(d.properties.California_Population_WaterDay)
// svg
// .append('text')
// .attr('class', 'labels')
// .attr('x', '100')
// .attr('y', '775')
// .attr('fontsize', '.75em')
// .text(d.properties.California_Population_CountyDay)


// svg
// .append('text')
// .attr('class', 'labels')
// .attr('x', '100')
// .attr('y', '800')
// .attr('fontsize', '.75em')
// .text(d.properties.California_Population_CountyYear)

// svg
// .append('text')
// .attr('class', 'labels')
// .attr('x', '100')
// .attr('y', '700')
// .attr('fontsize', '.75em')
// .text(d.properties.WATERWAY)

// svg
// .append('text')
// .attr('class', 'labels')
// .attr('x', '100')
// .attr('y', '700')
// .attr('fontsize', '.75em')
// .text(d.properties.Layer)

//draw site outline
g.selectAll("path5") //d3 geopath
.data(site.features) //get data to define path
.enter() //there are more data than elements, this selects them
.append("path") //appends path to data
.attr('class','outlines')
.attr("d", path5) //The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", "none")
.style("fill-opacity", "1")
.style('stroke-opacity','1')
.style("stroke-width", '2')
.style("stroke", "rgb(0,0,0)")
.attr('stroke-dasharray','12 12')

//add labels to site line
svg
.append("text")
.attr('class','title')
.attr('x','400')
.attr('y','500')
.attr('font-family','helvetica')
.attr('font-size','1em')
.attr('font-weight','bold')
.style("fill", "rgb(0,0,0)")
.text('Lemoore, CA')

svg
.append("text")
.attr('class','title')
.attr('x','400')
.attr('y','517')
.attr('font-family','helvetica')
.attr('font-size','.7em')
.attr('font-weight','200')
.style("fill", "rgb(0,0,0)")
.text('The Exisiting of Movement')

svg
.append("line")
.attr('x1','400')
.attr('y1','495')
.attr('x2','378')
.attr('y2','495')
.attr('stroke-width','1.5')
.attr('stroke','rgb(0,0,0)')
// }

//function removefill(event,d) {
// d3.selectAll('text.labels').remove()
// d3.select(this).style("fill", "blue")
// d3.select(this).style('fill-opacity','.4')
// }
scaleBar
.projection(projection)
.size([width, height]);

svg.append("g")
.call(scaleBar);

return svg.node();
}
Insert cell
site = FileAttachment("site_boundary_02.geojson").json()
Insert cell

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.
Learn more