<script>
// IMPORT STATEMENTS
// Importing necessary D3 modules and Svelte components
import { forceSimulation, forceX, forceY, forceCollide } from "d3-force";
import { scaleLinear, scaleSqrt, scaleBand, scaleOrdinal } from "d3-scale";
import { nest } from "d3-collection";
import { group } from "d3-array";
import * as d3 from 'd3'
// Importing custom Svelte components
import Scrolly from "./Scrolly.svelte";
import Force from './Force.svelte'
import Histogram from './Histogram.svelte'
import AxisY from './AxisY.svelte'
// Importing data
import data from "./data.js";
export let colorScale;
// CONSTANTS & SCALES
// Setting up constants and scales
let width = 500;
let height = 400;
let circleRadius = 15;
const performanceCategories = [-2, -1, 0, 1 ,2]
const languageCategories = ["french",'english']
// Setting up dimensions
let margin = { top: 50, left: 30, right: 30, bottom: 50 };
$: chartWidth = width - margin.left - margin.right
$: chartHeight = height - margin.top - margin.bottom
// Setting up scales using D3
$: xScale = scaleLinear().domain([0, 100]).range([0, chartWidth]);
$: yScale = scaleLinear().domain([0, 100]).range([chartHeight, 0]);