JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 467
  • Score
    100M100P100Q90483F
  • License GPL-3.0

Package Exports

  • chartout
  • chartout/mount
  • chartout/react
  • chartout/render
  • chartout/store

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (chartout) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

chartout

Print Your Insights, Anytime, Anywhere

With every purchase, we donate 10% to NumFOCUS to support open-source scientific software.

chartout turns data visualisations into physical products, mugs, canvases, mousepads, and more. You pass a chart; the widget lets the user preview it on a 3D product model, adjust the placement, and check out.

Python / Jupyter

pip install chartout
import altair as alt
import chartout

chart = alt.Chart(data).mark_point().encode(x='x', y='y')

store = chartout.Store(chart)   # raw chart, user picks product
store = chartout.Store(item)    # pre-selected product
store = chartout.Store(cart)    # pre-built cart
store  # renders the interactive widget in Jupyter

See the Python README for products, items, cart, and positioning.

JavaScript

npm install chartout
import { createChartoutModel } from 'chartout';
import { openWithViz, openWithItem, openWithCart, svgToBytes } from 'chartout/store';

const model = createChartoutModel({});

// Raw chart, user picks product inside the store
await openWithViz(model, mugSvg, 'Histogram');

// Pre-selected product
await openWithItem(model, 'canvas_10x10', canvasSvg, 'Scatter density');

// Pre-built cart
const [canvasBytes, mugBytes, mousepadBytes] = await Promise.all([
  svgToBytes(canvasSvg), svgToBytes(mugSvg), svgToBytes(mousepadSvg),
]);
openWithCart(model, [
  { id: 'canvas_10x10',       name: 'Canvas (10x10)',  quantity: 1, placements: [{ id: 'default', content: canvasBytes   }] },
  { id: 'mug_black_11oz',     name: 'Mug (11 oz)',     quantity: 1, placements: [{ id: 'default', content: mugBytes      }] },
  { id: 'mousepad_white_8x7', name: 'Mousepad (8x7)',  quantity: 2, placements: [{ id: 'default', content: mousepadBytes }] },
]);

Rendering

React - use chartout/react:

import { ChartoutWidget } from 'chartout/react';

<ChartoutWidget model={model} style={{ width: '100%' }} />

Vanilla JS / Vue / Svelte - use chartout/mount:

import { mount } from 'chartout/mount';

const { destroy } = mount(document.getElementById('store'), { model });

See the JavaScript reference implementation for a full working example.