Public
Edited
Mar 28
circleInfo = [
{x:25, y:50, radius:5},
{x:75, y:50, radius:10},
{x:125, y:50, radius:15},
{x:175, y:50, radius:20},
{x:225, y:50, radius:25},
]
{const svg = d3.create("svg")
.attr("with", 500)
.attr("height", 100)
svg.selectAll("circle")
.data(circleInfo)
.join("circle")
.attr("fill", "red")
.attr("cx", circ=>circ.x)
.attr("cy", circ=>circ.y)
.attr("r", function(circ){
return circ.radius
});
return svg.node();
}
rectInfo = [
{xPos:10, yPos:10, width:300,height:20, color:"purple"},
{xPos:10, yPos:40, width:250,height:20, color:"brown"},
{xPos:10, yPos:70, width:200, height:20, color:"orange"}
]
{const svg = d3.create("svg")
.attr("with", 500)
.attr("height", 100)
svg.selectAll("rect")
.data(rectInfo)
.join("rect")
.attr("x", d => d.xPos)
.attr("y", d => d.yPos)
.attr("width", d => d.width)
.attr("height", d => d.height)
.attr("fill", d => d.color);
return svg.node();
}
rectGrid = [
{
y: 50,
color: 'purple',
rects: [
{ x: 25, width: 10, height: 30 },
{ x: 75, width: 30, height: 10 },
{ x: 125, width: 20, height: 20 },
{ x: 175, width: 30, height: 10 },
{ x: 225, width: 10, height: 30 }
]
},
{
y: 150,
color: 'brown',
rects: [
{ x: 25, width: 5, height: 5 },
{ x: 75, width: 10, height: 10 },
{ x: 125, width: 15, height: 15 },
{ x: 175, width: 20, height: 20 },
{ x: 225, width: 25, height: 25 }
]
},
{
y: 250,
color: 'orange',
rects: [
{ x: 25, width: 10, height: 10 },
{ x: 75, width: 10, height: 15 },
{ x: 125, width: 10, height: 20 },
{ x: 175, width: 10, height: 25 },
{ x: 225, width: 10, height: 30 }
]
}
]
{
//Crear SVG
const grafico = d3.create('svg')
.attr('width', 500)
.attr('height', 300);
// Crear un grupo para cada círculo
const rows = grafico.selectAll('g')
.data(rectGrid)
.join('g')
//Colocamos la posición en y
.attr('transform', row => `translate(0,${row.y})`)
.attr('fill', row => row.color);
// Adicionamos el label
rows.append('text')
.attr('font-family', 'sans-serif')
.attr('y', -30)
.text(d => d.color)
// Se adiciona otro data join para dibujar cada uno de los círculos
rows.selectAll('rect')
.data(d => d.rects)
.join('rect')
.attr("x", d => d.xPos)
.attr("y", d => 0)
.attr("width", d => d.width)
.attr("height", d => d.height)
.attr("fill", d => d.color);
return grafico.node();
}
xscale = d3.scaleLinear()
.domain([0,10])
.range([0,900])
xscale(5)
fahrenheitToCelsius = d3.scaleLinear()
.domain([32,212])
.range([0,100])
scores = [
{name: 'Brian', score: 90},
{name: 'Taylor', score: 80},
{name: 'Kelly', score: 70},
{name: 'Jane', score: 45},
{name: 'Joe', score: 30},
]
width = 300
maxScore = d3.max(scores, d=>d.score)
x = d3.scaleLinear()
.domain([0,maxScore])
.range([0,width])
x(0)
x(maxScore/2)
scores
height = 100
yscale = d3.scaleBand()
yscale.bandwidth()
{
// creamos nuestro elemento SVG externo con un tamaño de 500x100
const svg = d3.create('svg')
.attr('width', 500)
.attr('height', 100);
// barra por cada elemento en scores
const bars = svg.selectAll('rect')
.data(scores)
.join('rect')
// establecemos los atributos para los rectángulos
.attr('fill', 'steelblue')
.attr('x', 0)
.attr('y', d => yscale(d.name) ) // EDITAR aquí
.attr('width', d => 40) // EDITAR aquí
.attr('height', yscale.bandwidth); // EDITAR aquí
// devolvemos el elemento SVG externo para que se pueda renderizar
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.
