<script>
import * as d3 from 'd3';
import {legendColor} from 'd3-svg-legend';
import {onMount} from 'svelte';
let width = 700;
let height = 400;
let margin = {top: 25, right: 245, bottom: 75, left: 30};
let data = [];
onMount(async function() {
data = await d3.csv('https://vega.github.io/vega-datasets/data/gapminder-health-income.csv', (d) => ({
...d,
income: +d.income,
health: +d.health,
population: +d.population
}));
console.log(data);
});
$: xScale = d3.scaleLog()
.domain([d3.min(data, d => d.income), d3.max(data, d => d.income)])
.range([margin.left, width - margin.right]);
$: yScale = d3.scaleLinear()
.domain([0, d3.max(data, d => d.health)])
.range([height - margin.bottom, margin.top])
$: sizeScale = d3.scaleSqrt()
.domain(d3.extent(data, d => d.population))
.range([5, 50])
$: colorScale = d3.scaleOrdinal(d3.schemeTableau10)
.domain(data.map(d => d.region));