Lessons
view all ⭢
lesson
Intro to module 1Master Testing Library with ESLint PluginIntroduction to module 1 - Plugin features and set up
lesson
Conclusion and extra resourcesFullstack Typescript with TailwindCSS and tRPC Using Modern Features of PostgreSQLConclusion and extra resources
lesson
AnalyzingFullstack Typescript with TailwindCSS and tRPC Using Modern Features of PostgreSQLLooking into how to analyze a problem and create a product
lesson
Infrastructure for RangesFullstack Typescript with TailwindCSS and tRPC Using Modern Features of PostgreSQLSetting up infrastructure for Ranges
lesson
Completing the Select Date PageFullstack Typescript with TailwindCSS and tRPC Using Modern Features of PostgreSQLCompleting the Select Date Page
lesson
Select DayFullstack Typescript with TailwindCSS and tRPC Using Modern Features of PostgreSQLCreating the "Choose Date" Page
lesson
Dynamically Styling a D3 and Svelte Beeswarm ChartBuilding a Beeswarm Chart with Svelte and D3In this lesson, we will learn how to dynamically style nodes in a force layout. The color and radii of nodes, represented as circles, in a beeswarm plot will be determined by specific data dimensions and scales defined via methods (e.g., scaleOrdinal for mapping discrete values of a categorical variable to visual elements like colors) of the d3-scale module.
lesson
Svelte Reactivity and D3 Force Ticks in Beeswarm ChartsBuilding a Beeswarm Chart with Svelte and D3In this lesson, we will learn how ticks work in D3 force simulation layouts, and we will dive into Svelte reactivity (reactivity blocks) for correctly rendering nodes of a force layout in a responsive SVG canvas. A tick represents a “frame” in a force simulation - the state of the force layout at a specific point in a force simulation. With Svelte reactivity, nodes, represented as circles, will be positioned correctly in a beeswarm plot upon initial page load.