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
