Published
Edited
Jul 10, 2020
1 fork
3 stars
canvas1 = {
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, 2 * Math.PI);
context.fill();
return context.canvas;
}
canvas2={
const height = 220;
const width = 400;
const context = DOM.context2d(width, height);
var detachedContainer = document.createElement("custom");
var dataContainer = d3.select(detachedContainer);
var dataArray1 = [100, 70, 20, 90];
var transitionTime = 1000;
function drawCustom(data) {
var dataBinding = dataContainer.selectAll("custom.circle")
.data(data, function(d) { return d; });
dataBinding.enter()
.append("custom")
.classed("circle", true)
.attr("cx", 100)
.attr("cy", 100)
.attr("radius", function(d) { return d; })
.attr("fillStyle", "rgba(255, 170, 1,0.3 )");
drawCanvas();
}
function drawCanvas() {
context.fillStyle = "#fff";
context.rect(0,0,width,height);
context.fill();
var elements = dataContainer.selectAll("custom.circle");
elements.each(function(d) {
var node = d3.select(this);
context.fillStyle = node.attr("fillStyle");
context.beginPath();
context.arc(node.attr("cx"), node.attr("cy"), node.attr("radius"), 0, 2 * Math.PI);
context.fill();
})
}
drawCustom(dataArray1);
return context.canvas;
}
canvas3={
const height = 220;
const width = 400;
const context = DOM.context2d(width, height);
var dataArray1 = [100, 70, 20, 90];
var transitionTime = 500;
var detachedContainer = document.createElement("custom");
var dataContainer = d3.select(detachedContainer);
function drawCustom(data) {
var dataBinding = dataContainer.selectAll("custom.circle")
.data(data, function(d) { return d; });
dataBinding.enter()
.append("custom")
.classed("circle", true)
.attr("cx", 100)
.attr("cy", 100)
.attr("radius", 0)
.attr("fillStyle", "rgba(18, 178, 150,0.3)")
.transition() //Added Part
.duration(transitionTime) //Added Part
.delay(function(d, i) { return i * transitionTime }) //Added Part
.ease(d3.easeLinear) //Added Part
.attr("radius", d => {
return d}
); //Added Part
// Here was drawCanvas(); Its down at the bottom, now.
}
function drawCanvas() {
context.fillStyle = "#fff";
context.rect(0,0,width,height);
context.fill();
var elements = dataContainer.selectAll("custom.circle");
elements.each(function(d) {
var node = d3.select(this);
context.fillStyle = node.attr("fillStyle");
context.beginPath();
context.arc(node.attr("cx"), node.attr("cy"), node.attr("radius"), 0, 2 * Math.PI);
context.fill();
context.closePath();
})
}
d3.timer(drawCanvas); //Added Part
drawCustom(dataArray1);
return context.canvas;
}
// rerun the cell to see the animation
canvas6 = {
const height = 250;
const width = 1000;
const transitionTime=500;
const context = DOM.context2d(width, height);
var detachedContainer = document.createElement("custom");
var dataContainer = d3.select(detachedContainer);
function drawCustom(data) {
var dataBinding = dataContainer.selectAll("custom.rect")
.data(data);
dataBinding
.transition()
.ease(d3.easeLinear)
.duration(transitionTime)
.delay(index*transitionTime)
.attr("size", function(d, i) {
return d;});
dataBinding
.enter()
.append("custom")
.classed("rect", true)
.attr("x", function(d, i) {
return i * 200 + 100;
})
.attr("y", 100)
.attr("size", function(d, i) {
return d;}
)
.attr("fillStyle", "rgba(255, 170, 1,0.8)");
dataBinding.exit()
.transition()
.duration(transitionTime)
.delay(index*transitionTime)
.attr("size", 0)
.remove();
}
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"), 40, node.attr("size"));
context.fill();
context.closePath();
})
}
d3.timer(drawCanvas);
var dataArray = [
[10],
[35, 45, 23],
[80, 100,13,10,45],
[55, 70],
[20, 10,34],
[100,23],
];
for (var index = 0; index < dataArray.length; index++) {
drawCustom(dataArray[index]);
}
//drawCustom([1,7,13,20,23]);
//drawCustom([1,7,12,16,20]);
return context.canvas;
}
//import {record} from '@mourner/canvas-recorder'
//record(canvas7)
// rerun the cell to see the animation
canvas7 = {
const height = 250;
const width = 1000;
const transitionTime=1000;
const context = DOM.context2d(width, height);
var detachedContainer = document.createElement("custom");
var dataContainer = d3.select(detachedContainer);
function drawCustom(data) {
var dataBinding = dataContainer.selectAll("custom.rect")
.data(data, d => d.name);
dataBinding
.transition()
.ease(d3.easeLinear)
.duration(transitionTime)
.delay(index*transitionTime)
.attr("size", function(d, i) {
return d.value;})
.attr("x", function(d, i) {
return d.rank*200-100;});
dataBinding
.enter()
.append("custom")
.classed("rect", true)
.attr("x", function(d, i) {
return d.rank*200-100;})
.attr("y", 100)
.attr("size", function(d, i) {
return d.value;}
)
.attr("fillStyle", "rgba(255, 170, 1,0.8)");
dataBinding.exit()
.transition()
.duration(transitionTime)
.delay(index*transitionTime)
.attr("size", 0)
.remove();
}
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"),40, node.attr("size"));
context.fill();
context.closePath();
})
}
d3.timer(drawCanvas);
var dataArray = [
[
{ "name": "Apple", "value": 12, "rank": 2 },
{ "name": "Ball", "value": 84, "rank": 1 },
{ "name": "Cat", "value": 0, "rank": 3 },
],
[
{ "name": "Apple", "value": 17, "rank": 3 },
{ "name": "Ball", "value": 95, "rank": 1 },
{ "name": "Cat", "value": 45, "rank": 2 },
],
[
{ "name": "Ball", "value": 17, "rank": 2 },
{ "name": "Apple", "value": 83, "rank": 1 }
],
[
{ "name": "Apple", "value": 17, "rank": 2 },
{ "name": "Ball", "value": 83, "rank": 1 }
],
[
{ "name": "Apple", "value": 17, "rank": 3 },
{ "name": "Ball", "value": 95, "rank": 1 },
{ "name": "Cat", "value": 45, "rank": 2 },
],
];
for (var index = 0; index < dataArray.length; index++) {
drawCustom(dataArray[index]);
}
//drawCustom([1,7,13,20,23]);
//drawCustom([1,7,12,16,20]);
return context.canvas;
}
// rerun the cell to see the animation
canvas8 = {
const height = 250;
const width = 1000;
const labelY=80;
const transitionTime=1000;
const context = DOM.context2d(width, height);
var detachedContainer = document.createElement("custom");
var dataContainer = d3.select(detachedContainer);
function drawCustom(data) {
var dataBinding = dataContainer.selectAll("custom.rect")
.data(data, d => d.name);
dataBinding
.transition()
.ease(d3.easeLinear)
.duration(transitionTime)
.delay(index*transitionTime)
.attr("size", function(d, i) {
return d.value;})
.attr("x", function(d, i) {
return d.rank*200-100;});
dataBinding
.enter()
.append("custom")
.classed("rect", true)
.attr("x", function(d, i) {
return d.rank*200-100;})
.attr("y", 100)
.attr("size", function(d, i) {
if (d.value) {return 15;}
else{ return 0}
});
dataBinding.exit()
.transition()
.duration(transitionTime)
.delay(index*transitionTime)
.attr("size", 0)
.remove();
var labels = dataContainer.selectAll("custom.text")
.data(data, d => d.name);
labels
.transition()
.ease(d3.easeLinear)
.duration(transitionTime)
.delay(index*transitionTime)
.attr("size", function(d, i) {
if (d.value) {return 15;}
else{ return 0;}
})
.attr("x", function(d, i) {
return d.rank*200-100+20;});
labels
.enter()
.append("custom")
.classed("text", true)
.attr("x", function(d, i) {
return d.rank*200-100+20;})
.attr("y", labelY)
.attr("name", d=>{return d.name})
.attr("size", function(d, i) {
if (d.value) {return 15;}
else{ return 0;}
});
labels.exit()
.transition()
.duration(transitionTime)
.delay(index*transitionTime)
.attr("size", 0)
.remove();
}
function drawCanvas() {
context.fillStyle = "#eee";
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 = "rgba(255, 170, 1,0.8)";
context.rect(node.attr("x"), node.attr("y"),40, node.attr("size"));
context.fill();
context.closePath();
})
var labelElements = dataContainer.selectAll("custom.text");
labelElements.each(function(d) {
var labelNode = d3.select(this);
context.font = labelNode.attr("size")+"px Arial";
context.textAlign = "center";
context.fillStyle = "rgba(3, 123, 144,0.9)";
context.fillText(labelNode.attr("name"), labelNode.attr("x"),labelNode.attr("y"));
context.fill();
})
}
d3.timer(drawCanvas);
var dataArray = [
[
{ "name": "Apple", "value": 12, "rank": 2 },
{ "name": "Ball", "value": 84, "rank": 1 },
{ "name": "Cat", "value": 15, "rank": 3 },
{ "name": "Dog", "value": 0, "rank": 4 },
],
[
{ "name": "Apple", "value": 17, "rank": 3 },
{ "name": "Ball", "value": 95, "rank": 1 },
{ "name": "Cat", "value": 45, "rank": 2 },
],
[
{ "name": "Ball", "value": 17, "rank": 2 },
{ "name": "Apple", "value": 83, "rank": 1 },
{ "name": "Cat", "value": 15, "rank": 3 },
],
[
{ "name": "Apple", "value": 17, "rank": 2 },
{ "name": "Ball", "value": 83, "rank": 1 },
{ "name": "Cat", "value": 15, "rank": 3 },
],
[
{ "name": "Apple", "value": 17, "rank": 3 },
{ "name": "Ball", "value": 95, "rank": 1 },
{ "name": "Cat", "value": 45, "rank": 2 },
{ "name": "Dog", "value": 0, "rank": 4 },
],
];
for (var index = 0; index < dataArray.length; index++) {
drawCustom(dataArray[index]);
}
//drawCustom([1,7,13,20,23]);
//drawCustom([1,7,12,16,20]);
return context.canvas;
}
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.
