Public
Edited
Jan 6
5 forks
chart = {
const width = 800,//width pixels
height = 800;//height in pixels
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
var c = svg.selectAll('circle')
var p = svg.selectAll('polyline')
//static lines are input here
polyline(test2,'none','1','1','.5','black')
polyline(outline_01,'none','1','1','2.5','red')
function polyline(data, pfill, pOpac, sOpac, sWght, stroke){
p.enter().append("polyline") //this line designates that we're making a 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", pfill)
.style("fill-opacity", pOpac)
.style('stroke-opacity',sOpac)
.style("stroke-width", sWght)
.style("stroke", stroke)
}
return svg.node();
}
outline_01 = FileAttachment("outline_01.txt").tsv({array:true})
outline_02 = FileAttachment("outline_02.txt").tsv({array:true})
test2 = FileAttachment("test2.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.
