Notebooks 2.0 is here.

Read the preview announcement
The avatar for @63anp3ca
63anp3ca
Published
Edited
Sep 8, 2018
Fork of Tutorial: D3
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
html`
<svg width="50" height="50">
<circle cx="25" cy="25" r="22" fill="steelblue" stroke="gray" stoke-width="2">
</svg>
`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
html`
<svg height="1" width="1"></svg>
`
Insert cell
Insert cell
Insert cell
html`
<svg width="300", height="50">
<rect x="0" y="0" width="300" height="9" fill="crimson" />
<rect x="0" y="10" width="300" height="9" fill="steelblue" />
</svg>
`
Insert cell
Insert cell
Insert cell
html`
<svg width="300", height="50">
<ellipse cx="60" cy="25" rx="50" ry="15" fill="steelblue" />
</svg>
`
Insert cell
Insert cell
html`
<svg width="300", height="50">
<line x1="10" y1="25" x2="290" y2="25" stroke="black" />
</svg>
`
Insert cell
Insert cell
html`
<svg width="300", height="50">
<text x="10" y="25">soy un vector (º0º)/ </text>
</svg>
`
Insert cell
Insert cell
html`
<svg width="360", height="50">
<text x="10" y="25" fill="steelblue" font-family="sans-serif" font-size="25">soy un vector con estilo (~_~)//</text>
</svg>
`
Insert cell
Insert cell
Insert cell
html`
<svg width="365", height="${altura}">
<text x="10" y="${altura}" fill="steelblue" font-family="sans-serif" font-size="25">la ge y la jota quedarán cortadas</text>
</svg>
`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
random_data = {
var dataset = [];
for (var i = 0; i < 25; i++){
var nuevoNumero = Math.random()*30;
dataset.push(nuevoNumero);
}
return dataset;
}
Insert cell
Insert cell
Insert cell
svg = d3.select(DOM.svg(200,200))
Insert cell
Insert cell
svg.node()
Insert cell
Insert cell
Insert cell
{
const svg = d3.select(DOM.svg(width, width)); //
return svg.node();
}
Insert cell
Insert cell
Insert cell
{
//borde del svg
let border = 1
let borderColor = "black"
//svg
const svg = d3.select(DOM.svg(ancho, alto))
.attr("border", border)
//borde del svg
svg.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", ancho)
.attr("height", alto)
.style("fill", "none")
.style("stroke", borderColor)
.style("stroke-width", border);
//rectágulos para visualizar datos
svg.selectAll("rect")
.data(datos)
.enter().append("rect")
.attr("x", 0)
.attr("y", (d, i) => ancho - 20*(i+1) - i)
.attr("width", (d) => d)
.attr("height", 20);
//dibujar
return svg.node();
}
Insert cell
{
const svg = d3.select(DOM.svg(ancho, alto))
.attr("border", border)
var border = 1
var borderColor = "black"
svg.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", ancho)
.attr("height", alto)
.style("fill", "none")
.style("stroke", borderColor)
.style("stroke-width", border);
svg.append("g")
.attr("fill", "steelblue")
.selectAll("rect")
.data(datos)
.enter().append("rect")
.attr("x", 0)
.attr("y", (d, i) => ancho - 20*(i+1) - i)
.attr("width", (d) => d)
.attr("height", 20);
return svg.node();
}
Insert cell
x = d3.scaleLinear()
.domain([0, 70])
.range([0, ancho])
Insert cell
{
const svg = d3.select(DOM.svg(ancho, alto))
.attr("border", border)
var border = 1
var borderColor = "black"
svg.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", ancho)
.attr("height", alto)
.style("fill", "none")
.style("stroke", borderColor)
.style("stroke-width", border);
let anchoBin = alto/datos.length;
svg.append("g")
.attr("fill", "steelblue")
.selectAll("rect")
.data(datos)
.enter().append("rect")
.attr("x", 0)
.attr("y", (d, i) => ancho - anchoBin*(i+1) - i)
.attr("width", (d) => x(d))
.attr("height", anchoBin);
return svg.node();
}
Insert cell
margen = ({
izquierda: 30,
derecha: 0
})
Insert cell

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.
Learn more