Public
Edited
Sep 7, 2023
13 forks
Insert cell
# 2023 fall studio 9/7
Insert cell
chart = {
const width = 500,
height = 500;
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
var g = svg.append("g").attr("id", "paths");

var p = svg.selectAll("polyline") //d3 geopath
.data(outlines)
.enter() //there are more data than elements, this selects them
.append("polyline") //appends path to data
.attr("points", function(d) {return d.pts})//required attributes
.style("stroke","black")//style
.style("stroke-width","1px")
.style("fill","red")


return svg.node();
}
Insert cell
st3 = FileAttachment("square_test3.txt").tsv({array:true})
Insert cell
square_test = FileAttachment("square_test.txt").tsv({array:true})
Insert cell
outlines = {
var cleanLines = []
for (let i = 0; i < st3.length-1; i=i+2) {
var id = st3[i+1][0]
var idNum = Number(id)
//cleanLines.push({pts:st3[i],id:st3[i+1][0]})
cleanLines.push({pts:st3[i],id:idNum})
}


return cleanLines
}
Insert cell

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.
Learn more