md`Re-create the above graphic using D3.`
<svg width="100" height="100">
<g transform="translate(50, 50)">
<circle r="50" fill="steelblue"/>
<text fill="white" font-size="50" dominant-baseline="middle" text-anchor="middle">vis</text>
</g>
</svg>
// tu código 1
d3 = require('d3@7')
{
const svg = d3.create("svg")
.attr("width", 100)
.attr("height", 100);
const g = svg.append("g")
.attr("transform", 'translate(50, 50)');
g.append("circle")
.attr('r', 50)
.attr('fill', "steelblue")
g.append("text")
.text("vis")
.attr("fill", "white")
.attr("dominant-baseline", "middle")
.attr("text-anchor", "middle")
.attr("font-size", "50")
return svg.node()
}
segments = [ //1
{ x1: 5, y1: 5, x2: 5, y2: 95 },
{ x1: 45, y1: 5, x2: 45, y2: 95 },
{ x1: 5, y1: 95, x2: 45, y2: 95 },
{ x1: 60, y1: 5, x2: 100, y2: 5 },
{ x1: 80, y1: 5, x2: 80, y2: 95 },
{ x1: 115, y1: 5, x2: 115, y2: 95 },
{ x1: 115, y1: 5, x2: 145, y2: 5 },
{ x1: 115, y1: 50, x2: 140, y2: 50 },
{ x1: 115, y1: 95, x2: 145, y2: 95 },
{ x1: 160, y1: 5, x2: 190, y2: 5 },
{ x1: 160, y1: 5, x2: 160, y2: 95 },
{ x1: 160, y1: 95, x2: 190, y2: 95 },
];
{
const svg = d3.create('svg')
.attr('width', 200)
.attr('height', 100);
svg.selectAll("line")
.data(segments)
.join("line")
.attr("x1", line => line.x1)
.attr("y1", line => line.y1)
.attr("x2", line => line.x2)
.attr("y2", line => line.y2)
.attr("stroke", "black")
return svg.node()
}
iris = require('@observablehq/iris')
iris
Type Table, then Shift-Enter. Ctrl-space for more options.
widthIris = 400
heightIris = 400
sepalWidthMin = d3.min(iris, d => d.sepalWidth)
sepalWidthMax = d3.max(iris, d => d.sepalWidth)
margin = ({ top: 20, right: 30, bottom: 30, left: 40 })
xIris = d3.scaleLinear()
.domain([sepalWidthMin, sepalWidthMax])
.range([margin.left, widthIris - margin.right])
sepalLengthMin = d3.min(iris, d => d.sepalLength)
sepalLengthMax = d3.max(iris, d => d.sepalLength)
yIris = d3.scaleLinear()
.domain([sepalLengthMin, sepalLengthMax])
.range([heightIris - margin.bottom, margin.top])
species = [... new Set(iris.map(data => data.species))]
colorIris = d3.scaleOrdinal()
.domain(species)
.range(d3.schemeSet1)
//Código aqui 3 puntos
scatterplot = {
const svg = d3.create("svg")
.attr("width", widthIris + 40)
.attr("height", heightIris + 40)
svg.selectAll("circle")
.data(iris)
.join("circle")
.attr("cx", d => xIris(d.sepalWidth))
.attr("cy", d => yIris(d.sepalLength))
.attr("r", 3)
.attr("fill", d=> colorIris(d.species))
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.
