The avatar for @utec2
UTEC
Public
Edited
Apr 21
Fork of Lab - Barras
1
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
data = populations
Insert cell
data
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
marginPop = ({top: 10, bottom: 45, left: 75, right: 10})
Insert cell
widthPop = width
Insert cell
heightPop = 400
Insert cell
Insert cell
maxPopulation = d3.max(populations, d => d.population)
Insert cell
populationScale = d3.scaleLinear()
.domain([0, maxPopulation])
.range([marginPop.left, widthPop - marginPop.right])
Insert cell
countries = populations.map(d => d.country)
Insert cell
countryScale = d3.scaleBand()
.domain(countries)
.range([marginPop.top, heightPop - marginPop.bottom])
.padding(0.2)
Insert cell
Insert cell
xAxisPop = d3.axisBottom(populationScale).tickFormat(d3.format('~s'))
Insert cell
yAxisPop = d3.axisLeft(countryScale)
Insert cell
Insert cell
populationScale_vertical = d3.scaleLinear()
.domain([0, maxPopulation])
.range([heightPop - marginPop.bottom, marginPop.top]);

Insert cell
countryScale_vertical = d3.scaleBand()
.domain(countries)
.range([marginPop.left, widthPop - marginPop.right])
.padding(0.2);
Insert cell
xAxisPop_vertical = d3.axisBottom(countryScale_vertical);
Insert cell
yAxisPop_vertical = d3.axisLeft(populationScale_vertical).tickFormat(d3.format('~s'));
Insert cell
meanPopulation = d3.mean(populations, d => d.population)
Insert cell
{
const svg = d3.create('svg')
.attr('width', widthPop)
.attr('height', heightPop);

svg.append('g')
.selectAll('rect')
.data(populations)
.join('rect')
.attr('x', d => countryScale_vertical(d.country))
.attr('y', d => populationScale_vertical(d.population))
.attr('width', countryScale_vertical.bandwidth())
.attr('height', d => heightPop - marginPop.bottom - populationScale_vertical(d.population))
.attr('fill', 'steelblue');


svg.append('line')
.attr('x1', marginPop.left)
.attr('x2', widthPop - marginPop.right)
.attr('y1', populationScale_vertical(meanPopulation))
.attr('y2', populationScale_vertical(meanPopulation))
.attr('stroke', 'red')
.attr('stroke-width', 2)
svg.append('g')
.attr('transform', `translate(${marginPop.left}, 0)`)
.call(yAxisPop_vertical)
.call(g => g.select('.domain').remove());

svg.append('g')
.attr('transform', `translate(0, ${heightPop - marginPop.bottom})`)
.call(xAxisPop_vertical)
.call(g => g.select('.domain').remove());

svg.append('text')
.attr('fill', 'black')
.attr('font-family', 'sans-serif')
.attr('x', widthPop / 2)
.attr('y', heightPop)
.text('Población');

return svg.node();}

Insert cell
{
const svg = d3.create('svg')
.attr('width', widthPop)
.attr('height', heightPop);

svg.append('g')
.selectAll('line')
.data(populations)
.join('line')
.attr('x1', d => countryScale_vertical(d.country) + countryScale_vertical.bandwidth() / 2)
.attr('x2', d => countryScale_vertical(d.country) + countryScale_vertical.bandwidth() / 2)
.attr('y1', d => populationScale_vertical(d.population))
.attr('y2', d => populationScale_vertical(0) )
.attr('width', countryScale_vertical.bandwidth())
.attr('height', d => heightPop - marginPop.bottom - populationScale_vertical(d.population))
.attr('fill', 'steelblue')
.attr("stroke", "green");

svg.selectAll("mycircle")
.data(populations)
.join('circle')
.attr("cx", d => countryScale_vertical(d.country) + countryScale_vertical.bandwidth() / 2)
.attr("cy", d => populationScale_vertical(d.population) )
.attr("r", "4")
.attr('fill', 'orange')
.attr("stroke", "orange")

svg.append('g')
.attr('transform', `translate(${marginPop.left}, 0)`)
.call(yAxisPop_vertical)
.call(g => g.select('.domain').remove());

svg.append('g')
.attr('transform', `translate(0, ${heightPop - marginPop.bottom})`)
.call(xAxisPop_vertical)
.call(g => g.select('.domain').remove());

svg.append('text')
.attr('fill', 'black')
.attr('font-family', 'sans-serif')
.attr('x', widthPop / 2)
.attr('y', heightPop)
.text('Población');

return svg.node();}

