Lead maintainer of of d3-x3d.
bubbles2 = {
let chartHolder = d3.select(document.createElement("div"));
chartHolder.attr("style", "height: 420px");
function convert(data) {
return {
key: data.key,
values: data.values.map(function(d) {
return {
key: d.key,
values: [
{ key: "size", value: d.value },
{ key: "color", value: d.value },
{ key: "x", value: d.x },
{ key: "y", value: d.y },
{ key: "z", value: d.z }
]
};
})
};
}
// Construct components
let bubbleCompnent = d3X3d.component.bubbles()
.mappings({ x: 'x', y: 'y', z: 'z', size: 'size', color: 'color' })
.colors(d3.schemeRdYlGn[8])
.sizeRange([1, 4]);
let viewpoint = d3X3d.component.viewpoint();
// Create x3d and scene
let scene = chartHolder
.append("X3D")
.attr("width", width + "px")
.attr("height", height + "px")
.append("Scene");
// Append components to scene
scene
.append("Group")
.datum(convert(data[0]))
.call(bubbleCompnent);
scene
.call(viewpoint);
return chartHolder.node();
}
bubbles3 = {
let chartHolder = d3.select(document.createElement("div"));
chartHolder.attr("style", "height: 420px");
// Construct components
let bubbles = d3X3d.component.bubblesMultiSeries().colors(colors);
let viewpoint = d3X3d.component.viewpoint();
// Create x3d and scene
let scene = chartHolder
.append("X3D")
.attr("width", width + "px")
.attr("height", height + "px")
.append("Scene");
// Append components to scene
scene
.append("Group")
.datum(data)
.call(bubbles);
scene
.call(viewpoint);
return chartHolder.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.
