Published
Edited
Oct 10, 2019
1 star
chart = {
const ratData = [400, 900, 300, 600];
const svg = d3.select(DOM.svg(500,150));
svg.selectAll("rect")
.data(ratData)
.enter()
.append('rect')
.attr('x', (d, i) => {
return i * 25;
})
.attr('width', 15)
.attr('fill', '#d1c9b8')
.attr('height', d => {
return d/10 * 1.5;
})
.attr('y', d => {
return 150 - d/10 * 1.5;
});
return svg.node();
}
createElements = {
var ratData = [400, 900, 300, 600]; // looks familiar!
var svg = d3.select('body')
.append('svg')
.attr('width', 500)
.attr('height', 150);
svg.selectAll('rect')
.data(ratData)
.enter()
.append('rect')
.attr('x', function(d, i){
return i * 25;
})
.attr('width', 15)
.attr('fill', '#d1c9b8')
.attr('height', function(d){
return d/10 * 1.5;
})
.attr('y', function(d){
return 150 - d/10 * 1.5;
});
return html`${svg.node()}`; // Return html-i-fied version of SVG for Observable to render.
}
eueChart = {
var ratData = [450, 90, 500, 400, 100, 100];
var svg = d3.select('body')
.append('svg')
.attr('width', 500)
.attr('height', 150);
return html`${drawChart(svg, ratData)}`;
}
tryMeChart = {
var myCoolData = []; // Put some values in here!
var svg = d3.select('body')
.append('svg')
.attr('width', 500)
.attr('height', 150);
return html`${drawChart(svg, myCoolData)}`;
}
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.
