alicenie

@alicenie·5 public vizzes

Vega-Lite API Template

This example pairs a heatmap with Vega-Lite’s declarative API to visualize daily temperature readings. The chart plots date fields on both axes, using semi-transparent pink points to reveal density patterns, with tooltips showing the raw Temperature value. The visualization is built with `vega-lite-api`, registered alongside `vega` and `vega-lite`, and loads CSV data via d3’s `csv` function. Custom config adjusts axis labels and tick colors for readability, while the canvas is sized to fit the full viewport.

Jun 17, 2020

Loading thumbnail…

Percent Bee Colony Loss by State and Year

This visualization displays the percentage of bee colony loss across U.S. states and years using a heatmap of rectangles, with each square color-coded on a red scale to highlight loss intensity. States are sorted by worst overall losses, and tooltips reveal exact values for state, year, and percentage. The chart is built with vega-lite-api and d3.v5, using a CSV data source from a GitHub gist. The encoding maps state to the x-axis, year to the y-axis, and the quantitative loss field to color.

Jun 17, 2020

Loading thumbnail…

Percent Bee Colony Loss by State and Year

This heatmap displays the percentage of bee colony loss for each U.S. state across multiple years, with cells colored on a red scale from light to dark to indicate increasing loss severity. States are sorted by their worst recorded loss, and hovering over a cell reveals a tooltip with the specific state, year, and percentage. The visualization uses vega-lite-api to construct a rectangle mark, with data loaded via d3.csv from a GitHub Gist containing the Bee Colony Loss dataset. It is built with Vega-Lite’s markRect and tooltip encoding, and configured to fit the full window.

Jun 15, 2020

Loading thumbnail…

Responding to Resize

This example demonstrates a responsive SVG chart that continuously updates its dimensions to match the browser window. The visualization draws two diagonal green lines that form an X, with the lines' endpoints recalculated based on the current width and height. The code uses the `d3.select` method to append an SVG element to a fixed-position div, then reads the div’s `clientWidth` and `clientHeight` properties on every window resize event to update the SVG’s `width` and `height` attributes. The redraw function merges new line data with existing elements using D3’s `.merge` method.

Jun 15, 2020

Loading thumbnail…

Let's make a face with D3.js!

This example displays a smiling face with animated eyebrows built entirely through D3.js v5 DOM manipulation. The SVG face consists of circles for the eyes and head, a path for the mouth, and rectangles for the eyebrows, all positioned relative to a centered group element. Using D3's selection API (`d3.select`, `d3.append`) and the `transition` method, the eyebrows animate vertically over two seconds, moving up and then returning to their original position. The drawing relies on hardcoded numeric coordinates rather than external data.

Jun 15, 2020