InkStitch - data visualization

Objectives

• Create data visualizations for SVG
• Adapt the SVG for embroidery
• Digitize

• Quality: draft

• Difficulty: avanced

.... under construction

Links

Ignore these for the moment. We are just in the process of finding a suitable way to create SVG files. - Daniel K. Schneider (talk).

D3

D3 is a JavaScript library for programmers that can generate SVG

• Getting Started with Data Visualization — Build Your First Chart With D3.js
• VEGA is a visualization grammar built on top.
• Vega-Lite is a high-level grammar of interactive graphics. It provides a concise JSON syntax for rapidly generating visualizations to support analysis

RawGraphs

RAWGraphs is an online application that can generate visualizations from tabular data (e.g. spreadsheets).

• Home page RAWGraphs

The generated SVG requires some work that should be done partly with a programming editor.

• Remove grid lines (optional)
• Make some labels bigger, and remove some
• Translate all text to path
• Remove opacity (alpha values to 100%)

Google charts

• https://developers.google.com/chart/

High charts

• https://www.highcharts.com/ (commercial, but free for non-commercial use)

So far, the most convenient SVG output to deal with. In the bubble and line charts, data (bubbles or lines), data labels, and other information are in different groups and therefore not too difficult to manipulate.

• https://www.highcharts.com/demo/bubble

Rough procedure

• Remove grids
• simplify x/y and global labels and put all of these into a single group. Within this group ungroup all.
• Remove strokes from labels and add fill
• Convert all text objects to paths after that.

Data collections

• https://www.theodora.com/wfb/
• https://en.wikipedia.org/wiki/All-time_table_of_the_FIFA_World_Cup