Published
Edited
Dec 11, 2018
1 star
viewof valueX = html`<input type=range min="50" max="200">`
viewof valueY = html`<input type=range min="50" max="200">`
viewof valueA = html`<input type=range min="0" max="360">`
chart = {
var width = 600;
var height = 300;
var svg = d3.select(DOM.svg(width, height));
var posX = valueX;
var posY = valueY;
var labels = svg.append("g")
.append("text")
.style("text-anchor", "start")
.attr("transform", function(d,i){
return 'rotate(' + valueA + ' ' + posX + ',' + posY + ')';
})
.attr("x", function(){
return posX;
} )
.attr("y", function(){
return posY;
})
.text('hello')
.attr("font-family", "sans-serif")
.attr("font-size", "20px")
.attr("fill", "black") ;
var bars = svg.append("g")
.append("rect")
.attr("fill", 'red' )
.attr("x", function(){
return posX;
} )
.attr("y", function(){
return posY;
})
.attr("height", '10px')
.attr("width", '10px');
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.
