Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
shape(Routes[1])
shape = d3.scaleOrdinal(Routes, d3.symbols.map(s => d3.symbol().type(s)()))
Data[0]
html`<style>
#${viewof CHART.id}{
background:"red";
}
.y-axis{
opacity:1;
pointer-events:none;
user-select:none;
}
.x-axis-bottom > .domain{
stroke-width:1;
}
.x-axis-top .domain{
display:none;
}
.x-axis-top .tick line{
stroke-width:1;
stroke-dasharray:1 43
}
.y-axis{
pointer-events:none;
}
.y-axis .tick line{
}
.task-shape{
opacity:0.25;
mix-blend-mode:-light;
}
</style>`
function handleTaskHover(d) {
d3.event.preventDefault();
d3.event.stopPropagation();
let thisData = d3.select(this).data();
mutable hovered = Data.find(x => +x.time === +d.time);
//TODO: use the values below to add a hovering line
var xval = d3.mouse(this)[0] || d3.touches(this)[0];
}
Data
Tasks = (g, xScale) =>
g
.selectAll('.task')
.data(Data, d => d.name + +d.time)
.join('g')
.attr('class', 'task')
.each(function(d) {
let data = d;
let it = null;
if (d.activeDuration === 0 || onlySHAPES) {
it = d3
.select(this)
.selectAll('.task-shape')
.data([d], d => d.name + +d.time)
.join('path')
.attr('class', 'task-shape')
.attr(
'transform',
d =>
`translate(${xScale(
new Date(+d.time + +d.activeDuration / 2)
)},${yScale(d.name) + yScale.bandwidth() / 2}) scale(3)`
)
.attr("d", d => shape(d.name));
} else {
it = d3
.select(this)
.selectAll('.task-shape')
.data([d], d => d.name + +d.time)
.join('rect')
.attr('class', 'task-shape')
.attr('rx', d => 14)
.attr('ry', d => 14)
.attr(
'transform',
d =>
`translate(${xScale(d.time)},${yScale(d.name) +
yScale.bandwidth() / 4})`
)
.attr('height', d => yScale.bandwidth() / 2)
.attr(
'width',
d => xScale(new Date(+d.time + +d.activeDuration)) - xScale(d.time)
);
}
it.attr('fill', d =>
colorScale(Categories.indexOf(d.name) / Categories.length)
).on('mousemove', handleTaskHover);
})
// .on('click', handleClickOnTask, yScale)
colorScale = d3.scaleSequential(d3.interpolateTurbo)
// .domain([Routes)
interval = "timeWeek"
Routes = [...new Set(Data.map(x => x.route))]
Categories = [...new Set(Data.map(x => x.name))]
// import { AxisTop } from '@stroked/timeline-axis'
height = 1080
viewof blue = d3
.select(DOM.input('color'))
.attr('value', d3.color('#E1F3FC').hex())
.node()
viewof LabelsCutOff = d3
.select(DOM.input('checkbox'))
.property('checked', true)
.node()
AxisTop = (g, scale) =>
g
.selectAll('.x-axis-top')
.data(['x-axis-top'])
.join('g')
.attr('class', d => d)
.attr("transform", `translate(0,${margin.top})`)
.call(
d3
.axisTop()
.scale(scale)
// .ticks(d3.timeWeek.every(2))
.tickSize(-(height - margin.top - margin.bottom))
// .tickFormat(d =>
// d3
// .timeFormat('%-b%-d')(d)
// .toUpperCase()
// )
.tickSizeOuter(0)
)
viewof onlySHAPES = d3
.select(DOM.input('checkbox'))
.property('checked', true)
.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.
