Data visualization helps us see the specifics of organization. Patterns emerge that can be both beautiful and educational. Press MORE for thoughts on data.
Data
Data can be thought of as a subset of information. Information is the representation of organization - often in a linear format we call language. Language has a set of delimiters (spaces, punctuation, pages, etc) that when decoded reveals the hierarchy of organization.
Data is usually the repetitive part of information. If information looks like a tree, then data looks like a bush - or even grass. As such, we tend to keep data in an array (a list). Sometimes these are nested as multidimensional arrays or tucked in an object for labelling with properties.
- pink, green, orange, blue, brown - comma delimited data (could be numbers, etc.)
- pink, green, orange, blue, brown | yellow, purple - comma and pipe delimited
- inside = pink, green, orange, blue, brown & outside = yellow, purple - key value pairs
- [pink, green, orange, blue, brown] - an array
- [[pink, green, orange, blue, brown], [yellow, purple]] - a multidimensional array (nested arrays)
- {inside:[pink, green, orange, blue, brown], outside:[yellow, purple]} - object literal with arrays
- any combination of the above ;-)
When we have data about the data we call it meta data - such as inside and outside references above. The brown text describing each line is also meta data. Below is a way that we might visualize this data. The top two bars are the array presented as a series and then randomly. At the sides are the multidimensional arrays and at the bottom is the object literal with the inside colors and the outside colors. The code to make this is shown in the next section.
Conveniences
ZIM has many ways to access data:- Read data from the server via ZIM async() or Ajax()
- Load data as a text, XML or json in the ZIM Frame()
- Load data later with loadAssets()
- Access local data with getCookie() or LocalStorage
- Receive data in file URL with getQueryString()
ZIM has many ways to work with data:
- Traditional variables, arrays, and object literals
- ZIM loop() for numbers, arrays, objects, containers
- ZIM Hierarchy() for hierarchical data
- ZIM Dictionary() for objects as keys
- ZIM Pick() for dynamic parameters and series
- ZIM rand() for ranges and reflected ranges
- ZIM shuffle() to shuffle arrays
- ZIM Proportion() and ProportionDamp() for mapping
- ZIM decimals(), constrain(), sign(), smoothStep()
- Components that visualize like Tile(), List(), Pen(), etc.
- zog() and zta() for logging and tabling to the console
Here is what working with the data example looks like in ZIM and vanilla JavaScript. ZIM is 2/3 the number of characters and 3/4 the number of lines. Not only that, it is easier to read and learn.
I've been really impressed with ZIM. It's fun to code, powerful and easy to learn! Chris Spolton
Industry
There are popular JavaScript libraries that are used for data processing such as P5js (a port of Processing) and D3 which has many graphs, charts and a language for data. ZIM uses the canvas and WebGL and can do the same things as these libraries. In addition to coding conveniences, ZIM has components which are helpful for controlling data visualization. Here are examples from Labosims - note the slider, dial, button interfaces.
This data mapping for where Artists live and where Artists work was created in an afternoon:
Physics Data Visualization showing neighbors' ages
