How to utilize this tool for python users?

[bhishanpdl]

I went through the paper and loved the idea. The roadblock is that I am a little unfamiliar with typescript. Let's say I have built a classification model (binary or multi-class or multi-label) and have the test versus prediction labels. I could create the JSON files using python but is there any documentation (examples) on how to use this library to get these beautiful visualizations?

Maybe some youtube tutorials will help a lot of programmers like me who are more familiar with Python and love to see new tools in other languages.

[domoritz]

We don't currently support using this took from Python directly. It would be possible to wrap this tool in a Jupyter extension so that it's easier to use it from Python.

[bhishanpdl]

The Jupyter notebook/lab is ubiquitous in Python world. An addition of nbextension would be great.

[GeorgePearse]

That (jupyter extension) or an image on DockerHub, this sentiment is very common. The majority of the potential users come from the ML world and therefore know the python ecosystem, but not the javascript world. Having it available on dockerhub or with a python wrapper to run it would make it much more useable.

Just linking the below to show that a few others are interested.

[GeorgePearse]

So I almost got this working, but hit a slightly more fundamental blocker, in that the data is hard-coded into the tool. e.g.

const examples: Array<Example> = [
    {
        description: 'Fruit',
        loader: () => json('data/fruit.json'),
        spec: {
            ...defaults,
            classes: ['fruit'],
            normalization: 'total',
        },
    },

I was using the Dockerfile:

FROM node:16-alpine

ENV NODE_ENV=development

WORKDIR /app

COPY package.json yarn.lock ./
RUN yarn install

COPY . .

EXPOSE 3000
ENV PORT 3000

# this was yarn start, but then you can't ctrl c out of the terminal 
# to cancel the process.
CMD [ "npm", "start"]

docker-compose..yml:

version: "3.9"
services:
  neo:
    build: .
    image: "neo"
    ports:
      - "3000:3000"
    volumes: 
      - ./:/app

and tweaked the package.json (line 53) to be the below (changed so that sirv would bind on all ports)

{
    "name": "@apple/hierarchical-confusion-matrix",
    "author": "Apple Inc.",
    "version": "1.0.0",
    "license": "Apple Sample Code",
    "main": "public/confMat.js",
    "files": [
        "src"
    ],
    "devDependencies": {
        "@babel/core": "^7.17.5",
        "@babel/preset-typescript": "^7.16.7",
        "@rollup/plugin-commonjs": "^21.0.2",
        "@rollup/plugin-json": "^4.1.0",
        "@rollup/plugin-node-resolve": "^13.1.3",
        "@rollup/plugin-typescript": "^8.3.1",
        "@tsconfig/svelte": "^3.0.0",
        "@types/cwise": "^1.0.4",
        "@types/d3-array": "^3.0.2",
        "@types/d3-dsv": "^3.0.0",
        "@types/d3-scale": "^4.0.2",
        "@types/jest": "^27.4.1",
        "@types/lodash": "^4.14.179",
        "@types/ndarray": "^1.0.11",
        "@types/node": "^17.0.21",
        "@typescript-eslint/eslint-plugin": "^5.14.0",
        "@typescript-eslint/parser": "^5.14.0",
        "babel-jest": "^27.5.1",
        "eslint": "^8.10.0",
        "eslint-plugin-jest": "^26.1.1",
        "eslint-plugin-json": "^3.1.0",
        "eslint-plugin-svelte3": "^3.4.1",
        "gh-pages": "^3.2.3",
        "jest": "^27.5.1",
        "npm-run-all": "^4.1.5",
        "rollup": "^2.70.0",
        "rollup-plugin-css-only": "^3.1.0",
        "rollup-plugin-livereload": "^2.0.5",
        "rollup-plugin-svelte": "^7.1.0",
        "rollup-plugin-terser": "^7.0.2",
        "sirv-cli": "^2.0.2",
        "svelte": "^3.46.4",
        "svelte-check": "^2.4.5",
        "svelte-preprocess": "^4.10.4",
        "ts-jest": "^27.1.3",
        "tslib": "^2.3.1",
        "typescript": "^4.6.2"
    },
    "scripts": {
        "build": "rollup -c",
        "autobuild": "rollup -c -w",
        "dev": "run-p start:dev autobuild",
        "start": "sirv public --single --host --port 3000",
        "start:dev": "sirv public --single --dev",
        "svelte-check": "npx svelte-check",
        "lint": "eslint --config .eslintrc.json --ext .js,.ts,.json .",
        "format": "npm run lint -- --fix",
        "test": "npm run lint && npm run svelte-check && jest",
        "deploy": "npm run build && gh-pages -d public"
    },
    "dependencies": {
        "d3-array": "^2.11.0",
        "d3-dsv": "^2.0.0",
        "d3-scale": "^3.2.3",
        "lodash": "^4.17.21",
        "ndarray": "^1.0.19",
        "ndarray-ops": "^1.2.2",
        "vega-scale": "^7.1.1"
    }
}

@domoritz could you edit app.ts to read the dataset configs from a yaml file?