Notary Public and Data Scientist Specialist
Public
Edited
Sep 25, 2023
<svg height="200" width="300">
<circle cx="100" cy="100" r="20" fill="red" stroke="black"></circle>
<rect x = "1" y = "1" width = "280" height = "130" fill="none"stroke="blue" stroke-width="3"></rect>
<line x1="5" x2="5" y1="5" y2="100" stroke="navy"></line>
<path fill="blue" stroke="black" d="M100 100 L150 150 l0 50"></path>
</svg>
<svg height="300" width="300">
<rect id="rectangulo" x="1" y="1" width="300" height="300" fill="black" stroke="black" storke-width="3"></rect>
<circle cx="150" cy="150" r="100" fill="white"></circle>
</svg>
chart1 = {
//Definimos el ancho y alto de nuestro dibujo. bandwidth hace referencia al ancho de las lineas. n es la cantidad de lineas que queremos dibujar
const width = 960;
const height = 500;
const bandwidth = 10;
const n = 47;
// Se crea el svg con el ancho y alto ya definido
const svg = d3.create("svg").attr("height", height).attr("width", width);
// Se crean las lineas verticales pasandole el segundo mask para que no dibujen las lineas verticales en el circulo
svg
.append("g")
.selectAll("rect")
.data(d3.range(n))
.join("rect")
.attr("width", width)
.attr("height", 10)
.attr("x", 0)
.attr("y", (d) => d * 20)
.attr("mask", "url(#triangleMask)");
svg
.append("g")
.selectAll("rect")
.data(d3.range(n))
.join("rect")
.attr("width", 10)
.attr("height", height)
.attr("x", (d) => d * 20)
.attr("y", 0)
.attr("mask", "url(#triangleMask2)");
// Se crea la primera mask para ocultar el centro y que no aparezcan las lineas verticales
const mask = svg.append("mask").attr("id", "triangleMask");
// Se rellena la mask con negro de tal manera que lo que esta en negro es invisible. Asi se borran las lineas horizontales del resto del cuadro quedando solamente las del circulo
const maskRect = mask
.append("rect")
.attr("width", width)
.attr("height", height)
.attr("fill", "black");
const triangle = mask
.append("path")
.attr("d", d3.symbol().type(d3.symbolTriangle).size(60000))
.attr("transform", `translate(${width / 2}, ${height / 2})`)
.attr("fill", "white");
// Esta mask lo que hace es hacer invisible el circulo y dejando el resto del cuadro visible asi se pueden ver las lineas verticales.
const mask2 = svg.append("mask").attr("id", "triangleMask2");
const maskRect2 = mask2
.append("rect")
.attr("width", width)
.attr("height", height)
.attr("fill", "white");
const circle2 = mask2
.append("path")
.attr("d", d3.symbol().type(d3.symbolTriangle).size(60000))
.attr("transform", `translate(${width / 2}, ${height / 2})`)
.attr("fill", "black");
return svg.node();
}
circleChart = {
const height = 600;
const width = 960;
const svg = d3
.create("svg")
.attr("height", height)
.attr("width", width)
.attr("fill", "none")
.attr("viewbox", [0, 0, height, width])
.attr("style", "maxwidth : 100 %, height: auto");
// let t = 0;
setInterval(() => {
const data = d3.range(15).map((d) => ({
x: d * 50 + 50,
y: 250 + Math.sin(d * 0.5 + t) * 220
}));
const circles = svg
.selectAll("circle")
.data(data)
.join("circle")
.attr("r", 8)
.attr("cx", (d) => d.x)
.attr("cy", (d) => d.y)
.attr("fill", "steelblue");
t = t + 0.025;
}, 1000 / 60);
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.
