Better documentation needed to get d3-delaunay started #3525
-
|
How can we learn d3-delaunay without Observable? It is supper difficult to understand how D3 and d3-delaunay work on Observable. Any user friendly guide or documentation to get d3-delaunay started easily with plain JavaScript, HTML and CSS locally? For example, I want to know how this Voronoi is created: There is no other basic code structure - importing D3, declaring variables, and targeting an HTML element in the Observable environment. How do apply and use this Observable is really a BIG obstacle to newcomers. Please consider providing us with friendly documentation. Thanks, |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 2 replies
-
I couldn't agree more to this. I used d3 before the switch from bl.ocks.org and was very happy with it. Coming back to d3 some time later and I'm just irritated by how worse the documentation got. The bl.ocks.org examples weren't great for learning, but Observable made it considerably worse. I can understand, that Observable might be nice to use as a Notebook kind of thing, but for documentation and understanding how d3 works its detrimental. Especially the fact, that the Cells are executed in a "random" order that is not visible makes it very annoying to understand what is happening and transfer a visualization from Observable to a non-Observable Script. The switch changed the understanding process from a linear top to bottom approach to a kind of backtracking. That's not good. Scrolling over the discussions there is also #3485 which also addresses this problem.. While trying to find the old bl.ocks based examples i stumbled upon https://www.d3-graph-gallery.com/, which seems to be a much better source for example code at first glance. |
Beta Was this translation helpful? Give feedback.
-
|
I completely understand the frustrations expressed. This question inspired me to port that particular example to vanilla JavaScript. Here it is: https://vizhub.com/curran/61c8d66918994602bc80dbbcda46217c <!DOCTYPE html>
<html>
<head>
<title>Voronoi Edges</title>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
<!-- Pull in D3 via UNPKG CDN. -->
<script src="https://unpkg.com/d3@7.0.1/dist/d3.min.js"></script>
</head>
<body>
<script>
// Unpack the d3 global from <script> tag.
const { select, Delaunay } = d3;
// Number of points.
const n = 1500;
// Extract the current dimensions of the browser window.
const width = window.innerWidth;
const height = window.innerHeight;
// Generate random positions.
const randomX = d3.randomNormal(
width / 2,
height / 3
);
const randomY = d3.randomNormal(
height / 2,
height / 3
);
const positions = Float64Array.from(
{ length: n * 2 },
(_, i) => (i & 1 ? randomY() : randomX())
);
// Construct a Delaunay instance from our positions.
const voronoi = new d3.Delaunay(positions).voronoi([
1,
1,
width - 1,
height - 1,
]);
// Set up our Canvas to draw on.
const canvas = select('body')
.append('canvas')
.attr('width', width)
.attr('height', height)
.node();
const context = canvas.getContext('2d');
// Render the points.
context.fillStyle = 'black';
context.beginPath();
voronoi.delaunay.renderPoints(context, 1);
context.fill();
// Generate the line segments to render incrementally.
const segments = voronoi.render().split(/M/).slice(1);
// Define a generator that renders 5 lines then yields.
// This allows for incremental rendering.
function* renderIncrementGenerator() {
let i = 0;
context.lineWidth = 1.5;
for (const e of segments) {
context.beginPath();
context.strokeStyle = d3.hsl(
360 * Math.random(),
0.7,
0.5
);
context.stroke(new Path2D('M' + e));
if (i++ % 5 === 0) {
yield;
}
}
}
// Create the generator instance.
const renderIncrement = renderIncrementGenerator();
// At 60 frames per second, render an increment each frame.
const render = () => {
const { done } = renderIncrement.next();
if (!done) {
requestAnimationFrame(render);
}
};
render();
</script>
</body>
</html> |
Beta Was this translation helpful? Give feedback.
-
|
FYI: d3-delaunay is included in d3 since version 6, so you don’t need both. |
Beta Was this translation helpful? Give feedback.
-
|
Oh nice! Updated. |
Beta Was this translation helpful? Give feedback.
I completely understand the frustrations expressed.
This question inspired me to port that particular example to vanilla JavaScript. Here it is:
https://vizhub.com/curran/61c8d66918994602bc80dbbcda46217c