<script>
import * as d3 from 'd3';
import {onMount} from 'svelte';
let width = 4650;
let height = 400;
let margin = {top: 10, right: 10, bottom: 75, left: 20};
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.scalePoint()
.domain(data.map(d => d.country))
.range([margin.left, width - margin.right]);
$: yScale = d3.scaleLinear()
.domain([0, d3.max(data, d => d.health)])
.range([height - margin.bottom, margin.top])
$: colorScale = d3.scaleOrdinal(d3.schemeTableau10)
.domain(data.map(d => d.region));
let xAxis;
let yAxis;
$: {
d3.select(yAxis).call(d3.axisLeft(yScale));