Image in README.md

README.md

@@ -6,15 +6,17 @@ TypeScript library for creating interactive grid heatmaps
 
 TODO: more intro, why we do this
 TODO: high level overview of functionality
-TODO: image
+
+![Heatmap Component](./docs/heatmap-component.png)
 
 ## Documentation
 
--   [Documentation pages](./docs/README.md)
+-   Documentation for the current repository: [./docs/README.md](./docs/README.md)
+-   Documentation for the latest release: <https://github.com/PDBeurope/heatmap-component/blob/v0.9.0/docs/README.md>
 
 ## Demos
 
--   [Live demos on github.io](https://pdbeurope.github.io/heatmap-component/)
+-   Live demos: <https://pdbeurope.github.io/heatmap-component/> (deployed from `main` branch)
 
 ## npm package
 
@@ -49,7 +51,7 @@ Then go to http://localhost:7000/
 To release a new version of this package:
 
 -   Change version in `package.json`
--   Change version in the documentation link in `README.npm.md`
+-   Change version in the documentation link in `README.md` and `README.npm.md`
 -   Update `CHANGELOG.md`
 -   Run `npm install` (to update `package-lock.json`)
 -   Ensure `npm lint && npm rebuild && npm test` works properly

src/heatmap-component/data/color.ts

@@ -158,9 +158,6 @@ export const Color = {
     fromImage(image: Image, x: number, y: number): Color {
         return this.fromAragabaArray(image.items, 4 * (y * image.nColumns + x));
     },
-    /** Create a color scale, e.g. `Color.createScale('Magma', [0, 1], [0, 1])` or `Color.createScale([0, 0.5, 1], ['white', 'orange', 'brown'])` */
-    createScale,
-
     mix(color0: Color, color1: Color, q: number): Color {
         const a0 = color0 >>> 24 & 255;
         const r0 = color0 >>> 16 & 255;
@@ -444,9 +441,10 @@ function createScaleFromScheme(schemeName: D3ColorSchemeName, domain: [number, n
     return createScaleFromColors(dom, cols);
 }
 
-function createScale(schemeName: D3ColorSchemeName, domain?: [number, number], range?: [number, number]): ((x: number) => Color);
-function createScale(domain: number[], colors: (Color | string)[]): ((x: number) => Color);
-function createScale(a: D3ColorSchemeName | number[], b?: any, c?: any): ((x: number) => Color) {
+/** Create a color scale, e.g. `createColorScale('Magma', [0, 1], [0, 1])` or `createColorScale([0, 0.5, 1], ['white', 'orange', 'brown'])` */
+export function createColorScale(schemeName: D3ColorSchemeName, domain?: [number, number], range?: [number, number]): ((x: number) => Color);
+export function createColorScale(domain: number[], colors: (Color | string)[]): ((x: number) => Color);
+export function createColorScale(a: D3ColorSchemeName | number[], b?: any, c?: any): ((x: number) => Color) {
     if (typeof a === 'string') return createScaleFromScheme(a, b, c);
     else return createScaleFromColors(a, b);
 }

src/heatmap-component/demo.ts

@@ -1,6 +1,4 @@
-import { Color } from './data/color';
-import { Heatmap } from './heatmap';
-import { formatDataItem } from './utils';
+import { Heatmap, createColorScale } from '../main';
 
 
 /** Demo showing small data with a lot of customizations */
@@ -30,9 +28,9 @@ export function demo1(divElementOrId: HTMLDivElement | string) {
         y: d => d.row,
         filter: (d, x, y, xIndex, yIndex) => d.score > 0,
     });
-    const colorScale = Color.createScale([0, 0.5, 1], ['#eeeeee', 'gold', 'red']);
+    const colorScale = createColorScale([0, 0.5, 1], ['#eeeeee', 'gold', 'red']);
     hm.setColor(d => colorScale(d.score));
-    hm.setTooltip((d, x, y, xIndex, yIndex) => `<div style="font-weight: bold; margin-bottom: 0.5em;">${formatDataItem(d)}</div>Column ${x}, Row ${y}<br>Indices [${xIndex},${yIndex}]`);
+    hm.setTooltip((d, x, y, xIndex, yIndex) => `<div style="font-weight: bold; margin-bottom: 0.5em;">Score: ${d.score}</div>Column ${x}, Row ${y}<br>Indices [${xIndex},${yIndex}]`);
     setTimeout(() => hm.setFilter(undefined), 2000);
     // setTimeout(() => hm.setData({
     //     xDomain: [1, 2, 0, 3, 4],
@@ -90,9 +88,9 @@ function setTextContent(elementSelector: string, content: unknown): void {
 export function demo2(divElementOrId: HTMLDivElement | string) {
     const hm = Heatmap.createDummy(2e5, 20); // Heatmap<number, number, number>
     hm.setVisualParams({ xGapRelative: 0, yGapRelative: 0 });
-    // hm.setColor(Color.createScale([0, 0.5, 1], ['#00d', '#ddd', '#d00']));
-    hm.setColor(Color.createScale('Magma', [0, 1]));
-    // hm.setColor(Color.createScale('Magma', [0, 1], [1, 0])); // reverse direction
+    // hm.setColor(createScale([0, 0.5, 1], ['#00d', '#ddd', '#d00']));
+    hm.setColor(createColorScale('Magma', [0, 1]));
+    // hm.setColor(createScale('Magma', [0, 1], [1, 0])); // reverse direction
     hm.render(divElementOrId);
     // hm.setFilter(d => d > 0.1);
     // setTimeout(()=> hm.setFilter(undefined), 2000);
@@ -125,7 +123,7 @@ export function demo3(divElementOrId: HTMLDivElement | string) {
         x: d => d.col,
         y: d => d.row,
     });
-    const colorScale = Color.createScale([-1, 0, 1], ['#E13D3D', 'white', '#2C8C11']); // like d3.scaleLinear([-1, 0, 1], ['#E13D3D', 'white', '#2C8C11']);
+    const colorScale = createColorScale([-1, 0, 1], ['#E13D3D', 'white', '#2C8C11']); // like d3.scaleLinear([-1, 0, 1], ['#E13D3D', 'white', '#2C8C11']);
     hm.setColor(d => colorScale(d.score));
     hm.setVisualParams({ xGapRelative: 0.1, yGapRelative: 0.1, xGapPixels: null, yGapPixels: null });
     hm.render(divElementOrId);

src/heatmap-component/extensions/draw.ts

@@ -1,6 +1,6 @@
 import { clamp, isNil } from 'lodash';
 import { Array2D } from '../data/array2d';
-import { Color } from '../data/color';
+import { Color, createColorScale } from '../data/color';
 import { Downsampler } from '../data/downsampling';
 import { Image } from '../data/image';
 import { HeatmapExtension, HeatmapBehaviorBase } from '../extension';
@@ -11,7 +11,7 @@ import { Provider } from '../data/data-description';
 
 const DefaultColor = Color.fromString('#888888');
 export const DefaultColorProvider = () => DefaultColor;
-export const DefaultNumericColorProviderFactory = (min: number, max: number) => Color.createScale('YlOrRd', [min, max]);
+export const DefaultNumericColorProviderFactory = (min: number, max: number) => createColorScale('YlOrRd', [min, max]);
 
 
 export interface VisualParams {

src/main.ts

@@ -1,4 +1,5 @@
 /** Main file for importing `HeatmapComponent` as a dependency */
 
+export { createColorScale } from './heatmap-component/data/color';
 export { demo1, demo2, demo3 } from './heatmap-component/demo';
 export { Heatmap } from './heatmap-component/heatmap';