Data visualisation at @civio, a non-profit journalism organisation specialising in public data and access to information.
Published
Edited
Dec 2, 2019
2 stars
// Following this https://observablehq.com/@d3/selection-join
testChart = {
//Width and height
const width = 800;
const height = 100;
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("font-size", 10)
.attr("font-family", "sans-serif")
.attr("text-anchor", "middle")
.style("background", "pink");
while (OnOff) {
const t = svg.transition()
.duration(750);
//let dataset = d3.range(1,anotherTEst, 1);
let dataset = randomLetters();
//console.log(dataset);
svg.selectAll('circle')
.data(dataset, d => d)
.join(
enter => enter.append("circle")
.attr('r', 5)
.attr('cx', (d,i) => 50 + (i * 100))
.attr('cy', -200) // caen desde arriba..
.attr("class", "enter")
.attr("fill", "white") // los que aparecen, en blanco
.call(enter => enter.transition(t)
.attr('cy', 50)), // ...poco a poco
update => update
.attr("class", "update")
.attr('cy', 50) // ...poco a poco (REPITO COMO EN EL EJ)
.call(update => update.transition(t)
.attr("fill", "black") // los que permanecen, en negro
.attr('cx', (d,i) => 50 + (i * 100))),
exit => exit
.attr("class", "exit")
.attr("fill", "red") // los que aparecen, en gris
.call(exit => exit.transition(t)
.attr('cy', 200) // ...poco a poco
.remove())
);
/*
// GENERAL PATTERN
.join(
enter => enter.append("text")
//...
.call(enter => enter.transition(t)
//...
),
update => update
//...
.call(update => update.transition(t)
//...
),
exit => exit
//...
.call(exit => exit.transition(t)
//...
.remove())
)
*/
yield svg.node();
await Promises.tick(2500);
}
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
testWithLetters = {
//Width and height
const width = 500;
const height = 300;
const margin = {
top: 50,
bottom: 50,
left: 50,
right: 50
};
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("font-size", 10)
.attr("font-family", "sans-serif")
.attr("text-anchor", "middle")
.style("background", "pink");
// Reference of transitions here https://observablehq.com/@d3/selection-join
const t = svg.transition().duration(750);
const dataset = [
[{ name: 'a' }, { name: 'b' }, { name: 'c' }],
[{ name: 'd' }, { name: 'e' }, { name: 'f' }],
[{ name: 'g' }, { name: 'h' }]
]
console.log('initial dataset', dataset);
svg.append('text')
.text('click to change the dataset')
.attr('text-anchor', "start")
.attr('x', 50)
.attr('y', 50)
.on("click", function changeDataset() {
dataset.push([
{ name: 'i'}, { name: "j"}
])
console.log('new dataset', dataset);
});
const xScale = d3
.scaleLinear()
.domain([0, 100])
.range([margin.left, width - margin.right]);
const yScale = d3
.scaleLinear()
.domain([0, 100])
.range([height - margin.bottom, margin.top]);
let gColumns = svg.selectAll('g')
.data(dataset, (d,i) => i)
.join(
enter => enter.append('g')
.attr('id', (d, i) => `column-step-${i}`)
.attr('data-i', (d,i) => i)
.attr('transform', (d, i) => `translate(${i * 50 + 100},0)`),
update => update
.attr('class', 'update')
//.attr('id', (d, i) => `column-step-${i}`)
.attr('transform', (d, i) => `translate(${i * 50 + 100},0)`),
exit => exit.remove()
);
let textLetters = gColumns.selectAll('text')
.data(d => d, d => d)
.join(
enter => enter.append('text')
.text(d => d.name)
.attr('data-name', d => d.name)
.attr('class', 'enter')
.attr('x', 0)
.attr('y', yScale(300))
.style('font-size', '20px')
.call(enter => enter.transition(t)
.delay(function(d, i) {
let parentNodeInfo = d3.select(this.parentNode).attr("data-i");
return parentNodeInfo * 200 + i * 50;
})
.attr('y', (d, i) => yScale(i * 20))
),
update => update
.call(update => update.transition(t)
//.delay((d,i) => i * 300)
.delay(function(d, i) {
let parentNodeInfo = d3.select(this.parentNode).attr("data-i");
return parentNodeInfo * 200 + i * 50;
})
.attr('y', (d, i) => yScale(i * 20))
),
);
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.
