Radius calculation

[tomvaillant]

In the Bubbles component I'm having trouble setting up my radiusScale (line 36) correctly so that the different datasets can all use the same scale. Two issues I'm seeing:

• when rendering data.instagram (Index.svelte line 214), for some reason any node with a d.radius value over 100k is being assigned a negative value.
• when rendering data.reddit (Index.svelte line 163) the radius for the nodes is too large, even though I set a min and max in pixels.

[matthewfdaniels]

i'm guessing it's because you're setting your radius scale in Bubbles. Every time you pass data to that component, it calculates the max and min radius value of that specific dataset you've passed.

what i would do is on this component, pass the max/min value as a prop

you could calculate the min/max value in Index.svelte where the data isn't filtered yet, and pass it to the Section component and then to Bubbles, or you could use stores but that's a new concept for you to learn potentially!

for your radius problems being negative, that's because it looks like the extent of your values are negative.
here's what happened when i logged out this function

So in theory, things should always be positive! one thing you can do keep things always in range is add this to the end of the radius function .clamp(true), which forces values to be within your output range

factoring your code this way also might easier to track

the $: will force anything to re-run in the statement if it changes. so in this example, xScaled will recalculate if innerWidth or positions change

In my example, $: data, runSimulation(); says, if data changes, run this function once

[tomvaillant]

Thanks Matt! Much prefer this syntax but I was having too many errors when I tried to implement it, will keep it for tomorrow.

The metrics used for radii are comparable within a dataset but not across datasets, so calculating it as a fixed overarching value wouldn't work (circles representing studies would be miniscule compared to reddit comments).

I was able to fix the negative values, when parsing CSVs I was importing the radius column values as strings rather than integers.