Public
Edited
Oct 19, 2023
1 fork
data = FileAttachment("tested.csv").csv()
classType = d3.rollup(
data,
group =>group.length,
passenger=>passenger.Pclass
)
aggregated = Array.from(classType, ([key, value]) => ({
classType: key,
Number: value
}));
max = 3
min = 1
aggregated[2].Number
passengers_class = aggregated.map(item => item.Number);
max_passenger = d3.max(passengers_class)
survived = d3.filter(
data,
passenger => passenger.Survived =="1"
)
q1 = d3.rollup(
survived,
group => group.length,
passenger => passenger.Pclass,
)
q1Data = Array.from(q1, ([key, value]) => ({
classType: key,
value: value
}));
{const results = aggregated.map(item => {
const matchingQ1Item = q1Data.find(qItem => qItem.classType === item.classType);
if (matchingQ1Item) {
const percentage = ((matchingQ1Item.value / item.Number) * 100).toFixed(0);
return { classType: item.classType, percentage };
} else {
return null; // or handle the case when there is no matching q1Data for an item in aggregated
}
});
return results
}
results = {const results = aggregated.map(item => {
const matchingQ1Item = q1Data.find(qItem => qItem.classType === item.classType);
if (matchingQ1Item) {
const percentage = ((matchingQ1Item.value / item.Number) * 100).toFixed(0);
return {
classType: item.classType,
value: matchingQ1Item.value,
percentage: parseFloat(percentage)
};
} else {
return null; // or handle the case when there is no matching q1Data for an item in aggregated
}
});
return results
}
totalWidth = width
totalHeight = 400
margin = ({top: 20, bottom: 45, left: 75, right: 10})
visWidth = totalWidth - margin.left - margin.right
visHeight = totalHeight - margin.top - margin.bottom
y = d3.scaleBand()
.domain(["3","2","1"])
.range([0,visHeight])
.padding(0.3)
y(3)
y("3")
x = d3.scaleLinear()
.domain([0,max_passenger])
.range([0, visWidth])
x(218)
totalColor = `rgb(255, 204, 153)`
{
const svg = d3.create('svg')
.attr('width', totalWidth)
.attr('height', totalHeight);
const g = svg.append("g")
.attr('transform', `translate(${margin.left}, ${margin.top})`);
g.selectAll('.rect1')
.data(aggregated)
.join('rect')
.attr('x',0)
.attr('y', d => y(d.classType))
.attr('width', d => x(d.Number))
.attr('height', y.bandwidth())
.attr('fill', totalColor);
// add a group for the y-axis
const yText = {
"1": "First",
"2": "Second",
"3": "Third",
// Add more as needed
};
const yAxis = d3.axisLeft(y).tickFormat(d => yText[d]);
const xAxis = d3.axisBottom(x)
g.append('g')
.call(yAxis)
// remove the baseline
.call(g => g.select('.domain').remove())
.append('text')
.attr('fill', 'black')
.attr('font-family', 'sans-serif')
.attr('x', 0)
.attr('y', 0)
.text("Class Type")
.attr('font-size', '14px');
// add a group for the x-axis
g.append('g')
// we have to move this group down to the bottom of the vis
.attr('transform', `translate(0, ${visHeight})`)
.call(xAxis)
.call(g => g.select('.domain').remove())
// add a label for the x-axis
.append('text')
.attr('fill', 'black')
.attr('font-family', 'sans-serif')
.attr('x', visWidth / 2)
.attr('y', 40)
.text("Number of passengers")
.attr('font-size', '14px');
g.selectAll('.rect2')
.data(q1Data)
.join('rect')
.attr('x',0)
.attr('y', d => y(d.classType))
.attr('width', d => x(d.value))
.attr('height', y.bandwidth())
.attr('fill', 'orange');
g.selectAll('.text')
.data(results)
.join('text')
.attr('x',d => x(d.value))
.attr('y', d => y(d.classType))
.text(d=>d.percentage+" % ");
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.
