<!--
Svelted version of Exercise 1 of Front End Masters course Introduction to Data Visualization with d3.js v4 by Shirley Wu
https://frontendmasters.com/courses/d3-v4/
-->
<script>
import { scaleLinear, timeParse, extent, scaleTime } from 'd3';
import data from './data.js';
let el;
let city = "austin"
const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
];
var width = 800;
var height = 300;
var margin = { top: 20, bottom: 20, left: 20, right: 20 };
data.forEach((d) => {
d.date = timeParse("%Y%m%d")(d.date);
d.date = new Date(d.date); // x
d.temp = ++d[city]; // y
});
// scales
let extentX = extent(data, (d) => d.date);
let xScale = scaleTime()
.domain(extentX)
.range([margin.left, width - margin.right]);
let extentY = extent(data, (d) => d[city]);
let yScale = scaleLinear()
.domain(extentY)
.range([height - margin.bottom, margin.top]);