Published
Edited
Jul 9, 2020
canvas1 = {
const height = 200;
const width = 600;
const context = DOM.context2d(width, height);
context.beginPath();
context.moveTo(10, 10);
context.lineTo(100, 10);
context.arcTo(150, 150, 300, 10, 40);
context.lineTo(300, 10);
context.stroke();
return context.canvas;
}
canvas2 = {
const height = 100;
const width = 600;
const context = DOM.context2d(width, height);
context.fillStyle = "rgba(3, 15, 234,0.9)";
context.beginPath();
//context.arc(x, y, radius, 0, 2 * Math.PI, true);
context.arc(95, 50, 40, 0, 1.7 * Math.PI); //Change 1.7 t0 2 for a full circle
context.fill();
return context.canvas;
}
canvas3 = {
const height = 100;
const width = 600;
const ctx = DOM.context2d(width, height);
ctx.fillStyle = "rgba(252, 110, 34,0.9)";
ctx.font = "30px Arial";
ctx.textAlign = "start";
//textBaseline supports: top, hanging, middle, alphabetic, ideographic bottom
ctx.textBaseline = "alphabetic";
ctx.fillText("Hello World", 10, 50);
ctx.strokeText("Hello World", 200, 50);
return ctx.canvas;
}
canvas4 = {
const height = 120;
const width = 600;
const ctx = DOM.context2d(width, height);
// Create gradient
var grd = ctx.createLinearGradient(0, 0, 200, 0); //context.createLinearGradient(x0,y0,x1,y1);
grd.addColorStop(0, "rgba(3, 123, 144,0.9)");
grd.addColorStop(1, "rgba(160, 238, 255,0.9)");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(0, 0, 400, 100);
return ctx.canvas;
}
canvas5 = {
const height = 210;
const width = 600;
const ctx = DOM.context2d(width, height);
// Create gradient
var grd = ctx.createRadialGradient(100, 100, 0, 100, 100, 100); //context.createRadialGradient(x0,y0,r0,x1,y1,r1);
grd.addColorStop(0, "rgba(3, 123, 144,0.9)");
grd.addColorStop(1, "rgba(255,255,255,0.9)");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(0, 0, 200, 200);
return ctx.canvas;
}
canvas6 = {
const height = 200;
const width = 200;
const ctx = DOM.context2d(width, height);
const image = new Image();
image.onload = () => {
ctx.imageSmoothingEnabled = false;
ctx.clearRect(0, 0, width, height);
ctx.drawImage(image, 0, 0,width,height);
};
image.src = 'https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66';
return ctx.canvas;
}
canvas7 = {
const height = 200;
const width = 1000;
const context = DOM.context2d(width, height);
var data = [10,2,8,20,23];
var scale = d3.scaleLinear()
.range([0, width/2])
.domain([0,23]);
data.forEach(function(d, i) {
context.rect(scale(d), 100, 40, d*3);
context.fillStyle="rgba(255, 170, 1,0.8)";
context.fill();
});
return context.canvas;
}
canvas8 = {
const height = 200;
const width = 1000;
const context = DOM.context2d(width, height);
var detachedContainer = document.createElement("custom");
var dataContainer = d3.select(detachedContainer);
function drawCustom(data) {
var scale = d3.scaleLinear()
.range([10, 390])
.domain(d3.extent(data));
var dataBinding = dataContainer.selectAll("custom.rect")
.data(data, function(d) { return d; });
dataBinding
.attr("size", 15)
.attr("fillStyle", "rgba(18, 178, 150,0.8)");
dataBinding.enter()
.append("custom")
.classed("rect", true)
.attr("x", scale)
.attr("y", 100)
.attr("size", 8)
.attr("fillStyle", "rgba(255, 170, 1,0.8)");
dataBinding.exit()
.attr("size", 5)
.attr("fillStyle", "rgba(72, 173, 241,0.8)");
drawCanvas();
}
function drawCanvas() {
context.fillStyle = "#ddd";
context.rect(0,0,width,height);
context.fill();
var elements = dataContainer.selectAll("custom.rect");
elements.each(function(d) {
var node = d3.select(this);
context.beginPath();
context.fillStyle = node.attr("fillStyle");
context.rect(node.attr("x"), node.attr("y"), node.attr("size"), node.attr("size"));
context.fill();
context.closePath();
})
}
drawCustom([1, 2, 13, 20, 23]);
drawCustom([1, 2, 12, 16, 20]);
return context.canvas;
}
import {record} from '@mourner/canvas-recorder'
//record(canvas9)
// rerun the cell to see the animation
canvas9 = {
const height = 200;
const width = 1000;
const context = DOM.context2d(width, height);
var detachedContainer = document.createElement("custom");
var dataContainer = d3.select(detachedContainer);
function drawCustom(data) {
var scale = d3.scaleLinear()
.range([10, 390])
.domain(d3.extent(data));
var dataBinding = dataContainer.selectAll("custom.rect")
.data(data, function(d) { return d; });
dataBinding
.attr("size", 8) //Added Part
.transition() //Added Part
.duration(5000) //Added Part
.attr("size", 25)
.attr("fillStyle", "rgba(18, 178, 150,0.8)");
dataBinding.enter()
.append("custom")
.classed("rect", true)
.attr("x", scale)
.attr("y", 100)
.attr("size", 8)
.attr("fillStyle", "rgba(255, 170, 1,0.8)");
dataBinding.exit()
.attr("size", 8) //Added Part
.transition() //Added Part
.duration(1000) //Added Part
.attr("size", 5)
.attr("fillStyle", "rgba(72, 173, 241,0.8)");
}
function drawCanvas() {
context.fillStyle = "#fff";
context.rect(0,0,width,height);
context.fill();
var elements = dataContainer.selectAll("custom.rect");
elements.each(function(d) {
var node = d3.select(this);
context.beginPath();
context.fillStyle = node.attr("fillStyle");
context.rect(node.attr("x"), node.attr("y"), node.attr("size"), node.attr("size"));
context.fill();
context.closePath();
})
}
d3.timer(drawCanvas); //Added Part
drawCustom([1,7,13,20,23]);
drawCustom([1,7,12,16,20]);
return context.canvas;
}
d3=require('d3@5')
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.