Insert cell
Insert cell
diamonds = FileAttachment("diamonds-10k.csv").csv({typed: true})
Insert cell
diamonds
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
html`<div style='font-family: sans-serif; font-size: 10px; font-weight: bold;'>Diamond Cut</div>
${swatches({color})}`
Insert cell
diamondsChart
Insert cell
Insert cell
colorToCutToCount = d3.rollup(
diamonds,
v => v.length,
d => d.color,
d => d.cut
)
Insert cell
Insert cell
marginDiamond = ({top: 10, bottom: 50, left: 85, right: 10})
Insert cell
widthDiamond = width
Insert cell
heightDiamond = 600
Insert cell
Insert cell
Insert cell
diamondColors = [...new Set(diamonds.map(d => d.color))].sort()
Insert cell
Insert cell
groupX = d3.scaleBand()
.domain(diamondColors)
.range([marginDiamond.left, widthDiamond - marginDiamond.right])
.padding(0.1)
Insert cell
Insert cell
new Set(diamonds.map(d => d.cut))
Insert cell
diamondCuts = ['Premium', 'Ideal', 'Very Good', 'Good', 'Fair']
Insert cell
Insert cell
barX = d3.scaleBand()
.domain(diamondCuts)
.range([0, groupX.bandwidth()])
.padding(0.1)
Insert cell
Insert cell
maxCount = d3.max( , color =>
d3.max(diamondCuts, cut =>
colorToCutToCount.get(color)?.get(cut) ?? 0))
Insert cell
Insert cell
y = d3.scaleLinear()
.domain([0, maxCount])
.nice()
.range([heightDiamond - marginDiamond.bottom, marginDiamond.top])
Insert cell
Insert cell
color = d3.scaleOrdinal()
.domain(diamondCuts)
.range(['#bd0026', '#f03b20', '#fd8d3c', '#fecc5c', '#ffffb2'])
Insert cell
Insert cell
xAxisDiamond = d3.axisBottom(groupX)
Insert cell
yAxisDiamond = d3.axisLeft(y)
Insert cell
Insert cell
legend = html`<div style='font-family: sans-serif; font-size: 10px; font-weight: bold;'>Diamond Cut</div>
${swatches({color})}`
Insert cell

{const svg = d3.create('svg')
.attr('width', widthDiamond)
.attr('height', heightDiamond);

for (const diamondColor of diamondColors) {
const g = svg.append('g')
.attr('transform', `translate(${groupX(diamondColor)},0)`)

for (const cut of diamondCuts) {
const count = colorToCutToCount.get(diamondColor)?.get(cut) ?? 0

g.append('rect')
.attr('x', barX(cut))
.attr('y', y(count))
.attr('width', barX.bandwidth())
.attr('height', y(0) - y(count))
.attr('fill', color(cut))
}
}

svg.append('g')
.attr('transform', `translate(0,${heightDiamond - marginDiamond.bottom})`)
.call(xAxisDiamond)
.call(g => g.select('.domain').remove())
.append('text')
.attr('x', widthDiamond / 2)
.attr('y', 30)
.attr('dominant-baseline', 'hanging')
.attr('text-align', 'middle')
.attr('fill', 'black')
.text('Diamond Color');

svg.append('g')
.attr('transform', `translate(${marginDiamond.left})`)
.call(yAxisDiamond)
.call(g => g.select('.domain').remove())
.append('text')
.attr('x', -50)
.attr('y', heightDiamond / 2)
.attr('dominant-baseline', 'middle')
.attr('text-align', 'end')
.attr('fill', 'black')
.text('Count');

return svg.node();}

Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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