Public
Edited
Jul 11, 2023
{
const width = 800
const height = 200
const svg = d3.create('svg')
.attr("width",width)
.attr("height",height);
const first = svg.append("g")
const datos = [20,45,67,81,39,100,120,140,58,72,94]
const datos2 = [1900,345,667,81,39,100,120,140,58,72,94]
first
.selectAll("line")
.data(datos)
.enter()
.append("line")
.attr("x1", function(horse,i){return horse*5})
.attr("y1", 100)
.attr("x2", function(horse,i){return horse*5})
.attr("y2", 200)
.style("opacity",.5)
.attr("stroke", function(horse){return d3.rgb(0,255-horse,horse*2)})
.attr("stroke-width", function(horse){return 20})
// first
// .selectAll("rect")
// .data(datos)
// .enter()
// .append("rect")
// .attr("x", function(horse,i){return horse*5})
// .attr("y", 100)
// .attr("width", function(horse){return horse})
// .attr("height", function(horse){return horse/2})
// .style("opacity",.5)
// .attr("fill", function(horse){return d3.rgb(0,255-horse,horse*2)})
// first
// .selectAll("circles")
// .data(datos)
// .enter()
// .append("circle")
// .attr("cx", function(horse,i){return horse*5})
// .attr("cy", 100)
// .attr("r", function(horse){return horse/2})
// .style("opacity",.5)
// .attr("fill", function(horse){return d3.rgb(0,255-horse,horse*2)})
return svg.node();
}
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.
