Public
Edited
Sep 19, 2024
4 forks
2024 fall studio 9/19 - fleet's version - this is a great map
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')
//static lines are input here
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)
}
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','4')
.attr('fill','green')
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();
}
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)
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.
