Alexandru Brebeanu

@zapspew·5 public vizzes

Untitled

This visualization is an adjacency matrix of email communications within the Enron corpus. Each cell represents the relationship between a sender (fromId) and a recipient (toId), with color indicating the average sentiment of their exchanged messages—orange for negative, white for neutral, and blue for positive. The matrix is rendered as an SVG using d3.v4, with `d3.scaleBand` for both axes, `d3.nest` and `rollup` to aggregate sentiment, and a linear color scale mapping sentiment values. The data comes from a CSV file containing email metadata, dates, and sentiment scores.

May 7, 2021

Loading thumbnail…

D3 in Action Chapter 6 - Example 1

This example shows an adjacency matrix of character co-appearances in Les Misérables, where each cell is a colored rectangle representing the weight of a connection between two characters. The visualization uses a custom `d3.layout.adjacencyMatrix` layout to compute cell positions and weights, then renders them as SVG rectangles with fill opacity proportional to link weight. Color encodes character group membership via a `d3.scale.category20b()` scale, and axes are generated with `d3.svg.axis` using ordinal scales of character names. The source data is loaded from `miserables.json`.

May 6, 2021

Loading thumbnail…

Bar Chart

This example displays a blank SVG canvas with no visible chart, as the code only sets up the basic structure for a bar chart. The React-based visualization uses D3 v6, importing the `select` function to access the SVG element and reading its width and height attributes. The page loads data from `data.csv` and applies monospace styling, but the bar-rendering logic is not implemented. The code represents the minimal starting point for a D3 bar chart, with the data source and rendering approach yet to be developed.

May 4, 2021

Loading thumbnail…

Fork of List

This example shows a simple yellow smiley face rendered in a circular SVG, with black eyes and a curved mouth positioned symmetrically around the center. The visualization uses D3.js v6 to append SVG elements, including circles for the face and eyes, and an arc path for the mouth, all within a 960 by 500 pixel viewport. The code imports `select` and `arc` from D3, sets up a centered group via a transform, and applies fixed pixel offsets for the facial features. Rendering is purely SVG-based with no data input, relying on hardcoded constants.

Apr 28, 2021

Loading thumbnail…

List

This example renders a plain HTML page titled “Cars” that displays a bulleted list of car names, including “Masina 1” and “Masina 2.” The page uses a linked `styles.css` file to set the body’s font size and family, specifically a monospace typeface at 2em. The markup relies on standard HTML elements like `<h1>` and `<ul>` with `<li>` items, with no JavaScript or external libraries involved in the visualization.

Apr 27, 2021