chart = {
const width = 900,//pixel size of the map
height = 900;
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width-50, height-10]);
// Use Mercator projection
var projection = d3
.geoMercator()//projection system used
.fitSize([width, height], bboxNol);//out bounding box is here
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 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(path3, subways.features,"none",1,.5,"rgb(180,180,180)")
staticLines(path, hexagon_nol_merge6.features,"rgb(200,225,200)",'.25','.1',"rgb(0,255,0)")
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", fillcolor)
.style('stroke-opacity',"black")
.style("stroke-width", "1")
.style("stroke", stroke)
}
function fillcolor(){
var color = 'rgb(255,0,0)'
}
//static points from qgis
//lines from rhino
//display names from spreadsheet - use this format for points from SPREADSHEET
//points from spreadsheet
return svg.node();
}
hexagon_nol_merge6 = FileAttachment("hexagon_nol_merge6.geojson").json()
hexagon_nol_merge5 = FileAttachment("hexagon_nol_merge5.geojson").json()
hexagon_nol_merge3 = FileAttachment("hexagon_nol_merge3.geojson").json()
redlinesNol = FileAttachment("redlines nol.geojson").json()
road = FileAttachment("road.geojson").json()
NY_buildinge_map = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vTbxm-eIKmRfJFocii7kfg0eQf9926Q5n3mh8Ftg-q5lEBoyU55SQuv4mBibeUVV5Q9yTB5yw4T6UjC/pub?output=csv'
new_museum = FileAttachment("new_museum.txt").tsv({array:true})
whitney = FileAttachment("whitney.txt").tsv({array:true})
zone1 = FileAttachment("zone1.txt").tsv({array:true})
wireframe = FileAttachment("wireframe.txt").tsv({array:true})
icon1 = FileAttachment("icon1.txt").tsv({array:true})
mouth = FileAttachment("mouth.txt").tsv({array:true})
eyes = FileAttachment("eyes.txt").tsv({array:true})
face_outline = FileAttachment("face_outline.txt").tsv({array:true})
bbox_new = FileAttachment("bbox_new.geojson").json()
graphic_test = FileAttachment("graphic_test.txt").tsv({array:true})
bbox1 = FileAttachment("bbox@1.geojson").json()
theaters = FileAttachment("theaters.geojson").json()
restrooms = FileAttachment("restrooms.geojson").json()
subways = FileAttachment("subways.geojson").json()
parks = FileAttachment("parks.geojson").json()
dining_lines = FileAttachment("dining_lines.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"
parkZone = FileAttachment("park zone.geojson").json()
bboxNol = FileAttachment("bbox nol.geojson").json()
hexagon = FileAttachment("hexagon.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.
