lesson

In 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

Beeswarm plots offer an elegant and interactive way to visualize distributions, outliers and patterns within datasets. In this lesson, we will cover the fundamentals of building a beeswarm plot, beginning with an in-depth explanation of force simulations in D3 data visualizations. Then, we will learn how to prepare data for a force layout via D3’s data manipulation methods (e.g., rollup), how to create a force layout with the d3-force module (to automatically position nodes, represented as circles, in clusters and avoid node collisions/overlap) and how to render nodes of the force layout in a responsive SVG canvas with Svelte. 

lesson

Programmatically traverse an AST and visit arbitrary nodes

lesson

Exploring tools to convert (or parse) JavaScript into a real AST

lesson

Making our countries' fill represent population

lesson

Making it spin!

lesson

An introduction to d3-geo

lesson

Adding hover events, dynamic styling, and tooltips to bring our chart to life

lesson

Using Svelte's dimension bindings to make our chart visible on all screen sizes

lesson

Using Svelte and D3 to draw axes, gridlines, and labels

lesson

Drawing your first SVG elements in Svelte