Published
Edited
Dec 5, 2019
chart = {
const svg = d3.create('svg')
.attr('viewBox', [0, 0, width, height]);
const section = svg.selectAll('g.section')
.data(ndata)
.join('g').attr('class', 'section')
.attr('transform', d => `translate(0,${vsection(d.key) + 1})`)
.call(createsection);
return svg.node();
}
createsection = section => {
let ds = section.datum();
let ix = x(ds.values);
let iy = y(ds.values);
section.append('text').attr('class', 'head')
.text(d => d.key);
section.append('g').attr('class', 'axis x')
.attr('transform', d => `translate(0, ${vsection.bandwidth() - margin.bottom})`)
.call(g => {
g.call(d3.axisBottom(ix).tickSizeOuter(0));
});
section.append('g').attr('class', 'axis y')
.attr('transform', d => `translate(${margin.left}, 0)`)
.call(g => {
g.call(d3.axisLeft(iy));
});
section.append('g').attr('class', 'plot')
.selectAll('rect').data(ds.values)
.join('rect')
.attr('x', d => ix(d.name))
.attr('y', d => iy(d.value))
.attr('height', d => iy(0) - iy(d.value))
.attr('width', ix.bandwidth());
}
data = d3.csvParse(await FileAttachment('women-stem.csv').text())
ndata = data && d3.nest().key(d => d.category).entries(data.map(d => {
return {category: d['Major_category']
, name: d.Major, value: d.Women};
}));
x = ds => d3.scaleBand().domain(ds.map(d => d.name)).range([margin.left, width - margin.right]).padding(0.5)
y = ds => d3.scaleLinear().domain([0, d3.max(ds, d => +d.value)]).nice().range([vsection.bandwidth() - margin.bottom, margin.top])
vsection = d3.scaleBand()
.domain(ndata.map(d => d.key)).range([margin.top, height])
width = 500
height = 1200
margin = ({top: 20, right: 0, bottom: 100, left: 40})
d3 = require('d3@5')
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.
