JSPM

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

From notebook to print. Preview your data visualizations on physical products in 3D, then order.

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.

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.

Python / Jupyter

For use in Jupyter notebooks, see the chartout Python package:

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