chart = {
const svg = d3.create('svg')
.attr('viewBox', [0, 0, width, height]);
const wrapper = svg.append('g')
.attr('transform', `translate(${margin.left}, ${margin.top})`);
wrapper.append('g')
.call(xAxis);
const circles = wrapper.selectAll('circle')
.data(work2019)
.join('circle')
.attr('r', d => circleScale(d.minuten))
.attr('fill', d => color(d.typ))
.attr('stroke', '#fff');
d3.timeout(() => {
for (var i = 0, n = Math.ceil(Math.log(force.alphaMin()) /
Math.log(1 - force.alphaDecay())); i < n; ++i) {
force.tick();
circles
.attr('cx', d => d.x)
.attr('cy', d => d.y);
}
})
return Object.assign(svg.node(), {force});
}
xAxis = g => g
.call(d3.axisTop(xScale)
.tickSizeOuter(0)
.tickSizeInner(0)
.ticks(5))
.call(g => g.select('.domain').remove());
innerHeight = height - margin.top - margin.bottom
innerWidth = width - margin.left - margin.right
height = 290
margin = ({top: 100, left: 30, right: 30, bottom: 30})
color = d3.scaleOrdinal()
.domain(["Other", "WissMit"])
.range(d3.schemeCategory10)
force = d3.forceSimulation(work2019)
.force('charge', d3.forceManyBody().strength(0))
.force('x', d3.forceX().x(d => xScale(d.month) + xScale.bandwidth() / 2))
.force('y', d3.forceY().y(d => yScale(d.typ)))
.force('collision', d3.forceCollide().radius(d => circleScale(d.minuten)))
circleScale = d3.scaleLinear()
.domain(d3.extent(work2019, d => d.minuten))
.range([1, 5])
xScale = d3.scaleBand()
.domain(['Jan', 'Feb', 'Mrz', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'])
.range([0, innerWidth]);
yScale = d3.scaleOrdinal()
.domain(d3.extent(work2019, d => d.typ))
.range([innerHeight, 50]);
work2019 = work2019a.slice(0, 1900)
work2019a = d3.csvParse(await FileAttachment("work2019.csv").text(), d => {
return {
minuten: +d.Minuten,
typ: d.Typ,
year: +d.year,
month: d.month
}
})
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.
