Get it Right in Black & White + Svelte

waseem-medhat · December 2, 2022, 3:22pm

Since I am learning Svelte(Kit) to use it in Dataviz, I thought of rebuilding the visualizations from this course in Svelte.

This is where it’s deployed: https://get-it-right-svelte.netlify.app/
And this is the code repo: https://github.com/waseem-medhat/get-it-right-svelte

At the time of writing this post, it is still a relatively early work-in-progress (seriously broken on mobile). But it should be complete by the time I finish the course.

Feedback is most welcome of course!

curran · December 5, 2022, 9:07pm

Whoah that’s amazing! Really nice work!

I love the fancy effects on the circles.

waseem-medhat · December 6, 2022, 6:56pm

Oh, thank you, Curran! Glad you like it.

Kamalabot · December 13, 2022, 7:38am

Excellent work Waseem.

github.com

waseem-medhat/get-it-right-svelte/blob/master/src/routes/(projects)/sol-lewitt/+page.svelte

<script>
	import { range, symbols } from 'd3';
	import Mask from './Mask.svelte';

	const width = 980;
	const height = 140;
	const sWidth = width / symbols.length;
</script>

<h2 class="text-6xl font-share mb-10">Sol Lewitt Reproduction</h2>
<svg {width} {height}>
	<!-- Horizontal Bars -->
	<g>
		{#each range(100) as i}
			<rect y={i * 20} {width} height="10" mask="url('#bg-mask')" />
		{/each}
	</g>

	<!-- Vertical Bars -->
	<g>

This file has been truncated. show original

Checked your sol-levitt implementation, by importing Mask from Mask.svelte. That is what I liked the most about Svelte. To send the data right into the Html Like tags using attributes.

I had been toying around Svelte for sometime and built re-usable *.svelte for many D3 shapes. Thought you and @curran might find it useful. (or may be suggest some improvements )

The *.svelte files in /src/lib directory is implementation multiple charts, importing D3.
Then front end just contains the Svelte Tags, to create the charts. Front end points that might of interests are routes/sample and routes/sample1

waseem-medhat · December 13, 2022, 6:39pm

Thank you so much @Kamalabot! Happy to check out what you created if you’d like to share.

Kamalabot · December 14, 2022, 11:51am

Hi Waseem,
Thanks, here is the repo with the *.svelte files for the charts.

I am working on making the dashboards more responsive by getting the data from a hosted database. The current data download from Github raw-user is very unpredictable and slow…

curran · February 16, 2024, 7:37pm

Hey @waseem-medhat, VizHub now supports Svelte!

Check out these awesome examples