Published
Edited
Jun 2, 2020
chart = {
//wir bereiten eine Leinwand vor:
const svg = d3.create("svg").attr("viewBox", [0, 0, width, 200]);
//malen wir auf die Leinwand ein Rechteck
//an der Position 10,10 -> x und y
// mit der Breite 100 und der Höhe 180
//!svg hat den Nullpunkt oben links. Nicht wie gewohnt unten links
let rechteck = svg
.append('rect')
.attr('x', 10)
.attr('y', 10)
.attr('width', 100)
.attr('height', 180)
.style('fill', 'steelblue');
//und jetzt ein isschen (inter)Action:
//Wenn ich mit der Maus drüber fahre wird es rot
rechteck.on('mouseover', function() {
d3.select(this).style('fill', 'tomato');
});
//Wenn ich mit der Maus weggehe, wird es wieder blau
rechteck.on('mouseout', function() {
d3.select(this).style('fill', 'steelblue');
});
//und sogar noch mehr :)
rechteck.on('click', function() {
//wenn das Rechteck links ist, soll es sich bei einem Klick nach rechts bewegen.
//Wenn das Rechteck rechts ist, soll es sich bei einem Klick nach Links bewegen
if (d3.select(this).attr('x') < width - 110) {
d3.select(this)
.transition()
.ease(d3.easeBounce) //sogar mit Bounce, weil es so einfach ist ;)
.attr('x', width - 110);
} else {
d3.select(this)
.transition()
.ease(d3.easeBounce) //sogar mit Bounce, weil es so einfach ist ;)
.attr('x', 10);
}
});
return svg.node();
}
mausFunktion = function(daten) {
console.log('wenn mit der Maus darüber, dann:');
console.log(daten);
}
margin = ({ top: 30, right: 30, bottom: 60, left: 40 })
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.