Working Example of Bubble Chart - Hello World? #3650
-
|
The docs on how to use D3 are abysmal to say the least. Is there a simple HelloWorld Bubble Chart example I can follow? Hello: 10 That kind of data Seems quite a few things have changed in recent versions of D3 but the content online is still often referring to v2, 3, 4 of the software which isn't that useful since those are 10 years old. And need an example that is just super simple. So none of this csv data that seems to be highly prevalent in all the docs for some unknown reason. No-one uses CSVs as a data source in 2023, this isn't the 1990s. Seems super powerful does this library, but honestly, can't even get a basic example working so it's really putting me off exploring this further if it is this difficult to use and understand the art of the possible. |
Beta Was this translation helpful? Give feedback.
Replies: 4 comments 4 replies
-
|
How’s this?
BubbleChart([["Hello", 10], ["World", 20]])This snippet uses the D3 bubble chart component which you can easily import on Observable, you copy-paste the BubbleChart function into your web application. See this example notebook. Putting your specific question aside, your tone is unproductive and unwelcome. I understand that you’re frustrated that the documentation isn’t giving you what you need, but please remember that D3 and its documentation are provided to you entirely for free. You get what you pay for. There’s no reason to insult us, the maintainers, by calling them “abysmal”—that only serves to discourage us and leads to maintainer burn out.
This is patently false. CSV is an incredibly popular plain text file format for tabular data, and has only become more popular in recent times. It is widely supported by software and simpler than many other alternatives (e.g., XSLX). |
Beta Was this translation helpful? Give feedback.
This comment was marked as off-topic.
This comment was marked as off-topic.
-
|
Does this help? <!DOCTYPE html>
<body>
<script type="module">
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
const svg = BubbleChart([["Hello", 10], ["World", 20]]);
document.body.appendChild(svg);
function BubbleChart() {
// … paste BubbleChart function here …
}
</script> |
Beta Was this translation helpful? Give feedback.
-
|
@MichaelCropper For learning, you may like this video: Constructing Visualizations: Marks and Channels. This shows basic usage of D3 to plot things on the screen, without any CSV. The rest of that playlist provides context for how to use D3 in general. For example, here's the code that renders some circles, encapsulated as a function: export const xPosition = (selection, { data, height }) => {
selection
.selectAll('circle')
.data(data)
.join('circle')
.attr('cx', (d) => d * 70 + 60)
.attr('cy', height / 2)
.attr('r', 30);
};This is what that looks like: It's not a "bubble chart" or any chart really, but it's a simple precursor to a scatter plot that shows the structure of D3 rendering logic in its basic form. That can be expanded on to, for example, use color like this: const hue = (selection, { data, height }) => {
selection
.selectAll('circle')
.data(data)
.join('circle')
.attr('cx', (d) => d * 70 + 60)
.attr('cy', height / 2)
.attr('r', 30)
.attr('fill', (d, i) => d3.schemeCategory10[i]);
};
The video explains in detail what each part of the code does and how these functions can be invoked. The invocation of this function in the example is somewhat convoluted, but a simple invocation would look like this: const svg = d3.select('body').append('svg');
xPosition(svg, {
data: [0, 1, 2, 3, 4],
height: 150
});Code links:
Hope this helps! |
Beta Was this translation helpful? Give feedback.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
Does this help?