pixel-mark

A pixel-mark is a graphical mark or encoding that uses images to plot data.

This repo is a D3 toolkit extension designed to facilitate the usage and encoding of raster images in D3 data visualization, and provide data-driven pixel-wise encoding. At its core, this toolkit is divided in 3 functions:

• SHAPE To select the images' shape (e.g. hexagon,circle, or star..).
• FIT To decide how such shape should be filled (e.g. center, stretch, focus, or crop..)
• TRANSFORM To provide pixel-wise transformations on images to encode data. (e.g. color filter, halftone, or hexbin..)

You can experiment, and explore different strategies of these functions on this sandbox: https://centralelyon.github.io/pixel-mark/liveEdit/

Installation

npm install pixel-mark d3

Or via CDN:

<script src="https://unpkg.com/pixel-mark"></script>

How to use it

First import it in your work and init it with data like you would in any D3 visualization (an Array of Objects). To be usable, D3 should be accessible in you work With a script import as it follows:

This toolkit plug its configuration directly to data as such.

const {
    initPixScale,
    fit,
    shape,
    transform
} = pixel_mark;

  const dataset = initPixScale(data,images)

Then functions (FIT,SHAPE, TRANSFORM) are usable os any D3 functionality. In SVG use .fit() to draw images, and .transform() to encode data.

In general, ech function follows the same structure e.g:

fit("strategy", callback)

Where the callback should return a normalized value between 0 and 1.

What follows is the minimal necessity for the use of this toolkit on a single datapoint.

  const svg = d3.select(DOM.svg(50,50))
  
  svg
  .append("image")
  .datum(data[0])
  .attr("width", 50)
  .attr("height", 50)
  .attr("x", 0) 
  .attr("y", 0)  
  .fit() 
  .transform("grid", (d) => Math.random())

See the documentation for strategies available of each: SHAPE FIT TRANSFORM

The transform() function is chainable! Meaning you can combine multiple transforms on a single image!

Credits

ANR Grant Project-ANR-21-CE33-0002