Published
Edited
Apr 1, 2020
1 star
md`# blockly experiments`
toolbox = {
const blocks = ["controls_if", "controls_repeat_ext", "logic_compare", "math_number",
"math_arithmetic", "text", "text_print"];
const toolbox = d3.create("xml");
toolbox.selectAll("block").data(blocks)
.enter()
.append("block").attr("type", d => d);
return toolbox.node();
}
blocklyDiv = {
const div = d3.create("div").attr("id", "blocklyDiv").style("width", 480 + "px").style("height", 480 + "px");
yield div.node();
}
workspace = {
return Blockly.inject(blocklyDiv, {toolbox: toolbox});
}
myDiv = {
const div = d3.create("div");
const code = div.append("code").attr("id", "myCode");
yield div.node();
}
workspace.addChangeListener(myUpdateFunction);
function myUpdateFunction(event) {
var code = Blockly.JavaScript.workspaceToCode(workspace);
d3.select(myDiv).select("#myCode").text(code);
}
Blockly = require("blockly");
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.
