chart = {
const width = 950,//pixel size of the map
height = 950;
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], bbox);
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
//static lines from qgis
staticLines(path2, subwaytheprayingisworking.features,"none",1,.5,"rgb(180,180,180)")
staticLines(path3, nycParks.features,"none",1,.5,"rgb(180,180,180)")
staticLines(path4, buildingfpnotexporting.features,"rgb(180,180,180)",.1,.5,"rgb(180,180,180)")
staticLines(path5, boroughBoundariespraying.features,"none",1,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(nycDataPointsPersonalMap.features,'2','red','1',"0")
staticCircles(pubrest.features,'2','grey','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(fillRedV2,'red','1','0','none')
polyline(fillPink,'pink','1','0','none')
polyline(fillWhite,'white','1','0','none')
polyline(burgeranddrink,'grey','1','3','black')
polyline(receiptShadow,'grey','1','3','black')
polyline(receipt,'white','1','3','black')
polyline(receiptlines,'black','1','0','black')
svg//draw text
.append("text") //appends path to data
.attr('x',136)
.attr('y',210)
.attr('class','mtext')
.attr('fill', 'black')
.style('font-family','helvetica')
.style("font-size", "25px") ////////////RECEIPT TEXT
.text('RECEIPT')
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)
}
p.enter().append("polyline")
.data(food) //get data to define path
.enter() //there are more data than elements, this selects them
.append('polyline')
.attr("points", forknknife1) //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')
p.enter().append("polyline")
.data(pray) //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", 'red')
.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(bighouseicon) //get data to define path //////////////////////////////////////////////////////////////////////
.enter()
.append('polyline')
.attr('class','bighouseicon')
.attr("points", function(d) {return d}) //The d attribute defines a path to be drawn, only applies to appended elements
// .style("fill", 'red')
.style('fill-opacity','1')
.style("stroke-width", '1')
.style("stroke", 'black')
// .style('stroke-dasharray','5 5')
}
function removeWireframe(event,d){
svg.selectAll('polyline.bighouseicon').remove()
}
/*
//points from spreadsheet
c.enter().append('circle')
.data(food) //get data to define path
.enter() //there are more data than elements, this selects them
.append("circle") //appends path to data
.attr('class','food')
.attr('cx',function(d) {return projection([d.long,d.lat])[0]})
.attr("cy",function(d) {return projection([d.long,d.lat])[1]})
.attr('r', 3)
.attr('fill', 'black')
.style('fill-opacity','1')
.style("stroke-width", "1")
*/
//points from spreadsheet
c.enter().append('circle')
.data(food) //get data to define path
.enter() //there are more data than elements, this selects them
.append("circle") //appends path to data
.attr('class','food')
.attr('cx',function(d) {return projection([d.Long,d.Lat])[0]})
.attr("cy",function(d) {return projection([d.Long,d.Lat])[1]})
.attr('r', 6)
.attr('fill', 'cyan')
.style('fill-opacity','0')
.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('x',130)
.attr("y",180)
.attr('fill', 'black')
.style('font-family','helvetica')
.style("font-size", "20px") ////// restaurant name
.text(d.Name)
p.enter().append("polyline")
.data(burgeronly) //get data to define path
.enter()
.append('polyline')
.attr('class','burgeronly')
.attr("points", function(d) {return d}) //The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", 'green')
.style('fill-opacity','1')
.style("stroke-width", '1')
.style("stroke", 'black')
//if (d.type==1)
//if (d.type==2)
svg//draw text
.append("text") //appends path to data
.attr('class','mText')
.attr('x',130)
.attr("y",300)
.attr('fill', 'black')
.style('font-family','helvetica')
.style("font-size", "11px")
.text(d.Order)
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()
svg.selectAll('polyline.burgeronly').remove()
}
return svg.node();
}
drink = FileAttachment("DRINK.txt").tsv({array:true})
receiptlines = FileAttachment("receiptlines.txt").tsv({array:true})
bighouseicon = FileAttachment("BIGHOUSEICON.txt").tsv({array:true})
receipt = FileAttachment("RECEIPT.txt").tsv({array:true})
receiptShadow = FileAttachment("RECEIPT SHADOW.txt").tsv({array:true})
burgeronly = FileAttachment("BURGERONLY.txt").tsv({array:true})
burgeranddrink = FileAttachment("BURGERANDDRINK.txt").tsv({array:true})
fillPink = FileAttachment("FILL PINK.txt").tsv({array:true})
fillWhite = FileAttachment("FILL WHITE.txt").tsv({array:true})
fillRedV2 = FileAttachment("FILL RED V2.txt").tsv({array:true})
fillRed = FileAttachment("FILL RED.txt").tsv({array:true})
forknknife1 = FileAttachment("forknknife@1.txt").tsv({array:true})
pray = FileAttachment("PRAY.txt").tsv({array:true})
prayhouse = FileAttachment("PRAYHOUSE.txt").tsv({array:true})
medfoodicon = FileAttachment("medfoodicon.txt").tsv({array:true})
FoodLink = "https://docs.google.com/spreadsheets/d/e/2PACX-1vQ_0mhMA8G2YOrfMkQ6d_XvzygcWvAOAIbfrXVMGdfvxW9wNmQShq38Dhl0-7yIJj76CJr8KhhvHVvr/pub?output=csv"
food = d3.csv(FoodLink,d3.autoType)
foodIcon = FileAttachment("food icon.txt").tsv({array:true})
pubrest = FileAttachment("PUBREST.geojson").json()
subwaytheprayingisworking = FileAttachment("SUBWAYTHEPRAYINGISWORKING.geojson").json()
buildingfpnotexporting = FileAttachment("buildingfpNOTEXPORTING.geojson").json()
bbox = FileAttachment("bbox.geojson").json()
graphic_test = FileAttachment("graphic_test.txt").tsv({array:true})
bbox1 = FileAttachment("bbox@1.geojson").json()
boroughBoundariespraying = FileAttachment("borough boundariesPRAYING.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"
nycDataPointsPersonalMap = FileAttachment("NYC DATA POINTS PERSONAL MAP.geojson").json()
nycParks = FileAttachment("NYC PARKS.geojson").json()
smallfoodicon1 = FileAttachment("smallfoodicon@1.txt").tsv({array:true})
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.
