Sladav

@Sladav·7 public vizzes

itsAlive.js - mario

This example demonstrates a Mario character that moves left, right, and jumps in response to arrow key input, with its position updated in real time on a grass-backgrounded page. Built with itsAlive.js and d3.v4, it uses living values and reducers to react to keydown/keyup events and a 60fps tick interval. The marioImage_ living value has side effects that update the img element’s src attribute and CSS left/bottom properties, while keypress, velocity, and position states flow through a functional pipeline.

Jan 24, 2017

Loading thumbnail…

Travel Map

A travel map plots destinations from a dataset of travelers on a world map, with each location marked by a colored circle and labeled with the destination name. The map is rendered as an SVG using D3 v3, with geographic features drawn via `d3.geo.path` and TopoJSON country boundaries. The map projection is applied to the geo data, while the traveler points are positioned using their latitude and longitude coordinates. A legend distinguishes the travelers by name, and the map includes a graticule overlay for reference.

Dec 2, 2016

Loading thumbnail…

uberplot

This interactive scatterplot visualizes diamond characteristics, with circles positioned by x and y coordinates and colored by categorical color grade. Using the d3.js library, the visualization supports animated transitions when hovering over or clicking data points, temporarily highlighting circles and then reverting them to their original colors. Built with the uberplot helper library, the code defines layers, scales, and mark sets to map data dimensions to visual properties, and uses d3.scaleLinear, d3.scaleOrdinal, and d3.scaleQuantize for encoding.

Dec 2, 2016

Loading thumbnail…

Horizontal Text Fade In

This example demonstrates a text fade-in effect where a message gradually appears by a white overlay shrinking horizontally. A green-bordered SVG displays the centered text "My Message," which transitions from fully hidden to fully visible over two seconds. The animation uses D3's `transition` API to animate the width of a rectangle filled with a `linearGradient` that fades from opaque to transparent, revealing the text beneath. The gradient's starting point also transitions, synchronizing the reveal from left to right.

Dec 2, 2016

Loading thumbnail…

Weekly Patient Volume

The interactive visualization shows weekly patient volume as a dot plot, with individual dots representing patients. Users can filter the displayed data by cancer type and treatment modality through two sets of toggle buttons, each with clear and reset options. Built with D3.js v3, it renders the plot as SVG and updates it with animated transitions. The page also includes a tabbed interface linking to the original data visualization, and uses Bootstrap for layout styling.

Dec 2, 2016

Loading thumbnail…

Responsive + Centered SVG

A simple D3.js example demonstrates how to create a responsive, centered SVG visualization. Three circles—red, blue, and green—are drawn at different positions and sizes within a fixed viewBox coordinate system, while the SVG element scales to fill a container set to 50% width. The code uses `d3.select` to append the SVG and circles, with CSS classes controlling layout and a green border. The `viewBox` attribute enables the plot to scale responsively, and absolute coordinates define circle placement.

Dec 2, 2016

Loading thumbnail…

Highlightable Venn Diagram

This interactive SVG visualization demonstrates set relationships with a highlightable Venn diagram. Two semi-transparent circles, rendered in steelblue and darkseagreen, overlap to show their intersection. The code uses the D3.js library to construct the SVG elements, including an exclusion path that outlines the region of the blue circle not covered by the green one. When the user hovers over this path, its opacity changes, highlighting the unique area of the blue circle.

Dec 2, 2016