diff --git a/src/lib/ScatterPlot.svelte b/src/lib/ScatterPlot.svelte index d69a6fa..ca451b9 100644 --- a/src/lib/ScatterPlot.svelte +++ b/src/lib/ScatterPlot.svelte @@ -19,7 +19,7 @@ export let on_hover_point: ((point: PlotPoint) => void) | null = null export let x_label = `Atomic Number` export let x_label_y = 0 - export let color_scale: ScaleLinear | null = null + export let color_scale: ScaleLinear | null = null // either array of length 118 (one heat value for each element) or object with // element symbol as key and heat value as value export let y_values: number[] diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 65366f1..ee01b9a 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -8,16 +8,11 @@ import ScatterPlot from '$lib/ScatterPlot.svelte' import { active_category, active_element, heatmap_key, last_element } from '$lib/stores' import TableInset from '$lib/TableInset.svelte' - import EasterEgg from '$site/EasterEgg.svelte' import PropertySelect from '$site/PropertySelect.svelte' import type { ScaleLinear } from 'd3-scale' - import '../app.css' let window_width: number - let color_scale: ScaleLinear - let x_angle = 0 - let y_angle = 0 - let auto_rotate: 'x' | 'y' | 'both' | 'none' = `none` + let color_scale: ScaleLinear $: [y_label, y_unit] = property_labels[$heatmap_key] ?? [] @@ -33,83 +28,50 @@ -
1100} + {@const { shells, name, symbol } = $last_element} + + + +{/if} + 1000} + heatmap_values={$heatmap_key ? element_data.map((el) => el[$heatmap_key]) : []} + style="margin: 2em auto 4em;" + bind:color_scale + bind:active_element={$active_element} + bind:active_category={$active_category} + links="name" > - {#if $last_element && window_width > 1100} - {@const { shells, name, symbol } = $last_element} - - - - {/if} - 1000} - heatmap_values={$heatmap_key ? element_data.map((el) => el[$heatmap_key]) : []} - style="margin: 2em auto 4em;" - bind:color_scale - bind:active_element={$active_element} - bind:active_category={$active_category} - links="name" - > - - {#if $heatmap_key} - el[$heatmap_key])} - {y_label} - {y_unit} - on_hover_point={(point) => ($active_element = point[2])} - x_label_y={42} - {color_scale} - /> - {:else} - - {/if} - - + + {#if $heatmap_key} + el[$heatmap_key])} + {y_label} + {y_unit} + on_hover_point={(point) => ($active_element = point[2])} + x_label_y={42} + {color_scale} + /> + {:else} + + {/if} + + - {#if !$heatmap_key} - - {/if} -
- - +{#if !$heatmap_key} + +{/if}