chart = {
const width = 960,
height = 900;
const svg = d3.create("svg")
.attr("viewBox", [70, 450, width -10, height -500]);
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");
g.selectAll("circle")
.data(HRS_Stations.features)
.enter()
.append("circle")
.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");
g.selectAll("path")
//.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();
}