Public
Edited
Mar 7, 2023
TEST
datos = [
{n: 'A', v: 10},
{n: 'B', v: 7},
{n: 'C', v: 8},
{n: 'D', v: 6},
{n: 'E', v: 9},
{n: 'F', v: 10}
]
Plot.dot(datos, {x: (d, i) => d.n + i, y: d => d.v}).plot()
Plot.plot({
marks: [
Plot.dot(datos, {x: (d, i) => i, y: (d, i) => i, fill: 'red'}),
Plot.area(datos, {x1: (d, i) => i, x1: (d, i) => i, y1: (d, i) => i, y2: (d, i) => i + 10, fill: 'blue'}),
Plot.ruleX([0])
]
})
Plot.plot({
height: 400,
marks: [
Plot.dot(datos, {x: d => d.v, y: d => d.n, fill: 'red'}),
Plot.ruleX([0]),
]
})
x = [10, 14, 32, 54]
y = ["A","D","C","D"]
{
let sg = 300;
let margin = sg * 0.05;
let s = sg - (margin * 2);
let svg = d3.create("svg").attr("width",sg).attr("height",sg)
let g = d3.create("g").attr("transform", `translate(${margin},${margin})`)
let escalaX = d3.scaleLinear().domain([0,100]).range([0,s]);
let ejeX = d3.axisBottom().scale(escalaX);
let escalaY = d3.scalePoint().domain(y).range([0, s]);
let ejeY = d3.axisLeft().scale(escalaY);
let ticksX = svg.append("g").attr("transform", `translate(${margin},250)`).call(ejeX)
let ticksY = svg.append("g").attr("transform", `translate(${margin},0)`).call(ejeY)
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.
