Inglewood Existing Transit
zips = FileAttachment("LA Boundary.geojson").json()
stations = FileAttachment("Metro Stations.geojson").json()
locations = FileAttachment("Key Locations 1.geojson").json()
CDL = FileAttachment("community_dash_lines.geojson").json()
CD = FileAttachment("community_dash.geojson").json()
CEL = FileAttachment("commuter_express_lines.geojson").json()
CE = FileAttachment("commuter_express.geojson").json()
DDL = FileAttachment("downtown_dash_lines.geojson").json()
DD = FileAttachment("downtown_dash.geojson").json()
BL1 = FileAttachment("bikelanes_1.geojson").json()
BL2 = FileAttachment("bikelanes_2.geojson").json()
BL3 = FileAttachment("bikelanes_3.geojson").json()
inglewood = FileAttachment("Inglewood 2.geojson").json()
cali = FileAttachment("California.geojson").json()
streets = FileAttachment("Streets.geojson").json()
rivers = FileAttachment("Rivers.geojson").json()
LAHighways = FileAttachment("InglewoodHighways.dxf.geojson").json()
LAMainRoads = FileAttachment("InglewoodMainRoads.dxf.geojson").json()
Pacific =
FileAttachment("LAPacificOcean.geojson").json()
FootPrints = FileAttachment("Inglewood_Buildings.geojson").json()
Buildings = FileAttachment("Simp_Buildings.geojson").json()
olympics = FileAttachment("OlympicLocationsAttr..geojson").json()
parks3 = FileAttachment("parks i.geojson").json()
roads = FileAttachment("roads_Inglewood.geojson").json()
BusStops = FileAttachment("Bus Stops Simplified.geojson").json()
NewStations = FileAttachment("AddStations.geojson").json()
NewLine = FileAttachment("NewLineLAX@1.geojson").json()
NewMetro = FileAttachment("2028MetroAdditions.geojson").json()
MetroC = FileAttachment("Metro_C.geojson").json()
DTIW = FileAttachment("Downtown Inglewood West.geojson").json()
EHardy = FileAttachment("E Hardy.geojson").json()
Arbor = FileAttachment("Arbor Park Northwest.geojson").json()
PeopleMover = FileAttachment("PeopleMoverLine.geojson").json()
PMStops = FileAttachment("3PMStops.geojson").json()
T11 = FileAttachment("Traffic 1_1.geojson").json()
T12 = FileAttachment("Traffic 1_2.geojson").json()
T13 = FileAttachment("Traffic 1_3.geojson").json()
T14 = FileAttachment("Traffic 1_4.geojson").json()
T131 = FileAttachment("Traffic 1_3_1.geojson").json()
T132 = FileAttachment("Traffic 1_3_2.geojson").json()
d3 = require("d3@7", "d3-geo-scale-bar@1.2", "d3-tile@1")
projection = d3.geoMercator()
.fitSize([width - 50, innerHeight - 5], inglewood);
d32 = require("d3@7", "d3-geo-scale-bar@1.2", "d3-tile@1")
scaleBar = d32.geoScaleBar()
.projection(projection)
.size([-50, -5])
.left(.02)
.top(0.95)
.tickFormat(d3.format(","));
Cemetary = FileAttachment("Cemetary.geojson").json()
SoFi = FileAttachment("SoFi_Footprint.geojson").json()
chart = {
const width = 600,
height = 725;
const svg = d3.create("svg")
.attr("viewBox", [-20, 10, width, height]);
// Use Mercator projection
var projection = d3
.geoMercator()
.fitSize([width - 50, height - 5], inglewood);
var path = d3.geoPath().projection(projection);
var path1 = d3.geoPath().projection(projection);
var path2 = d3.geoPath().projection(projection);
var path3 = d3.geoPath().projection(projection);
var path4 = d3.geoPath().projection(projection);
var path5 = d3.geoPath().projection(projection);
var path6 = d3.geoPath().projection(projection);
var path7 = d3.geoPath().projection(projection);
var c = svg.selectAll("circle"); //d3 geopath
var g = svg.append("g").attr("id", "paths");
g.selectAll("path") //d3 geopath
//svg
//.selectAll('path')
.data(zips.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(225,225,225)")
.style('fill-opacity','.75')
.style("stroke-width", "0")
.style("stroke", "#ccc")
// Parks
g.selectAll("path3") //d3 geopath
//svg
//.selectAll('path')
.data(parks3.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", "green")
.style('fill-opacity','0.15')
.style("stroke-width", "0.2")
.style("stroke", "black")
// Cemetary
g.selectAll("path3") //d3 geopath
//svg
//.selectAll('path')
.data(Cemetary.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", "green")
.style('fill-opacity','0.15')
.style("stroke-width", "0.2")
.style("stroke", "black")
// Highways
g.selectAll("path3") //d3 geopath
//svg
//.selectAll('path')
.data(LAHighways.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", "green")
.style('fill-opacity','0')
.style("stroke-width", "2")
.style("stroke", "rgb(225,165,0)")
.style('stroke-opacity','0.5')
// Main Roads
g.selectAll("path3") //d3 geopath
//svg
//.selectAll('path')
.data(LAMainRoads.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", "green")
.style('fill-opacity','0')
.style("stroke-width", "1")
.style("stroke", "white")
.style('stroke-opacity','0.9')
// Streets
g.selectAll("path3") //d3 geopath
//svg
//.selectAll('path')
.data(streets.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", "green")
.style('fill-opacity','0')
.style("stroke-width", "0.5")
.style("stroke", "white")
.style('stroke-opacity','0.9')
// Rivers
g.selectAll("path3") //d3 geopath
//svg
//.selectAll('path')
.data(rivers.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", "blue")
.style('fill-opacity','0')
.style("stroke-width", "3")
.style("stroke", "rgb(135,206,250)")
.style('stroke-opacity','0.9')
// FootPrints
g.selectAll("path3") //d3 geopath
//svg
//.selectAll('path')
.data(Buildings.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(200,200,200)")
.style('fill-opacity','0.75')
.style("stroke-width", "0.15")
.style("stroke", "black")
// SoFi FootPrint
g.selectAll("path3") //d3 geopath
//svg
//.selectAll('path')
.data(SoFi.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(200,200,200)")
.style('fill-opacity','0.55')
.style("stroke-width", "0.15")
.style("stroke", "black")
// Station text
var t = svg.selectAll("text")//creating a variable t and adding all text objects to it
.data(stations.features)
.enter() //there are more data than elements, this selects them
.append("text") //appends path to data
.attr("x", function(d) {return path1.centroid(d)[0]})
.attr("y", function(d) {return path1.centroid(d)[1]-5})
.attr('font-family','helvetica')
.attr('font-size','.45em')
.attr('font-weight','550')
.style("fill", "rgb(50,50,50)")
.attr('text-anchor','left')
.text(function(d) {return d.properties.Name})
// Metro C
g.selectAll("path3") //d3 geopath
//svg
//.selectAll('path')
.data(MetroC.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", "green")
.style('fill-opacity','0')
.style("stroke-width", ".5")
.style("stroke", "rgb(50,205,50)")
.style('stroke-opacity','0.75')
// Rail Stations
//g.selectAll("circle") //d3 geopath
var c = svg.selectAll('circle')
c.enter().append('circle')
//svg
//.selectAll('path')
.data(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',2.5)
.attr("fill", "rgb(128,128,128)")
.style('fill-opacity','1')
//Bus Stops
//g.selectAll("circle2") //d3 geopath
c.enter().append('circle')
//svg
//.selectAll('path')
.data(BusStops.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',1.5)
.attr("fill", "rgb(255,255,255)")
.style('fill-opacity','1')
.style("stroke-width", ".25")
.style("stroke", "rgb(0,0,0)")
.on('mouseover', addBus)
.on('mouseout', removeBus)
// add Bus tool tip
var tooltip = svg.append("g");
function addBus(event, d) {
var centroid = path.centroid(d);
tooltip.call(
callout,
`Bus Stop: ${d.properties.STOPNAME} `
);
tooltip.attr("transform", "translate(" + centroid + ")");
}
// // remove Bus tool tip
function removeBus(event, d)
{tooltip.call(callout,null)
}
//Olympic text
var t = svg.selectAll("text")
.data(olympics.features)
.enter() //there are more data than elements, this selects them
.append("text") //appends path to data
.attr("x", function(d) {return path1.centroid(d)[0]})
.attr("y", function(d) {return path1.centroid(d)[1]-5})
.attr('font-family','helvetica')
.attr('font-size','.4em')
.attr('font-weight','450')
.style("fill", "rgb(0,0,0)")
.attr('text-anchor','middle')
.text(function(d) {return d.properties.name})
// Light Traffic
g.selectAll("path4") //d3 geopath
//svg
//.selectAll('path')
.data(T11.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", "green")
.style('fill-opacity','0')
.style("stroke-width", "1")
.style("stroke", "rgb(96,224,76)")
.style('stroke-opacity','0.7')
// Medium Traffic
g.selectAll("path5") //d3 geopath
//svg
//.selectAll('path')
.data(T12.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", "yellow")
.style('fill-opacity','0')
.style("stroke-width", "1")
.style("stroke", "rgb(237,135,33)")
.style('stroke-opacity','0.7')
// Heavy Traffic
g.selectAll("path6") //d3 geopath
//svg
//.selectAll('path')
.data(T13.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", "yellow")
.style('fill-opacity','0')
.style("stroke-width", "1")
.style("stroke", "rgb(222,44,31)")
.style('stroke-opacity','0.7')
// Very Heavy Traffic
g.selectAll("path7") //d3 geopath
//svg
//.selectAll('path')
.data(T14.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", "yellow")
.style('fill-opacity','0')
.style("stroke-width", "1")
.style("stroke", "rgb(120,27,8)")
.style('stroke-opacity','0.7')
// Heavy Traffic
g.selectAll("path6") //d3 geopath
//svg
//.selectAll('path')
.data(T132.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", "yellow")
.style('fill-opacity','0')
.style("stroke-width", "1")
.style("stroke", "rgb(222,44,31)")
.style('stroke-opacity','0.7')
svg.append("g")
.call(legend);
scaleBar
.projection(projection)
.size([width, height]);
svg.append("g")
.call(scaleBar);
return svg.node();
}
callout = (g, value) => {
if (!value) return g.style("display", "none");
g
.style("display", null)
.style("pointer-events", "none")
.style("font", "8px sans-serif");
const path = g.selectAll("path")
.data([null])
.join("path")
.attr("fill", "white")
.attr("stroke", "black");
const text = g.selectAll("text")
.data([null])
.join("text")
.call(text => text
.selectAll("tspan")
.data((value + "").split(/\n/))
.join("tspan")
.attr("x", 0)
.attr("y", (d, i) => `${i * 1.1}em`)
.style("font-weight", (_, i) => i ? null : "bold")
.text(d => d));
const {x, y, width: w, height: h} = text.node().getBBox();
text.attr("transform", `translate(${-w / 2},${15 - y})`);
path.attr("d", `M${-w / 2 - 10},5H-5l5,-5l5,5H${w / 2 + 10}v${h + 20}h-${w + 20}z`);
}
legend = svg =>
{
const g = svg
.attr("width", 400)
.attr("height", 400)
// Legend as a group
const legend = svg.append("g")
// Apply a translation to the entire group
.attr("transform", "translate(125, 650)")
const size = 10;
const border_padding = 10;
const item_padding = 5;
const text_offset = 2;
// Border
legend
.append('rect')
.attr("width", 110)
.attr("height", 75)
.style("fill", "rgb(255,255,255)")
.style('fill-opacity','.5')
.style("stroke-width", .75)
.style("stroke", "black");
// Boxes
legend.selectAll("boxes")
.data(domains)
.enter()
.append("rect")
.attr("x", border_padding)
.attr("y", (d, i) => border_padding + (i * (size + item_padding)))
.attr("width", size)
.attr("height", size)
.style("fill", (d) => color(d));
// Labels
legend.selectAll("labels")
.data(domains)
.enter()
.append("text")
.attr("x", border_padding + size + item_padding)
.attr("y", (d, i) => border_padding + i * (size + item_padding) + (size / 2) + text_offset)
// .style("fill", (d) => color(d))
.text((d) => d)
.attr("text-anchor", "left")
.style("alignment-baseline", "middle")
.style("font-family", "sans-serif")
.style("font-size", 10);
return svg.node();
}
palette = ["rgb(96,224,76)", "rgb(237,135,33)", "rgb(222,44,31)", "rgb(120,27,8)"];
domains = ["Light Traffic", "Medium Traffic", "Heavy Traffic", "Very Heavy Traffic"];
color = d3.scaleOrdinal(palette).domain(domains);
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.