Published unlisted
Edited
May 4, 2022
Restaurants Around Purposed Building _ Lemoore, CA
scaleBar = d3.geoScaleBar()
.top(.1)
.left(.1)
//.label("Yards")
.units({units: "1:25000", radius: 125000}) // Will do the same as the previous two lines
//.units({units: "350 Yards", radius: 6967419.888})
//.distance(width <= 400 ? 1200 : 1000)
.distance(100)
.labelAnchor("left")
//.tickSize(null)
//.tickValues(null)
Lemoore_SubSts = FileAttachment("Lemoore_SubSts_Dissolved_Railroad Crossings@1.geojson").json()
Lemoore_Restaurants = FileAttachment("Lemoore_Restaurant@1.geojson").json()
CA_Counties = FileAttachment("Lemoore_County.geojson").json()
Urbansprawl_City = FileAttachment("Lemoore_City.geojson").json()
d3 = require("d3@7", "d3-geo-scale-bar@1.2", "d3-tile@1")
HSR_Route = FileAttachment("California High Speed Rail Route Full.geojson").json()
chart = {
const width = 960,
height = 1000;
const svg = d3.create("svg")
.attr("viewBox", [430, 480, width -0 , height -480 ]);
//.attr("viewBox", [-70, 450, width -10, height -500]);
// Use Mercator projection
var projection = d3
.geoMercator()
.fitSize([width +750, height -0], 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})
var g = svg.append("g").attr("id", "paths");
//Restaurants
g.selectAll("circle") //d3 geopath
//svg
//.selectAll('path')
.data(Lemoore_Restaurants.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' ,3)
.style("fill", "rgb(255, 128, 0)")
.style('fill-opacity','.7')
.style("stroke-width", "1")
.style("stroke", "#ccc")
//Restaurant text
var t = svg.selectAll("text")
.data(Lemoore_Restaurants.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(255,128,0)")
.attr('text-anchor','middle')
.text(function(d) {return d.properties.name})
//add labels for restaurants
svg
.append("text")
.attr('class','title')
.attr('x','450')
.attr('y','650')
.attr('font-family','helvetica')
.attr('font-size','0.5em')
.attr('font-weight','bold')
.style("fill", "rgb(255,128,0)")
.text('Existing Restaurants')
// 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','700')
.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','700')
.attr('y','517')
.attr('font-family','helvetica')
.attr('font-size','.7em')
.attr('font-weight','200')
.style("fill", "rgb(0,0,0)")
.text('The Purposed Map of Zoning Plan')
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)')
//draw site outline
g.selectAll("path5") //d3 geopath
.data(site2.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(153,0,0)")
.attr('stroke-dasharray','12 12')
//add labels to site line
svg
.append("text")
.attr('class','title')
.attr('x','450')
.attr('y','630')
.attr('font-family','helvetica')
.attr('font-size','0.5em')
.attr('font-weight','bold')
.style("fill", "rgb(153,0,0)")
.text('Purposed Building Area')
//draw Zoning W
g.selectAll("path5") //d3 geopath
.data(ZoningWsite.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", "rgb(204,255,204)")
.style("fill-opacity", "0.3")
.style('stroke-opacity','0.4')
.style("stroke-width", '0.4')
.style("stroke", "rgb(204,255,204)")
//add Zoning W labels to site line
svg
.append("text")
.attr('class','title')
.attr('x','450')
.attr('y','610')
.attr('font-family','helvetica')
.attr('font-size','0.5em')
.attr('font-weight','bold')
.style("fill", "rgb(204,255,204)")
.text('Wetlands')
//draw Zoning AG
g.selectAll("path5") //d3 geopath
.data(ZoningAGsite.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", "rgb(0,51,0)")
.style("fill-opacity", "0.3")
.style('stroke-opacity','0.4')
.style("stroke-width", '0.4')
.style("stroke", "rgb(0,51,0)")
//add Zoning AG labels to site line
svg
.append("text")
.attr('class','title')
.attr('x','450')
.attr('y','590')
.attr('font-family','helvetica')
.attr('font-size','0.5em')
.attr('font-weight','bold')
.style("fill", "rgb(0,51,0)")
.text('Agriculture')
//draw Zoning Light Industry
g.selectAll("path5") //d3 geopath
.data(ZoningLightIndustrysite.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", "rgb(204,204,255)")
.style("fill-opacity", "0.3")
.style('stroke-opacity','0.4')
.style("stroke-width", '0.4')
.style("stroke", "rgb(204,204,255)")
//add Zoning Light Industry labels to site line
svg
.append("text")
.attr('class','title')
.attr('x','450')
.attr('y','570')
.attr('font-family','helvetica')
.attr('font-size','0.5em')
.attr('font-weight','bold')
.style("fill", "rgb(204,204,255)")
.text('Light Industrial')
//draw Zoning PR
g.selectAll("path5") //d3 geopath
.data(ZoningPRsite.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", "rgb(153,255,51)")
.style("fill-opacity", "0.3")
.style('stroke-opacity','0.4')
.style("stroke-width", '0.4')
.style("stroke", "rgb(153,255,51)")
//add Zoning PR labels to site line
svg
.append("text")
.attr('class','title')
.attr('x','450')
.attr('y','550')
.attr('font-family','helvetica')
.attr('font-size','0.5em')
.attr('font-weight','bold')
.style("fill", "rgb(153,255,51)")
.text('Parks & Recreation/ Ponding Basin')
//draw Zoning Public Service& Community Facilities
g.selectAll("path5") //d3 geopath
.data(ZoningPublic.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", "rgb(102,255,255)")
.style("fill-opacity", "0.3")
.style('stroke-opacity','0.4')
.style("stroke-width", '0.4')
.style("stroke", "rgb(102,255,255)")
//add Zoning Public Service& Community Facilities labels to site line
svg
.append("text")
.attr('class','title')
.attr('x','450')
.attr('y','530')
.attr('font-family','helvetica')
.attr('font-size','0.5em')
.attr('font-weight','bold')
.style("fill", "rgb(102,255,255)")
.text('Public Service & Community Facilities')
//draw Zoning RC
g.selectAll("path5") //d3 geopath
.data(ZoningRC.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", "rgb(255,204,204)")
.style("fill-opacity", "0.3")
.style('stroke-opacity','0.4')
.style("stroke-width", '0.4')
.style("stroke", "rgb(255,204,204)")
//add Zoning RC labels to site line
svg
.append("text")
.attr('class','title')
.attr('x','450')
.attr('y','510')
.attr('font-family','helvetica')
.attr('font-size','0.5em')
.attr('font-weight','bold')
.style("fill", "rgb(255,204,204)")
.text('Regional Commercial')
//draw Zoning River
g.selectAll("path5") //d3 geopath
.data(ZoningRiver.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", "rgb(160,160,160)")
.style("fill-opacity", "0.3")
.style('stroke-opacity','0.4')
.style("stroke-width", '0.4')
.style("stroke", "rgb(160,160,160)")
//draw Zoning RLD
g.selectAll("path5") //d3 geopath
.data(ZoningRLD.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", "rgb(255,255,0)")
.style("fill-opacity", "0.3")
.style('stroke-opacity','0.4')
.style("stroke-width", '0.4')
.style("stroke", "rgb(255,255,0)")
//add Zoning RLD labels to site line
svg
.append("text")
.attr('class','title')
.attr('x','450')
.attr('y','490')
.attr('font-family','helvetica')
.attr('font-size','0.5em')
.attr('font-weight','bold')
.style("fill", "rgb(255,255,0)")
.text('Low Density Residential')
//draw Zoning RLMD
g.selectAll("path5") //d3 geopath
.data(ZoningRLMD.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", "rgb(255,178,102)")
.style("fill-opacity", "0.3")
.style('stroke-opacity','0.4')
.style("stroke-width", '0.4')
.style("stroke", "rgb(255,178,102)")
//add Zoning RLMD labels to site line
svg
.append("text")
.attr('class','title')
.attr('x','450')
.attr('y','470')
.attr('font-family','helvetica')
.attr('font-size','0.5em')
.attr('font-weight','bold')
.style("fill", "rgb(255,178,102)")
.text('Low-Medium Density Residential')
//draw Zoning RMD
g.selectAll("path5") //d3 geopath
.data(ZoningRMD.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", "rgb(153,76,0)")
.style("fill-opacity", "0.3")
.style('stroke-opacity','0.4')
.style("stroke-width", '0.4')
.style("stroke", "rgb(153,76,0)")
//add Zoning RMD labels to site line
svg
.append("text")
.attr('class','title')
.attr('x','450')
.attr('y','450')
.attr('font-family','helvetica')
.attr('font-size','0.5em')
.attr('font-weight','bold')
.style("fill", "rgb(153,76,0)")
.text('Medium Density Residential')
// }
//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([ 9500, 9500]);
svg.append("g")
.call(scaleBar);
return svg.node();
}
ZoningRMD = FileAttachment("RMD_Lemoore.geojson").json()
ZoningRLMD = FileAttachment("RLMD_Lemoore.geojson").json()
ZoningRLD = FileAttachment("RLD_Lemoore.geojson").json()
ZoningRiver = FileAttachment("River_Lemoore.geojson").json()
ZoningRC = FileAttachment("RC_Lemoore.geojson").json()
ZoningPublic = FileAttachment("PublicServicesCommunityFacilities_Lemoore.geojson").json()
ZoningPRsite = FileAttachment("PR_Lemoore.geojson").json()
ZoningLightIndustrysite = FileAttachment("LightIndustrial_Lemoore.geojson").json()
ZoningAGsite = FileAttachment("AG_Lemoore.geojson").json()
ZoningWsite = FileAttachment("W_Lemoore.geojson").json()
site = FileAttachment("site_boundary_02.geojson").json()
site2 = FileAttachment("Purposed_building_Lemoore.geojson").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.
