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')
polyline(smiley,'none','1','1','4','purple')
polyline(outline_03,'none','1','1','1','green')
//polyline(outline_04,'none','1','1','3','rgb(0,0,255)')
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)
}
//make a set of polylines interactive//
p.enter().append("polyline") //this line designates that we're making a polyline
.data(outline_04) //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", 'white')
.style("fill-opacity", '.5')
.style('stroke-opacity','1')
.style("stroke-width", '1')
.style("stroke", 'blue')
.on('mouseover',changeFill)
.on('mouseout',changeFillBack)
function changeFill(event,d){
d3.select(this).style("fill", 'yellow')
}
function changeFillBack(event,d){
d3.select(this).style("fill", 'white')
}
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})
smiley = FileAttachment("smiley.txt").tsv({array:true})
outline_03 = FileAttachment("outline_03.txt").tsv({array:true})
outline_04 = FileAttachment("outline_04.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.
