Qingyue99

@Qingyue99·3 public vizzes

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, sourced from the United Nations’ 2018 estimates. It highlights customized D3 axes, where the y-axis removes its domain and tick lines, and the x-axis uses a tick format that abbreviates numbers (e.g., converting billions to "B"). The code uses d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom, rendered as SVG with a steelblue fill for the bars.

Apr 26, 2020

Loading thumbnail…

Vega-Lite API Template

This example presents a bar chart of population by country, with bars segmented by religion, using the Vega-Lite API. The visualization reads CSV data from a GitHub gist via `d3.csv` and encodes country, population, and religion through `vl.x()`, `vl.y()`, and `vl.color()`. It renders as an SVG in the browser, applying custom axis and label styling from a config object. The chart also includes tooltips for population values, powered by the Vega Tooltip handler.

Apr 26, 2020

Loading thumbnail…

Types of pets by zipcode

This interactive heatmap displays the distribution of pet types across Seattle zip codes, with each cell colored by the count of a specific primary breed. The visualization uses a red sequential color scale to highlight density variations, and tooltips reveal detailed information about zip code, species, and breed on hover. Built with Vega-Lite and rendered via the Vega-Lite API, the chart loads data from a CSV file containing Seattle pet license records and automatically fits its size to the browser window.

Apr 26, 2020