BartekDu

@BartekDu·4 public vizzes

Gist 6722086fb446bde84909a90e7c9cde7d

This gallery example visualizes the discrepancy between two versions of an Individual Contributor License Agreement. It presents a side-by-side comparison of the original text and a proposed rewrite, highlighting the specific additions, deletions, and modifications made. The visualization uses the `d3.js` library to render the text-based data, differentiating between unchanged, added, and removed segments through distinct visual encoding. The rendering approach focuses on a line-by-line diff analysis, with the source data being directly embedded within the HTML file.

Jun 25, 2025

Loading thumbnail…

Smoothed D3.js Radar Chart

This example presents a smoothed radar chart comparing three smartphone brands—iPhone, Samsung, and Nokia Smartphone—across eight attributes like Battery Life and Price of Device. The visualization loads nested JSON data via `d3.json`, then converts it to an array of `values` arrays. Rendered using SVG with animated, rounded strokes, it employs `d3.scale.ordinal` for categorical colors and a linear radius scale for value mapping.

Apr 13, 2017

Loading thumbnail…

D3js and Polymer Web Components

This example demonstrates a pie chart built as a custom Polymer web component that reads financial data from a CSV file. Sliders let the user adjust each spending category’s amount, and the chart updates in real time. The component uses Polymer’s `domReady` and `urlChanged` callbacks to load the data via `d3.csv` from the specified `url` attribute. D3’s `d3.layout.pie`, `d3.svg.arc`, and `d3.scale.ordinal` handle the layout, arc generation, and color mapping, while an SVG group element is updated on each slider input.

Apr 11, 2017

Loading thumbnail…

Trying out cubism

This example demonstrates a cubism-style visualization for time-series data, using a stacked area chart-like technique where five random walks (via `context.metric`) are rendered as horizons with negative and positive extents. The code leverages the `cubism` API from Square and D3.js (v3) to create interactive, zoomable panes with axes, a rule, and update timestamps. Data is generated procedurally with `Math.random()`, while the `context` handles appending values and shifting a secondary metric.

Mar 16, 2017