chart1 = {
const width = 1000,//pixel size of the map
height = 1000;
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width-10, height-10]);
// Use Mercator projection
var projection = d3
.geoMercator()//projection system used
.fitSize([width, height], _box_nyc_map_00);
var path = d3.geoPath().projection(projection);//need one of these for each line layer from qgis
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 g = svg.selectAll('g').attr("id", "paths");//qgis lines variable //one variable for each geometry type
var c = svg.selectAll("circle")//for circles
var p = svg.selectAll("polyline")//for polylines from rhino
var t = svg.selectAll("text")
var l = svg.selectAll("line")
//static lines from qgis
staticLines(path, _box_nyc_map_02.features,"rgb(31,122,140)",'.25','.1',"rgb(0,255,0)")
staticLines(path2, _blocks_nyc_map_05.features,"rgb(225,229,242)",'.25','.1',"rgb(0,255,0)")
staticLines(path3, _greenAreas_nyc_map_04.features,"rgb(200,225,200)",'.25','.1',"rgb(0,255,0)")
staticLines(path4,_streets_nyc_map_03.features,"none",1,.5,"rgb(180,180,180)")
function staticLines(path, data, sfill, sOpac, sW, stroke){
g.enter().append("path")
.data(data) //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", sfill)
.style('stroke-opacity',sOpac)
.style("stroke-width", sW)
.style("stroke", stroke)
}
//static points from qgis
//staticCircles(restrooms.features,'2','black','1',"0")
staticCircles(_schools_nyc_map_01.features,'1.5',"rgb(2,43,58)",'1',"0")
staticCircles(_shootingPoints_nyc_map_02.features,'1.5','red','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(_drone_web_011,'none','1','1','rgb(191,219,247)')
polyline(_network_web_01_prueba,'none','1','.5','red')
polyline(_drone_web_rute_icon_01,'none','1','1','rgb(191,219,247)')
polyline(_fondo_parts_012,"rgb(225,229,242)",'.25','.1',"rgb(0,255,0)")
//polyline(_texto_titulo_01,'none','1','1','black')
polyline(_texto_titulo_02,'white','1','1','white')
polyline(_texto_titulo_02_interior,'rgb(31,122,140)','1','1','rgb(31,122,140)')
//polyline(_drone_rute_web_01,'none','1','2','white') //rgb(230,57,70)
//polyline(_fondo_01,'rgb(31,122,140)','1','2',"rgb(31,122,140)") //rgb(230,57,70)
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(policestations) //get data to define path
.enter() //there are more data than elements, this selects them
.append('polyline')
.attr('class','policeicon')
.attr("points", _police_icon_01) //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", 'none')
.style("stroke-width", '1')
.style("stroke", 'black')
.on("mouseover", addWireframe)
.on("mouseout", removeWireframe)
p.enter().append("polyline")
.data(_zona_03_drone_03NoCrime) //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", '1.5')
.style("stroke", 'red')
//.style('stroke-dasharray','5 5')
.on("mouseover", addWireframe2)
.on("mouseout", removeWireframe2)
p.enter().append("polyline")
.data(_zona_01_drone_01) //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.5')
.style("stroke", 'white')
.style('stroke-dasharray','5 5')
.on("mouseover", addWireframe4)
.on("mouseout", removeWireframe4)
p.enter().append("polyline")
.data(_zona_02_drone_02) //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", 'white')
.style('stroke-dasharray','5 5')
.on("mouseover", addWireframe3)
.on("mouseout", removeWireframe3)
function addWireframe(event,d){
p.enter().append("polyline")
.data(_police_icon_02_policeCars_2) //get data to define path
.enter()
.append('polyline')
.attr('class','wireframe')
.attr("points", function(d) {return d})
.style("fill", 'none')
.style("stroke-width", '1')
.style("stroke", 'white')
svg//draw text
.append("text") //appends path to data
.attr('class','mText')
.attr('x',50)
.attr("y",785)
.attr('fill', 'white')
.style('font-family','helvetica')
.style("font-size", "11px")
.text('Call 311 or 212-NEW-YORK (212-639-9675) for help.')
}
function addWireframe2(event,d){
p.enter().append("polyline")
.data(_no_crime_icon_02_21) //get data to define path
.enter()
.append('polyline')
.attr('class','wireframe2')
.attr("points", function(d) {return d})
.style("fill", 'none')
.style("stroke-width", '1.5')
.style("stroke", 'white')
svg//draw text
.append("text") //appends path to data
.attr('class','mText')
.attr('x',145)
.attr("y",360)
.attr('fill', 'white')
.style('font-family','helvetica')
.style("font-size", "18px")
.text('No more crime')
}
function addWireframe4(event,d){
p.enter().append("polyline")
.data(_policeMan_03) //get data to define path
.enter()
.append('polyline')
.attr('class','wireframe4')
.attr("points", function(d) {return d})
.style("fill", 'none')
.style("stroke-width", '2')
.style("stroke", 'black')
svg//draw text
.append("text") //appends path to data
.attr('class','mText')
.attr('x',145)
.attr("y",360)
.attr('fill', 'white')
.style('font-family','helvetica')
.style("font-size", "18px")
.text('No more crime')
}
function addWireframe3(event,d){
p.enter().append("polyline")
.data(_drone_rute_web_01) //get data to define path
.enter()
.append('polyline')
.attr('class','wireframe3')
.attr("points", function(d) {return d})
.style("fill", 'none')
.style("stroke-width", '2')
.style("stroke", 'black')
.style('stroke-dasharray','5 5')
svg//draw text
.append("text") //appends path to data
.attr('class','mText')
.attr('x',350)
.attr("y",130)
.attr('fill', 'white')
.style('font-family','helvetica')
.style("font-size", "15px")
.text('My route')
}
function removeWireframe(event,d){
svg.selectAll('polyline.wireframe').remove()
svg.selectAll('text.mText').remove()
}
function removeWireframe2(event,d){
svg.selectAll('polyline.wireframe2').remove()
svg.selectAll('text.mText').remove()
}
function removeWireframe3(event,d){
svg.selectAll('polyline.wireframe3').remove()
svg.selectAll('text.mText').remove()
}
function removeWireframe4(event,d){
svg.selectAll('polyline.wireframe4').remove()
svg.selectAll('text.mText').remove()
}
//display names from spreadsheet - use this format for points from spreadsheet
t.enter().append('text')
.data(policestations) //get data to define path
.enter() //there are more data than elements, this selects them
.append("text") //appends path to data
//.attr('class','spots')
.attr('x',230)
.attr("y",function(d,i){return 390 +(i*16)})
.attr('fill', 'white')
.style('font-family','helvetica')
.style("font-size", "9px")
.style("text-anchor", "end")
.text(function(d){return d.Name})
.on("mouseover",musText)
.on("mouseout",removeMusText)
function removeMusText(event,d){
svg.selectAll("line.policestationsLine").remove()
svg.selectAll('polyline.policeicon').style("stroke", 'black')
}
function musText(event,d) {
svg.selectAll('polyline.policeicon').style("stroke", 'red')
//THESE ARE LINES FOR ANNOTATION
l.enter().append('line') ///long line
.data(policestations) //get data to define path
.enter() //there are more data than elements, this selects them
.append("line") //appends path to data
.attr('class','policestationsLine')
.attr('x1',240)
.attr("y1",520)
.attr('x2',projection([d.Long,d.Lat])[0])
.attr("y2",projection([d.Long,d.Lat])[1])
.attr('stroke', 'black')
.attr('stroke-width', '1.25')
.style('stroke-dasharray', '3 2')
l.enter().append('line')
.data(policestations) //get data to define path
.enter() //there are more data than elements, this selects them
.append("line") //appends path to data
.attr('class','policestationsLine')
.attr('x1',235)
.attr("y1",function(d,i){return 390 +(i*16)})
.attr('x2',function(d) {return projection([d.Long,d.Lat])[0]-5})
.attr("y2",function(d,i){return 390 +(i*16)})
.attr('stroke', 'black')
.attr('stroke-width', '.25')
.style('stroke-dasharray', '3 2')
l.enter().append('line')
.data(policestations) //get data to define path
.enter() //there are more data than elements, this selects them
.append("line") //appends path to data
.attr('class','policestationsLine')
.attr('x1',function(d) {return projection([d.Long,d.Lat])[0]-5})
.attr("y1",function(d,i){return 390 +(i*16)})
.attr('x2',function(d) {return projection([d.Long,d.Lat])[0]-5})
.attr("y2",function(d) {return projection([d.Long,d.Lat])[1]+10})
.attr('stroke', 'black')
.attr('stroke-width', '.25')
.style('stroke-dasharray', '3 2')
}
/////////////////////////////////////////////
t.enter().append('text') //policestation names - use this format for points from QGIS!!!!!!!
//.data(policestations.features) //get data to define path
.enter() //there are more data than elements, this selects them
.append("text") //appends path to data
//.attr('class','spots')
.attr('x',function(d) {return path.centroid(d)[0]})
.attr("y",function(d) {return path.centroid(d)[1]-8})
.attr('fill', 'black')
.style('font-family','helvetica')
.style('text-anchor','middle')
.style("font-size", "8px")
.text(function(d){return d.properties.NAME})
//points from spreadsheet
c.enter().append('circle')
.data(policestations) //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', 3)
.attr('fill', 'rgb(29,53,87)')
.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]+15)
.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',70)
.attr("y",700)
.attr('fill', 'white')
.style('font-family','helvetica')
.style("font-size", "18px")
.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();
}
_zona_03_drone_03NoCrime = FileAttachment("00_ZONA_03_DRONE_03 no crime.txt").tsv({array:true})
_policeMan_03 = FileAttachment("00_POLICE MAN_03.txt").tsv({array:true})
_policeMan_02 = FileAttachment("00_POLICE MAN_02.txt").tsv({array:true})
_policeMan_01 = FileAttachment("00_POLICE MAN_01.txt").tsv({array:true})
_texto_titulo_02_interior = FileAttachment("00_TEXTO_TITULO_02_interior.txt").tsv({array:true})
_texto_titulo_02 = FileAttachment("00_TEXTO_TITULO_02.txt").tsv({array:true})
_texto_titulo_01 = FileAttachment("00_TEXTO_TITULO_01.txt").tsv({array:true})
_zona_02_drone_02 = FileAttachment("00_ZONA_02_DRONE_02.txt").tsv({array:true})
_drone_web_rute_icon_01 = FileAttachment("00_DRONE_WEB_RUTE_ICON_01.txt").tsv({array:true})
_fondo_01 = FileAttachment("00_FONDO_01.txt").tsv({array:true})
_drone_rute_web_01 = FileAttachment("00_DRONE_RUTE_WEB_01.txt").tsv({array:true})
_no_crime_icon_02 = FileAttachment("00_NO_CRIME_ICON_02.txt").tsv({array:true})
_no_crime_icon_02_21 = FileAttachment("00_NO_CRIME_ICON_02_2@1.txt").tsv({array:true})
_no_crime_icon_01 = FileAttachment("00_NO_CRIME_ICON_01.txt").tsv({array:true})
_zona_01_drone_01 = FileAttachment("00_ZONA_01_DRONE_01.txt").tsv({array:true})
_police_icon_02_policeCars_2 = FileAttachment("00_POLICE_ICON_02_POLICE CARS_2.txt").tsv({array:true})
_police_icon_02_policeCars1 = FileAttachment("00_POLICE_ICON_02_POLICE CARS@1.txt").tsv({array:true})
wireframe = FileAttachment("wireframe.txt").tsv({array:true})
zone1 = FileAttachment("zone1.txt").tsv({array:true})
_police_icon_01 = FileAttachment("00_POLICE_ICON_01.txt").tsv({array:true})
_icon_02_prueba2 = FileAttachment("00_ICON_02_PRUEBA2.txt").tsv({array:true})
_icon_01_prueba = FileAttachment("00_ICON_01_PRUEBA.txt").tsv({array:true})
policestationlink = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vTRTjvwNdx5oqSw9Kb7q60hxVXP18Y5my0rrlUlliB_nvpwgQxQDyzv9M4wn4_sfMOw-3NzqJS7M8zR/pub?output=csv'
policestations = d3.csv(policestationlink,d3.autoType)
_network_web_01_prueba = FileAttachment("00_NETWORK_WEB_01_PRUEBA.txt").tsv({array:true})
_drone_web_011 = FileAttachment("00_DRONE_WEB_01@1.txt").tsv({array:true})
_box_nyc_map_02 = FileAttachment("00_BOX_NYC_MAP_02.geojson").json()
_box_nyc_map_00 = FileAttachment("00_BOX_NYC_MAP_00.geojson").json()
_schools_nyc_map_01 = FileAttachment("00_SCHOOLS_NYC_MAP_01.geojson").json()
_shootingPoints_nyc_map_02 = FileAttachment("00_SHOOTING POINTS_NYC_MAP_02.geojson").json()
_streets_nyc_map_03 = FileAttachment("00_STREETS_NYC_MAP_03.geojson").json()
_greenAreas_nyc_map_04 = FileAttachment("00_GREEN AREAS_NYC_MAP_04.geojson").json()
_blocks_nyc_map_05 = FileAttachment("00_BLOCKS_NYC_MAP_05.geojson").json()
_fondo_parts_012 = FileAttachment("00_FONDO_PARTS_01@2.txt").tsv({array:true})
graphic_test = FileAttachment("graphic_test.txt").tsv({array:true})
bbox1 = FileAttachment("bbox@1.geojson").json()
restrooms = FileAttachment("restrooms.geojson").json()
subways = FileAttachment("subways.geojson").json()
parks = FileAttachment("parks.geojson").json()
spotsLink = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vRwB-ukffxTe8cd2j54Lg_PGvR-3Dm6A6TZNS9AV1TRz5iNL3shNkXsyJLlXTGzcI4UCkyh9MJS9P0G/pub?output=csv'
spots = d3.csv(spotsLink,d3.autoType)
import { wrap_text, wrap_text_nchar } from "@ben-tanen/svg-text-and-tspan-word-wrapping"
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.
