populations
marginPop = ({top: 10, bottom: 45, left: 75, right: 10})
widthPop = width
heightPop = 400
maxPopulation = d3.max(populations, d => d.population)
populationScale = d3.scaleLinear()
.domain([0, maxPopulation])
.range([marginPop.left, widthPop - marginPop.right])
countries = populations.map(d => d.country)
countryScale = d3.scaleBand()
.domain(countries)
.range([marginPop.top, heightPop - marginPop.bottom])
.padding(0.2)
InvertedCountryScale = d3.scaleBand()
.domain(populations.map(d => d.country))
.range([marginPop.left, widthPop - marginPop.right])
.padding(0.5);
InvertedPopulationScale = d3.scaleLinear()
.domain([0, d3.max(populations, d => d.population)])
.range([heightPop - marginPop.bottom, marginPop.top])
xAxisPop = d3.axisBottom(populationScale).tickFormat(d3.format('~s'))
yAxisPop = d3.axisLeft(countryScale)
// x-axis is now the band scale (countries)
xAxisPopv2 = d3.axisBottom(InvertedCountryScale);
// y-axis is now the linear scale (population)
yAxisPopv2 = d3.axisLeft(InvertedPopulationScale).tickFormat(d3.format('~s'))
{
const margin = {top: 30, right: 10, bottom: 40, left: 100};
const visWidth = widthPop - margin.left - margin.right;
const visHeight = heightPop - margin.top - margin.bottom;
const svg = d3.create('svg')
.attr('width', visWidth + margin.left + margin.right)
.attr('height', visHeight + margin.top + margin.bottom);
// barras
svg.append('g')
.selectAll('rect')
.data(populations)
.join('rect')
.attr('x', d => InvertedCountryScale(d.country))
.attr('y', d => InvertedPopulationScale(d.population))
.attr('width', InvertedCountryScale.bandwidth())
.attr('height', d => InvertedPopulationScale(0) - InvertedPopulationScale(d.population))
.attr('fill', 'steelblue');
// Draw x-axis (bottom)
svg.append('g')
.attr('transform', `translate(0, ${heightPop - marginPop.bottom})`)
.call(xAxisPopv2)
.call(g => g.select('.domain').remove());
// Draw y-axis (left)
svg.append('g')
.attr('transform', `translate(${marginPop.left}, 0)`)
.call(yAxisPopv2)
.call(g => g.select('.domain').remove())
.append('text')
.attr('fill', 'black')
.attr('font-family', 'sans-serif')
.attr('x', -marginPop.left)
.attr('y', marginPop.top - 10)
.text("Población");
return svg.node();
}
avgPopulation = d3.mean(populations, d => d.population);
{
const svg = d3.create('svg')
.attr('width', widthPop)
.attr('height', heightPop);
// barras
svg.append('g')
.selectAll('rect')
.data(populations)
.join('rect')
.attr('x', populationScale(0))
.attr('y', d => countryScale(d.country))
.attr('width', d => populationScale(d.population) - populationScale(0)) // pasar la población a la escala x para obtener el ancho
.attr('height', countryScale.bandwidth()) // obtener el alto de cada banda de la escala
.attr('fill', 'steelblue');
// eje y
svg.append('g')
.attr('transform', `translate(${marginPop.left})`)
.call(yAxisPop)
.call(g => g.select('.domain').remove()); // eliminar la línea base del eje
// eje x
svg.append('g')
.attr('transform', `translate(0, ${heightPop - marginPop.bottom})`)
.call(xAxisPop)
.call(g => g.select('.domain').remove())
// agregar una etiqueta al eje x
.append('text')
.attr('fill', 'black')
.attr('font-family', 'sans-serif')
.attr('x', width / 2)
.attr('y', 40)
.text("Población");
const xAvg = populationScale(avgPopulation);
svg.append('line')
.attr('x1', xAvg)
.attr('x2', xAvg)
.attr('y1', marginPop.top) // desde el top plot area
.attr('y2', heightPop - marginPop.bottom) // hasta la base del área
.attr('stroke', 'crimson')
.attr('stroke-dasharray', '4,2')
.attr('stroke-width', 2);
svg.append('text')
.attr('x', xAvg + 4) // un poco a la derecha
.attr('y', marginPop.top )
.attr('fill', 'crimson')
.attr('font-size', 11)
.attr('text-anchor', 'start')
.text(`Promedio: ${d3.format(",")(Math.round(avgPopulation))}`);
return svg.node();
}
{
const margin = { top: 20, right: 10, bottom: 20, left: 100 };
const visWidth = widthPop - margin.left - margin.right;
const visHeight = heightPop - margin.top - margin.bottom;
const InvertedCountryScale = d3.scaleBand()
.domain(populations.map(d => d.country))
.range([0, visWidth]) // full drawable width
.paddingInner(0.2) // spacing between lollipops
.paddingOuter(0.02); // space before the first & after the last
const svg = d3.create("svg")
.attr("width", visWidth + margin.left + margin.right)
.attr("height", visHeight + margin.top + margin.bottom);
const g = svg.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`);
const r = 6; // radio del “caramelo”
const barCenter = d =>
InvertedCountryScale(d.country) + (InvertedCountryScale.bandwidth()) / 2;
// palito
g.append("g")
.selectAll("line")
.data(populations)
.join("line")
.attr("x1", d => barCenter(d))
.attr("x2", d => barCenter(d))
.attr("y1", InvertedPopulationScale(0))
.attr("y2", d => InvertedPopulationScale(d.population))
.attr("stroke", "steelblue")
.attr("stroke-width", 4)
.attr("stroke-linecap", "round");
// caramelo
g.append("g")
.selectAll("circle")
.data(populations)
.join("circle")
.attr("cx", d => barCenter(d))
.attr("cy", d => InvertedPopulationScale(d.population))
.attr("r", r)
.attr("fill", "steelblue");
g.append("g") // ← dentro de <g>, x = 0
.call(d3.axisLeft(InvertedPopulationScale).ticks(8, "~s"))
.call(g => g.select(".domain").remove());
g.append("g")
.attr("transform", `translate(0, ${InvertedPopulationScale(0)})`)
.call(d3.axisBottom(InvertedCountryScale))
.call(g => g.select(".domain").remove())
.selectAll("text") // pequeño ajuste estético opcional
.attr("dy", "0.8em")
.attr("text-anchor", "middle");
/* 3 ▸ ETIQUETA DEL EJE-Y (recolocada) */
svg.select("text") // reutilizas el texto que ya tenías
.attr("x", -(margin.top + visHeight / 2))
.attr("y", -margin.left + 16); // pegada al eje-Y real
return svg.node();
}
diamonds = FileAttachment("diamonds-10k.csv").csv({typed: true})
diamonds
Type Table, then Shift-Enter. Ctrl-space for more options.
html`<div style='font-family: sans-serif; font-size: 10px; font-weight: bold;'>Diamond Cut</div>
${swatches({color})}`
diamondsChart
colorToCutToCount = d3.rollup(
diamonds,
v => v.length,
d => d.color,
d => d.cut
)
marginDiamond = ({top: 10, bottom: 50, left: 85, right: 50})
widthDiamond = width
heightDiamond = 600
diamondColors = Array.from(new Set(diamonds.map(d => d.color))).sort()
groupX = d3.scaleBand()
.domain(diamondColors)
.range([marginDiamond.left, widthDiamond - marginDiamond.right - marginDiamond.left - 40])
.padding(0.1)
new Set(diamonds.map(d => d.cut))
diamondCuts = ['Premium', 'Ideal', 'Very Good', 'Good', 'Fair']
barX = d3.scaleBand()
.domain(diamondCuts)
.range([marginPop.left, widthPop - marginPop.right])
.padding(0.1)
maxCount = d3.max(
colorToCutToCount.values(),
d => d3.max(d.values())
)
y = d3.scaleLinear()
.domain([0, maxCount]).nice()
.range([heightDiamond, 0])
color = d3.scaleOrdinal()
.domain(diamondCuts)
.range(['#bd0026', '#f03b20', '#fd8d3c', '#fecc5c', '#ffffb2'])
xAxisDiamond = d3.axisBottom(groupX)
yAxisDiamond = d3.axisLeft(y)
legend = html`<div style='font-family: sans-serif; font-size: 10px; font-weight: bold;'>Diamond Cut</div>
${swatches({color})}`
{
// set up
const svg = d3.create('svg')
.attr('width', widthDiamond)
.attr('height', heightDiamond);
// Create the inner drawing group, shifted by margins
const chart = svg.append('g')
.attr('transform', `translate(${marginDiamond.left},${marginDiamond.top})`);
// Adjusted inner width and height
const innerWidth = widthDiamond - marginDiamond.left - marginDiamond.right;
const innerHeight = heightDiamond - marginDiamond.top - marginDiamond.bottom;
/*
Tarea A:
- agregar un <g> al svg por cada grupo de barras
- usar colorToCutToCount como los datos
- posicionar cada grupo usando la escala groupX
*/
const group = chart.append('g')
.selectAll('g')
.data(Array.from(colorToCutToCount)) // [ [color, Map(cut => count)], ... ]
.join('g')
.attr('transform', ([color]) => `translate(${groupX(color)},0)`);
/*
Tarea B:
- agregar las barras a cada grupo
- definir los atributos x, width, y, height y fill
*/
//El localBarX es como un "Dentro de esta subgrupo, reparte diamondCuts en su espacio local, o sea dentro del bandwith"
const localBarX = d3.scaleBand()
.domain(diamondCuts)
.range([0, groupX.bandwidth()])
.padding(0.1);
group.selectAll('rect')
.data(([color, cutMap]) =>
Array.from(cutMap, ([cut, count]) => ({ color, cut, count }))
)
.join('rect')
.attr('x', d => {
return localBarX(d.cut);
})
.attr('width', d => {
return localBarX.bandwidth();
})
.attr('y', d => y(d.count) - marginDiamond.top - marginDiamond.bottom)
.attr('height', d => y(0) - y(d.count))
.attr('fill', d => color(d.cut));
// adicionar ejes
// X axis (at bottom of chart area)
chart.append('g')
.attr('transform', `translate(0, ${innerHeight})`)
.call(xAxisDiamond)
.call(g => g.select('.domain').remove())
.append('text')
.attr('x', innerWidth / 2)
.attr('y', 40) // below the ticks
.attr('text-anchor', 'middle')
.attr('fill', 'black')
.text('Diamond Color');
// Y axis (left side of chart area)
chart.append('g')
.call(yAxisDiamond)
.call(g => g.select('.domain').remove())
.append('text')
.attr('x', -marginDiamond.left)
.attr('y', -10)
.attr('text-anchor', 'start')
.attr('fill', 'black')
.text('Count');
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.
