50 líneas
1,4 KiB
Svelte
50 líneas
1,4 KiB
Svelte
<script lang="ts">
|
|
import * as d3 from 'd3';
|
|
import { onMount } from 'svelte';
|
|
|
|
export let data: {date: string, avgTemp: number}[] = [
|
|
{date: "2023-01-01", avgTemp: 22},
|
|
{date: "2023-01-02", avgTemp: 19},
|
|
{date: "2023-01-03", avgTemp: 16},
|
|
{date: "2023-01-04", avgTemp: 9},
|
|
{date: "2023-01-05", avgTemp: 4},
|
|
{date: "2023-01-06", avgTemp: 5},
|
|
{date: "2023-01-07", avgTemp: 5},
|
|
{date: "2023-01-08", avgTemp: 2},
|
|
{date: "2023-01-09", avgTemp: 4},
|
|
{date: "2023-01-10", avgTemp: 1},
|
|
{date: "2023-01-11", avgTemp: 6},
|
|
{date: "2023-01-12", avgTemp: 6},
|
|
{date: "2023-01-13", avgTemp: -1},
|
|
{date: "2023-01-14", avgTemp: -3},
|
|
{date: "2023-01-15", avgTemp: -4},
|
|
{date: "2023-01-16", avgTemp: -1},
|
|
{date: "2023-01-17", avgTemp: -3},
|
|
{date: "2023-01-18", avgTemp: -2},
|
|
{date: "2023-01-19", avgTemp: 0},
|
|
{date: "2023-01-20", avgTemp: -1},
|
|
{date: "2023-01-21", avgTemp: 1},
|
|
{date: "2023-01-22", avgTemp: 0},
|
|
{date: "2023-01-23", avgTemp: -2},
|
|
];
|
|
|
|
let vis: Element;
|
|
|
|
onMount(() => {
|
|
const xScale = d3.scaleBand().rangeRound([0, 500]).padding(0.1);
|
|
const yScale = d3.scaleLinear().domain([-10, 40]).range([200, 0]);
|
|
const container = d3.select(vis);
|
|
container
|
|
.selectAll('rect')
|
|
.data(data)
|
|
.enter()
|
|
.append('rect')
|
|
.attr('width', xScale.bandwidth())
|
|
.attr('heigth', (data) => yScale(data.avgTemp))
|
|
.attr('fill', 'black')
|
|
})
|
|
</script>
|
|
<main>
|
|
<svg bind:this={vis}></svg>
|
|
</main>
|