Public
Edited
Oct 10, 2024
chart = {
const width = 800,
height = 800;
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
var g = svg.selectAll('g').attr("id", "paths");//qgis lines variable //one variable for each geometry type
var c = svg.selectAll('circle')
var t = svg.selectAll('text')
//static lines are input here (lines that never change)
polyline(square_test,'red','1','1','0','black')
//polyline(plus_outline,'rgb(220,220,220)','.5','1','2','black')
//polyline(plus_details,'rgb(220,220,220)','.5','1','.75','black')
polyline(boat,'none','.5','1','3','blue')
function polyline(data, sfill, fillO, 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("fill-opacity", fillO)
.style('stroke-opacity',sOpac)
.style("stroke-width", sW)
.style("stroke", stroke)
}
//draw phases of massing structure
var structure = phase_01//these are rhino lines
var sData = structureData[0]//this is information from the spreadsheet
//if the button is equal to phase 2, structure variable equals phase 02
if(phaseButton=="Phase 02"){structure = phase_02
sData = structureData[1]
}
if(phaseButton=="Phase 03"){structure = phase_03
sData = structureData[2]
}
g.enter().append("polyline")
.data(structure) //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
.attr('transform','translate(400 400)')
.style("fill", 'purple')
.style("fill-opacity", '1')
.style('stroke-opacity','1')
.style("stroke-width", '1')
.style("stroke", 'black')
var yVal = 300
dataText(350,yVal,sData.name)
dataText(350,yVal+20,sData.SecondProgram)
dataText(350,yVal+40,sData.housing)
dataText(350,yVal+60,sData.emCarbon)
dataText(350,yVal+80,sData.structureCLT)
dataText(350,yVal+100,sData.secondarStr)
function dataText(xVal,yVal,dataTxt){
svg
.append("text")
.attr("x",xVal)
.attr("y",yVal)
//.attr("class","pointsText")
.attr('font-weight','lighter')
.attr("font-family","helvetica")
.attr("font-size","9px")
.text(dataTxt) //needs to be a variable
}
t.enter().append('text')
.data(dataNames)
.enter()
.append("text")
.attr("x",330)
.attr("y",function(d,i){return yVal+(i*20)})
//.attr("class","pointsText")
.attr('font-weight','bold')
.attr('text-anchor','end')
.attr("font-family","helvetica")
.attr("font-size","9px")
.text(function(d){return d})
g.enter().append("polyline")
.data(rhinoLines) //get data to define path
.enter() //there are more data than elements, this selects them
.append('polyline')
.attr("points", function(d){return d.pts}) //The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", 'purple')
.style("fill-opacity", '1')
.style('stroke-opacity','1')
.style("stroke-width", '1')
.style("stroke", 'black')
.on('mouseover',rhinoText)
.on('mouseout',rhinoTextOut)
function rhinoText(event,d){
svg
.append("text")
.attr("x",200)
.attr("y",200)
.attr("class","pointsText")
.attr('font-weight','bold')
.attr("font-family","helvetica")
.attr("font-size","12px")
.text(d.zoning)
}
function rhinoTextOut(event,d){
svg.selectAll("text.pointsText").remove()
}
c.enter().append('circle')
.data(points)
.enter()
.append('circle')
.attr('cx',function(d){return d.xVal})
.attr('cy',function(d){return d.yVal})
.attr('r',ptRad)
.attr('fill',ptColor)
.on('mouseover',pointsHover)
.on('mouseout',pointsHoverOff)
function ptColor(d){
var color = 'red'
if(d.Type == 'clt'){color = 'blue'}
if(d.Type == 'other'){color = 'cyan'}
return color
}
function ptRad(d){
var radius = '4'
if(d.Type == 'clt'){radius = '8'}
return radius
}
function pointsHover(event,d){
svg
.append("rect")
.attr("x",d.xVal+20)
.attr("y",d.yVal+20)
.attr("width","120")
.attr("height","80")
.attr("class","hoverRect")
.attr("fill","rgb(200,200,200)")
.attr("stroke","black")
.attr("stroke-width","1")
svg
.append("text")
.attr("x",d.xVal+40)
.attr("y",d.yVal+40)
.attr("class","pointsText")
.attr('font-weight','bold')
.attr("font-family","helvetica")
.attr("font-size","12px")
.text(d.Name)
svg
.append("text")
.attr("x",d.xVal+40)
.attr("y",d.yVal+60)
.attr("class","pointsText")
.attr('font-weight','lighter')
.attr("font-family","helvetica")
.attr("font-size","12px")
.text(d.Description)
var wrap = svg.selectAll("text.pointsText")
.each(function(d, i) { wrap_text(d3.select(this), 80) });
}
function pointsHoverOff(event,d){
svg.selectAll('text.pointsText').remove()
svg.selectAll('rect.hoverRect').remove()
}
svg
.append("text")
.attr("x","100")
.attr("y","115")
.attr("class","hoverText")
.attr("font-family","helvetica")
.attr("font-size","12px")
.text("I love CASE 😀")
return svg.node();
}
phase_01 = FileAttachment("phase_01.txt").tsv({array:true})
phase_02 = FileAttachment("phase_02.txt").tsv({array:true})
square_test = FileAttachment("square_test.txt").tsv({array:true})
plus_outline = FileAttachment("plus_outline.txt").tsv({array:true})
boat = FileAttachment("boat.txt").tsv({array:true})
pointsLink = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vRVQMRt9fas98UWgD4_3AU0Eg11athIY7OLpG1Rk3vt75goSa0gXsHY58lKJxnrIAx9jqiTACs0cly_/pub?output=csv'
points = d3.csv(pointsLink,d3.autoType)
structureDataLink = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vS_1tSmzAnU2csgjxbiF-2dJaPQT_lCkZpvM8yhs698CCAdAHrRiiDF8UgItkq-e6umn7UBKgnJcUE4/pub?output=csv'
structureData = d3.csv(structureDataLink,d3.autoType)
dataNames = Object.values(structureData[3]);
structureData[1].SecondProgram
hexLink = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vTEeGp9KepbKTGB-5waYrQtSKlWe-4lenwXsaZDE2gbz8XI_m9k3diREnteEOe5zeWg6iX1K3DzFvul/pub?output=csv'
hexes = d3.csv(hexLink,d3.autoType)
hexes1 = FileAttachment("hexes.txt").tsv({array:true})
rhinoLines = {
var list = hexes1 //file from rhino
var spreadsheet = hexes //name of the spreadsheet
var cleanLines = []
for (let i = 0; i < list.length-1; i=i+2) {
var id = list[i+1][0]
var idNum = Number(id)
var zoning //you need to add a variable for each attribute in the spreadsheet - except id
var water
for (let k = 0; k < spreadsheet.length; k++) {
if(idNum==spreadsheet[k].id){
//console.log("match!!!!!!!")
zoning = spreadsheet[k].zoning //assign our new variables to spreadsheet[k].attributeName
water = spreadsheet[k].water
}
}
//create a name for each spreadsheet attribute, and add the corresponding variable to it
cleanLines.push({pts:list[i],id:idNum,zoning:zoning,water:water,})
}
return cleanLines
}
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.
