DarioCel

@DarioCel·4 public vizzes

Gist 121ed23ef467b1372d47e2e67d2aea1c

This example visualizes the Titanic passenger manifest, mapping each first-class passenger’s fare and age group. It uses `d3.forceSimulation` to position circles by passenger attributes, with color encoding survival status and gender. The code performs data loading via `d3.csv` and filters the dataset before rendering with SVG circles. It highlights fare disparities and demographic clusters among survivors and non-survivors, drawing directly from the provided `titanic20180616_coma.csv` file.

Jun 16, 2018

Loading thumbnail…

Gist 4598f105ce3ebf702d6a5d6034562850

This visualization presents the survival rates of first-class Titanic passengers using a force-directed graph. Each node represents an individual, with connections based on shared ticket numbers, and the layout is computed using D3.js’s `forceSimulation` API. The graph is rendered as a static image, likely generated by encoding node positions into a canvas via `getImageData`. The underlying data is sourced from the `titanic20160618.csv` file, which includes passenger class, survival status, and ticket details.

Jun 16, 2018

Loading thumbnail…

Bar Chart

This example shows a simple bar chart with a tooltip displaying each bar’s label and value on hover. The chart is rendered as SVG using D3 v3, with an ordinal x-axis and linear y-axis. Bars are filled from a custom color palette, and a mouseover event triggers a tooltip whose position follows the cursor. The data is hardcoded in the page as an array of label–value pairs.

Jun 9, 2018

Loading thumbnail…

css animation

This example demonstrates a CSS-based animation of a string of holiday lights, created entirely with D3.js and vanilla JavaScript. It shows a row of glowing, diamond-shaped bulbs alternating between blue and orange, with each color pulsing on and off in a staggered rhythm. Clicking any bulb removes it by fading it to black, using D3’s `transition` and `style` methods to animate opacity and disable the CSS keyframe animation. The page generates 75 bulbs via a `for` loop, while D3 selects all elements to bind click handlers. The rendering relies on CSS `@keyframes` for the pulse effect and D3 v4 for interactivity.

Jan 7, 2017