chart = {
const width = 900,
height = 900;
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width-50, height-10]);
var projection = d3
.geoMercator()
.fitSize([width, height], bbox_new);
var path = 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 g = svg.selectAll('g').attr("id", "paths");
var c = svg.selectAll("circle")
var p = svg.selectAll("polyline")
var t = svg.selectAll("text")
staticLines(path4, openPark.features,"rgb(200,225,200)",'.25','.1',"rgb(0,255,0)")
staticLines(path5, dining_lines.features,"none",'1','.25',"rgb(255,0,0)")
function staticLines(path, data, sfill, sOpac, sW, stroke){
g.enter().append("path")
.data(data)
.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", sfill)
.style('stroke-opacity',sOpac)
.style("stroke-width", sW)
.style("stroke", stroke)
}
//static points from qgis
staticCircles(.features,'2','black','1',"0")
staticCircles(theaters.features,'4','blue','1',"0")
function staticCircles(data,r,sfill, sOpac, sWidth){
c.enter().append('circle')
.data(data) //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', r)
.attr('fill', sfill)
.style('fill-opacity',sOpac)
.style("stroke-width", sWidth)
}
//lines from rhino
polyline(graphic_test,'red','1','0','none')
polyline(face_outline,'rgb(255,255,0)','1','2','black')
polyline(eyes,'blue','1','1','black')
polyline(mouth,'none','1','3','red')
function polyline(data, sfill, sOpac, sW, stroke){
g.enter().append("polyline")
.data(data) //get data to define path
.enter() //there are more data than elements, this selects them
.append('polyline')
.attr("points", function(d){return d}) //The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", sfill)
.style('stroke-opacity',sOpac)
.style("stroke-width", sW)
.style("stroke", stroke)
}
//draw icons at spreadsheet location
p.enter().append("polyline")
.data(museums) //get data to define path
.enter() //there are more data than elements, this selects them
.append('polyline')
.attr("points", icon1) //The d attribute defines a path to be drawn, only applies to appended elements
.attr('transform',function(d) {return 'translate('+projection([d.Long,d.Lat])[0]+','+projection([d.Long,d.Lat])[1]+')'})
.style("fill", 'red')
.style("stroke-width", '.5')
.style("stroke", 'black')
.on("mouseover", addWireframe)
.on("mouseout", removeWireframe)
p.enter().append("polyline")
.data(zone1) //get data to define path
.enter() //there are more data than elements, this selects them
.append('polyline')
.attr("points", function(d) {return d}) //The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", 'white')
.style('fill-opacity','0')
.style("stroke-width", '2')
.style("stroke", 'black')
.style('stroke-dasharray','5 5')
.on("mouseover", addWireframe)
.on("mouseout", removeWireframe)
function addWireframe(event,d){
p.enter().append("polyline")
.data(wireframe) //get data to define path
.enter()
.append('polyline')
.attr('class','wireframe')
.attr("points", function(d) {return d})
.style("fill", 'none')
.style("stroke-width", '.5')
.style("stroke", 'black')
svg//draw text
.append("text") //appends path to data
.attr('class','mText')
.attr('x',50)
.attr("y",600)
.attr('fill', 'black')
.style('font-family','helvetica')
.style("font-size", "11px")
.text('this is a detail')
}
function removeWireframe(event,d){
svg.selectAll('polyline.wireframe').remove()
svg.selectAll('text.mText').remove()
}
//points from spreadsheet
c.enter().append('circle')
.data(museums) //get data to define path
.enter() //there are more data than elements, this selects them
.append("circle") //appends path to data
.attr('class','spots')
.attr('cx',function(d) {return projection([d.Long,d.Lat])[0]-5})
.attr("cy",function(d) {return projection([d.Long,d.Lat])[1]+10})
.attr('r', 6)
.attr('fill', 'cyan')
.style('fill-opacity','1')
.style("stroke-width", ".5")
.style("stroke", "black")
.on("mouseover", addText)
.on("mouseout", removeText)
function addText(event,d){
svg//draw text
.append("text") //appends path to data
.attr('class','mText')
.attr('x',projection([d.Long,d.Lat])[0])
.attr("y",projection([d.Long,d.Lat])[1])
.attr('fill', 'black')
.style('font-family','helvetica')
.style("font-size", "15px")
.text(d.Name)
svg//draw text
.append("text") //appends path to data
.attr('class','mText')
.attr('x',50)
.attr("y",300)
.attr('fill', 'black')
.style('font-family','helvetica')
.style("font-size", "11px")
.text(d.Description)
var wrap = svg.selectAll("text.mText")
.each(function(d, i) { wrap_text(d3.select(this), 100) });
}
function addText2(event,d){
svg//draw text
.append("text") //appends path to data
.attr('class','mText')
.attr('x',projection([d.Long,d.Lat])[0])
.attr("y",projection([d.Long,d.Lat])[1])
.attr('fill', 'black')
.style('font-family','helvetica')
.style("font-size", "15px")
.text('this is some new text')
}
function removeText(){
svg.selectAll('text.mText').remove()
}
return svg.node();
}