palti

@palti·3 public vizzes

Vega-Lite API Template

This example uses the Vega-Lite API to visualize page visits over time, plotting each visit as a small black circle with timestamps on the x-axis and page names on the y-axis. The chart is rendered as an SVG via the View API, with data loaded asynchronously from a CSV file using d3.csv. The API is registered with vega and vega-lite, and a custom config adjusts axis and label styling for readability.

Nov 17, 2019

Loading thumbnail…

Percent Bee Colony Loss by State and Year

This visualization shows percent bee colony loss by state and year, with each square representing a state's loss percentage during a census year. The layout is designed to reveal geographic trends or hotspots, though the data ultimately demonstrates that colony loss appears random and consistent across the US. The visualization is built using Vega-Lite and the vega-lite-api, using `markRect` and `markPoint` functions to encode data with color and position. Data comes from a CSV file loaded via `d3.csv`, with tooltips and sorting by worst-hit states enabled through VEGA tooltip handlers and configuration settings.

Nov 17, 2019

Loading thumbnail…

World Countries Tree

This D3.js visualization uses a hierarchical tree layout to display the geographic structure of world countries, organized by continent and subregion. The data is loaded from a JSON file and processed through D3’s hierarchy function, with links drawn as horizontal connectors and text labels positioned per node depth, using the Playfair Display font. The visualization supports zooming via D3’s zoom component, allowing interactive exploration of the tree. The SVG rendering applies a fixed color to the connection paths, while node text includes a white shadow for readability.

Nov 17, 2019