JSON is horribly inefficient data format for data exchange between a web server and a browser. For one, it converts everything to text. The value 3.141592653589793 takes only 8 bytes of memory, but JSON.stringify() expands it to 17. A second problem is its excessive use of quotes, which add two bytes to every string. Thirdly, it has no standard format for using a schema. When multiple objects are serialized in the same message, the key names for each property must be repeated, even though they are the same for each object.

JSON used to have an advantage because it could be directly parsed by a javascript engine, but even that advantage is gone because of security and interoperability concerns. About the only thing JSON going for it is that it is usually more compact than the alternative, XML, and it is well supported by many web programming languages.

Compression of JSON data is useful when large data structures must be transmitted from the web browser to the server. In that direction, it is not possible to use gzip compression, because it is not possible for the browser to know in advance whether the server supports gzip. The browser must be conservative, because the server may have changed abilities between requests.

Today, let's tackle the most pressing problem: the need to constantly repeat key names over and over. I will present a Javascript library for compressing JSON strings by automatically deriving a schema from multiple objects. The library can be used as a drop in replacement for the methods JSON.stringify() and JSON.parse(), except that it lacks support for a reviver function. In combination with Rison, the savings could be significant.

Download it here

Suppose you have to transmit several thousand points and rectangles. JSON might encode them like this (without the comments):

[ { // This is a point "x": 100, "y": 100 }, { // This is a rectangle "x": 100, "y": 100, "width": 200, "height": 150 }, {}, // an empty object ... // thousands more ]

A lot of the space is taken up by repeating the key names "x", "y", "width", and "height". They only need to be stored once for each object type:

{ "templates": [ ["x", "y"], ["x", "y", "width", "height"] ], "values": [ { "type": 1, "values": [ 100, 100 ] }, { "type": 2, "values": [100, 100, 200, 150 ] }, {} ] }

Each object in the original input is transformed. Instead of listing the keys, the "type" field refers to a list of keys in the schema array. (The type is 1-based, instead of zero based, and I will explain why later). But we are still repeating "x", and "y". The rectangle shared these properties with the point type, and there is no need to repeat them in the schema:

{ "templates": [ [0, "x", "y"], [1, "width", "height"] ], "values": [ { "type": 1, "values": [ 100, 100 ] }, { "type": 2, "values": [100, 100, 200, 150 ] }, {} ] }

We prefix each key list in the schema with a number. This number is the one-based index of a prior schema which is prepended to it to form the combined list. Zero means the empty object, which is why we use one-based indicies.

But we can still go a little further. Instead of having a separate "type" field in each object, we stick the type as the first element of the values array.

{ "templates": [ [0, "x", "y"], [1, "width", "height"] ], "values": [ { "values": [ 1, 100, 100 ] }, { "values": [2, 100, 100, 200, 150 ] }, {} ] }

Finally, since we are trying to save space, we rename our properties, and stick in a format code so we can detect that compresed json is used.

{ "f": "cjson", "t": [ [0, "x", "y"], [1, "width", "height"] ], "v": [ { "": [1, 100, 100 ] }, { "": [2, 100, 100, 200, 150 ] }, {} ] }

Automatic type extraction

The hard part is finding the objects which share sets of keys. It sounds a lot like the Set Cover problem, and if so, an optimal solution is NP-complete. Instead, we will approximate the solution using a tree structure. While we are building the value array, when we encounter an object, we add all of its keys to the tree in the order that we encounter them.

At the end of the process, we can traverse the nodes of the tree and create the templates. Nodes which represent the end of a key list (shown in gray) must have entry in the key list. Although not illustrated here, nodes with multiple children are also points where the the child object types inherit from a common parent, so they also get an entry.

The astute reader will realize that the final schema depends on the order that we inserted the keys into the tree. For example, if, when we encountered the rectangle, we inserted the keys "width" and "height" before "x", and "y", the algorithm would not find any common entries.

It is possible to gain more efficient packing by using a greedy algorithm. In the greedy algorithm, before we begin, an initial pass through all the objects would be made to build a list of unique object types. Then when it comes time to insert keys into the tree, they are first sorted so that the ones which occur in the most unique types are inserted first. However, this method adds a lot of extra processing and I feel the gains would not be worthwhile.

Real world savings

Here is an actual document from my web site, Zwibbler.com . Click on "Transform" to see how CJSON compresses it vs. JSON.



{"type":"Node","matrix":{"m11":1,"m12":0,"m21":0,"m22":1,"dx":0,"dy":0},"children":[{"type":"TextNode","matrix":{"m11":1,"m12":0,"m21":0,"m22":1,"dx":30,"dy":415},"children":[],"fillStyle":"#0089ff","text":"Created with Zwibbler.com","fontName":"Arial","fontSize":12},{"type":"TextNode","matrix":{"m11":1,"m12":0,"m21":0,"m22":1,"dx":467,"dy":23},"children":[],"fillStyle":"#000000","text":"is processed","fontName":"FG Virgil","fontSize":20},{"type":"TextNode","matrix":{"m11":1,"m12":0,"m21":0,"m22":1,"dx":419,"dy":1},"children":[],"fillStyle":"#000000","text":"After the empty object","fontName":"FG Virgil","fontSize":20},{"type":"TextNode","matrix":{"m11":1,"m12":0,"m21":0,"m22":1,"dx":248,"dy":24},"children":[],"fillStyle":"#000000","text":"is processed","fontName":"FG Virgil","fontSize":20},{"type":"TextNode","matrix":{"m11":1,"m12":0,"m21":0,"m22":1,"dx":243,"dy":1},"children":[],"fillStyle":"#000000","text":"After a Rect","fontName":"FG Virgil","fontSize":20},{"type":"TextNode","matrix":{"m11":1,"m12":0,"m21":0,"m22":1,"dx":30,"dy":28},"children":[],"fillStyle":"#000000","text":"is processed","fontName":"FG Virgil","fontSize":20},{"type":"TextNode","matrix":{"m11":1,"m12":0,"m21":0,"m22":1,"dx":25,"dy":5},"children":[],"fillStyle":"#000000","text":"After a Point","fontName":"FG Virgil","fontSize":20},{"type":"TextNode","matrix":{"m11":1,"m12":0,"m21":0,"m22":1,"dx":33,"dy":358},"children":[],"fillStyle":"#000000","text":"object.","fontName":"FG Virgil","fontSize":15},{"type":"TextNode","matrix":{"m11":1,"m12":0,"m21":0,"m22":1,"dx":32,"dy":341},"children":[],"fillStyle":"#000000","text":"the path to a completed","fontName":"FG Virgil","fontSize":15},{"type":"TextNode","matrix":{"m11":1,"m12":0,"m21":0,"m22":1,"dx":32,"dy":323},"children":[],"fillStyle":"#000000","text":"Gray nodes represent","fontName":"FG Virgil","fontSize":15},{"type":"TextNode","matrix":{"m11":1,"m12":0,"m21":0,"m22":1,"dx":504,"dy":375},"children":[],"fillStyle":"#000000","text":"height","fontName":"FG Virgil","fontSize":20},{"type":"TextNode","matrix":{"m11":1,"m12":0,"m21":0,"m22":1,"dx":487,"dy":295},"children":[],"fillStyle":"#000000","text":"width","fontName":"FG Virgil","fontSize":20},{"type":"ArrowNode","matrix":{"m11":1,"m12":0,"m21":0,"m22":1,"dx":0,"dy":0},"children":[],"arrowSize":10,"path":{"type":"PathNode","matrix":{"m11":1,"m12":0,"m21":0,"m22":1,"dx":296,"dy":-5},"children":[],"strokeStyle":"#000000","fillStyle":"#ffffff","lineWidth":2,"smoothness":0.3,"sloppiness":0.5,"startX":246,"startY":273,"closed":false,"segments":[{"type":2,"x":231,"y":296}],"shadow":false}},{"type":"ArrowNode","matrix":{"m11":1,"m12":0,"m21":0,"m22":1,"dx":0,"dy":0},"children":[],"arrowSize":10,"path":{"type":"PathNode","matrix":{"m11":-1.0052223548588493,"m12":0,"m21":0,"m22":0.9694181823431851,"dx":616.8428551273748,"dy":154.213227992421},"children":[],"strokeStyle":"#000000","fillStyle":"#ffffff","lineWidth":2,"smoothness":0.3,"sloppiness":0.5,"startX":103,"startY":192,"closed":false,"segments":[{"type":2,"x":89,"y":225}],"shadow":false}},{"type":"PathNode","matrix":{"m11":-0.6630394213564543,"m12":0,"m21":0,"m22":0.5236476835782672,"dx":565.5201948628471,"dy":371.5686591257294},"children":[],"strokeStyle":"#000000","fillStyle":"#e1e1e1","lineWidth":4,"smoothness":0.3,"sloppiness":0.5,"startX":50,"startY":0,"closed":true,"segments":[{"type":3,"x":100,"y":50,"x1":100,"y1":0,"r":[-0.3779207859188318,0.07996635790914297,-0.47163885831832886,-0.07100312784314156]},{"type":3,"x":50,"y":100,"x1":100,"y1":100,"r":[0.24857700895518064,0.030472169630229473,0.49844827968627214,0.13260168116539717]},{"type":3,"x":0,"y":50,"x1":0,"y1":100,"r":[0.1751830680295825,-0.18606301862746477,-0.4092112798243761,-0.4790717279538512]},{"type":3,"x":50,"y":0,"x1":0,"y1":0,"r":[0.37117584701627493,0.3612578883767128,0.0462839687243104,-0.1564063960686326]}],"shadow":false},{"type":"PathNode","matrix":{"m11":-1.475090930376591,"m12":0,"m21":0,"m22":1.2306765694828008,"dx":700.1381032855618,"dy":133.20628077515605},"children":[],"strokeStyle":"#000000","fillStyle":"#ffffff","lineWidth":2,"smoothness":0.3,"sloppiness":0.5,"startX":126.25,"startY":127.50445838342671,"closed":true,"segments":[{"type":3,"x":146.01190476190476,"y":147.5936260519611,"x1":146.01190476190476,"y1":127.50445838342671,"r":[-0.1750196823850274,-0.05804965365678072,-0.3536788672208786,0.053223272785544395]},{"type":3,"x":126.25,"y":167.6827937204955,"x1":146.01190476190476,"y1":167.6827937204955,"r":[-0.32906053867191076,-0.11536165233701468,0.35579121299088,0.38731588050723076]},{"type":3,"x":108,"y":147,"x1":106.48809523809524,"y1":167.6827937204955,"r":[0.08825046103447676,0.011088204570114613,0.43411328736692667,-0.1330692209303379]},{"type":3,"x":126.25,"y":127.50445838342671,"x1":106.48809523809524,"y1":127.50445838342671,"r":[0.42778260353952646,0.24726040940731764,0.3631806019693613,0.05325550492852926]}],"shadow":false},{"type":"TextNode","matrix":{"m11":1,"m12":0,"m21":0,"m22":1,"dx":543,"dy":225},"children":[],"fillStyle":"#000000","text":"Y","fontName":"FG Virgil","fontSize":20},{"type":"TextNode","matrix":{"m11":1,"m12":0,"m21":0,"m22":1,"dx":559,"dy":144},"children":[],"fillStyle":"#000000","text":"x","fontName":"FG Virgil","fontSize":20},{"type":"ArrowNode","matrix":{"m11":1,"m12":0,"m21":0,"m22":1,"dx":0,"dy":0},"children":[],"arrowSize":10,"path":{"type":"PathNode","matrix":{"m11":1,"m12":0,"m21":0,"m22":1,"dx":464,"dy":-3},"children":[],"strokeStyle":"#000000","fillStyle":"#ffffff","lineWidth":2,"smoothness":0.3,"sloppiness":0.5,"startX":103,"startY":192,"closed":false,"segments":[{"type":2,"x":89,"y":225}],"shadow":false}},{"type":"PathNode","matrix":{"m11":0.4841400176012311,"m12":0,"m21":0,"m22":0.48095238095238096,"dx":526.2705783334583,"dy":222.70238095238096},"children":[],"strokeStyle":"#000000","fillStyle":"#e1e1e1","lineWidth":4,"smoothness":0.3,"sloppiness":0.5,"startX":50,"startY":0,"closed":true,"segments":[{"type":3,"x":100,"y":50,"x1":100,"y1":0,"r":[-0.3779207859188318,0.07996635790914297,-0.47163885831832886,-0.07100312784314156]},{"type":3,"x":50,"y":100,"x1":100,"y1":100,"r":[0.24857700895518064,0.030472169630229473,0.49844827968627214,0.13260168116539717]},{"type":3,"x":0,"y":50,"x1":0,"y1":100,"r":[0.1751830680295825,-0.18606301862746477,-0.4092112798243761,-0.4790717279538512]},{"type":3,"x":50,"y":0,"x1":0,"y1":0,"r":[0.37117584701627493,0.3612578883767128,0.0462839687243104,-0.1564063960686326]}],"shadow":false},{"type":"ArrowNode","matrix":{"m11":1,"m12":0,"m21":0,"m22":1,"dx":0,"dy":0},"children":[],"arrowSize":10,"path":{"type":"PathNode","matrix":{"m11":1,"m12":0,"m21":0,"m22":1,"dx":464,"dy":-3},"children":[],"strokeStyle":"#000000","fillStyle":"#ffffff","lineWidth":2,"smoothness":0.3,"sloppiness":0.5,"startX":76,"startY":111,"closed":false,"segments":[{"type":2,"x":92,"y":143}],"shadow":false}},{"type":"PathNode","matrix":{"m11":1.3368391918073623,"m12":0,"m21":0,"m22":1.3058369941348298,"dx":397.4634652643233,"dy":-29.230987805439646},"children":[],"strokeStyle":"#000000","fillStyle":"#ffffff","lineWidth":2,"smoothness":0.3,"sloppiness":0.5,"startX":126.25,"startY":127.50445838342671,"closed":true,"segments":[{"type":3,"x":146.01190476190476,"y":147.5936260519611,"x1":146.01190476190476,"y1":127.50445838342671,"r":[-0.1750196823850274,-0.05804965365678072,-0.3536788672208786,0.053223272785544395]},{"type":3,"x":126.25,"y":167.6827937204955,"x1":146.01190476190476,"y1":167.6827937204955,"r":[-0.32906053867191076,-0.11536165233701468,0.35579121299088,0.38731588050723076]},{"type":3,"x":108,"y":147,"x1":106.48809523809524,"y1":167.6827937204955,"r":[0.08825046103447676,0.011088204570114613,0.43411328736692667,-0.1330692209303379]},{"type":3,"x":126.25,"y":127.50445838342671,"x1":106.48809523809524,"y1":127.50445838342671,"r":[0.42778260353952646,0.24726040940731764,0.3631806019693613,0.05325550492852926]}],"shadow":false},{"type":"PathNode","matrix":{"m11":0.4841400176012311,"m12":0,"m21":0,"m22":0.48095238095238096,"dx":505.2705783334583,"dy":61.70238095238095},"children":[],"strokeStyle":"#000000","fillStyle":"#e1e1e1","lineWidth":4,"smoothness":0.3,"sloppiness":0.5,"startX":50,"startY":0,"closed":true,"segments":[{"type":3,"x":100,"y":50,"x1":100,"y1":0,"r":[-0.3779207859188318,0.07996635790914297,-0.47163885831832886,-0.07100312784314156]},{"type":3,"x":50,"y":100,"x1":100,"y1":100,"r":[0.24857700895518064,0.030472169630229473,0.49844827968627214,0.13260168116539717]},{"type":3,"x":0,"y":50,"x1":0,"y1":100,"r":[0.1751830680295825,-0.18606301862746477,-0.4092112798243761,-0.4790717279538512]},{"type":3,"x":50,"y":0,"x1":0,"y1":0,"r":[0.37117584701627493,0.3612578883767128,0.0462839687243104,-0.1564063960686326]}],"shadow":false},{"type":"TextNode","matrix":{"m11":1,"m12":0,"m21":0,"m22":1,"dx":290,"dy":373},"children":[],"fillStyle":"#000000","text":"height","fontName":"FG Virgil","fontSize":20},{"type":"TextNode","matrix":{"m11":1,"m12":0,"m21":0,"m22":1,"dx":273,"dy":293},"children":[],"fillStyle":"#000000","text":"width","fontName":"FG Virgil","fontSize":20},{"type":"ArrowNode","matrix":{"m11":1,"m12":0,"m21":0,"m22":1,"dx":0,"dy":0},"children":[],"arrowSize":10,"path":{"type":"PathNode","matrix":{"m11":1,"m12":0,"m21":0,"m22":1,"dx":82,"dy":-7},"children":[],"strokeStyle":"#000000","fillStyle":"#ffffff","lineWidth":2,"smoothness":0.3,"sloppiness":0.5,"startX":246,"startY":273,"closed":false,"segments":[{"type":2,"x":231,"y":296}],"shadow":false}},{"type":"ArrowNode","matrix":{"m11":1,"m12":0,"m21":0,"m22":1,"dx":0,"dy":0},"children":[],"arrowSize":10,"path":{"type":"PathNode","matrix":{"m11":-1.0052223548588493,"m12":0,"m21":0,"m22":0.9694181823431851,"dx":402.8428551273748,"dy":152.213227992421},"children":[],"strokeStyle":"#000000","fillStyle":"#ffffff","lineWidth":2,"smoothness":0.3,"sloppiness":0.5,"startX":103,"startY":192,"closed":false,"segments":[{"type":2,"x":89,"y":225}],"shadow":false}},{"type":"PathNode","matrix":{"m11":-0.6630394213564543,"m12":0,"m21":0,"m22":0.5236476835782672,"dx":351.52019486284706,"dy":369.5686591257294},"children":[],"strokeStyle":"#000000","fillStyle":"#e1e1e1","lineWidth":4,"smoothness":0.3,"sloppiness":0.5,"startX":50,"startY":0,"closed":true,"segments":[{"type":3,"x":100,"y":50,"x1":100,"y1":0,"r":[-0.3779207859188318,0.07996635790914297,-0.47163885831832886,-0.07100312784314156]},{"type":3,"x":50,"y":100,"x1":100,"y1":100,"r":[0.24857700895518064,0.030472169630229473,0.49844827968627214,0.13260168116539717]},{"type":3,"x":0,"y":50,"x1":0,"y1":100,"r":[0.1751830680295825,-0.18606301862746477,-0.4092112798243761,-0.4790717279538512]},{"type":3,"x":50,"y":0,"x1":0,"y1":0,"r":[0.37117584701627493,0.3612578883767128,0.0462839687243104,-0.1564063960686326]}],"shadow":false},{"type":"PathNode","matrix":{"m11":-1.4512941300747246,"m12":0,"m21":0,"m22":1.2306765694828008,"dx":483.6192163567064,"dy":131.20628077515607},"children":[],"strokeStyle":"#000000","fillStyle":"#ffffff","lineWidth":2,"smoothness":0.3,"sloppiness":0.5,"startX":126.25,"startY":127.50445838342671,"closed":true,"segments":[{"type":3,"x":146.01190476190476,"y":147.5936260519611,"x1":146.01190476190476,"y1":127.50445838342671,"r":[-0.1750196823850274,-0.05804965365678072,-0.3536788672208786,0.053223272785544395]},{"type":3,"x":126.25,"y":167.6827937204955,"x1":146.01190476190476,"y1":167.6827937204955,"r":[-0.32906053867191076,-0.11536165233701468,0.35579121299088,0.38731588050723076]},{"type":3,"x":108,"y":147,"x1":106.48809523809524,"y1":167.6827937204955,"r":[0.08825046103447676,0.011088204570114613,0.43411328736692667,-0.1330692209303379]},{"type":3,"x":126.25,"y":127.50445838342671,"x1":106.48809523809524,"y1":127.50445838342671,"r":[0.42778260353952646,0.24726040940731764,0.3631806019693613,0.05325550492852926]}],"shadow":false},{"type":"TextNode","matrix":{"m11":1,"m12":0,"m21":0,"m22":1,"dx":329,"dy":223},"children":[],"fillStyle":"#000000","text":"Y","fontName":"FG Virgil","fontSize":20},{"type":"TextNode","matrix":{"m11":1,"m12":0,"m21":0,"m22":1,"dx":345,"dy":142},"children":[],"fillStyle":"#000000","text":"x","fontName":"FG Virgil","fontSize":20},{"type":"ArrowNode","matrix":{"m11":1,"m12":0,"m21":0,"m22":1,"dx":0,"dy":0},"children":[],"arrowSize":10,"path":{"type":"PathNode","matrix":{"m11":1,"m12":0,"m21":0,"m22":1,"dx":250,"dy":-5},"children":[],"strokeStyle":"#000000","fillStyle":"#ffffff","lineWidth":2,"smoothness":0.3,"sloppiness":0.5,"startX":103,"startY":192,"closed":false,"segments":[{"type":2,"x":89,"y":225}],"shadow":false}},{"type":"PathNode","matrix":{"m11":0.4841400176012311,"m12":0,"m21":0,"m22":0.48095238095238096,"dx":312.2705783334583,"dy":220.70238095238096},"children":[],"strokeStyle":"#000000","fillStyle":"#e1e1e1","lineWidth":4,"smoothness":0.3,"sloppiness":0.5,"startX":50,"startY":0,"closed":true,"segments":[{"type":3,"x":100,"y":50,"x1":100,"y1":0,"r":[-0.3779207859188318,0.07996635790914297,-0.47163885831832886,-0.07100312784314156]},{"type":3,"x":50,"y":100,"x1":100,"y1":100,"r":[0.24857700895518064,0.030472169630229473,0.49844827968627214,0.13260168116539717]},{"type":3,"x":0,"y":50,"x1":0,"y1":100,"r":[0.1751830680295825,-0.18606301862746477,-0.4092112798243761,-0.4790717279538512]},{"type":3,"x":50,"y":0,"x1":0,"y1":0,"r":[0.37117584701627493,0.3612578883767128,0.0462839687243104,-0.1564063960686326]}],"shadow":false},{"type":"ArrowNode","matrix":{"m11":1,"m12":0,"m21":0,"m22":1,"dx":0,"dy":0},"children":[],"arrowSize":10,"path":{"type":"PathNode","matrix":{"m11":1,"m12":0,"m21":0,"m22":1,"dx":250,"dy":-5},"children":[],"strokeStyle":"#000000","fillStyle":"#ffffff","lineWidth":2,"smoothness":0.3,"sloppiness":0.5,"startX":76,"startY":111,"closed":false,"segments":[{"type":2,"x":92,"y":143}],"shadow":false}},{"type":"PathNode","matrix":{"m11":1.3368391918073623,"m12":0,"m21":0,"m22":1.3058369941348298,"dx":183.46346526432328,"dy":-31.230987805439646},"children":[],"strokeStyle":"#000000","fillStyle":"#ffffff","lineWidth":2,"smoothness":0.3,"sloppiness":0.5,"startX":126.25,"startY":127.50445838342671,"closed":true,"segments":[{"type":3,"x":146.01190476190476,"y":147.5936260519611,"x1":146.01190476190476,"y1":127.50445838342671,"r":[-0.1750196823850274,-0.05804965365678072,-0.3536788672208786,0.053223272785544395]},{"type":3,"x":126.25,"y":167.6827937204955,"x1":146.01190476190476,"y1":167.6827937204955,"r":[-0.32906053867191076,-0.11536165233701468,0.35579121299088,0.38731588050723076]},{"type":3,"x":108,"y":147,"x1":106.48809523809524,"y1":167.6827937204955,"r":[0.08825046103447676,0.011088204570114613,0.43411328736692667,-0.1330692209303379]},{"type":3,"x":126.25,"y":127.50445838342671,"x1":106.48809523809524,"y1":127.50445838342671,"r":[0.42778260353952646,0.24726040940731764,0.3631806019693613,0.05325550492852926]}],"shadow":false},{"type":"PathNode","matrix":{"m11":0.4841400176012311,"m12":0,"m21":0,"m22":0.48095238095238096,"dx":291.2705783334583,"dy":59.70238095238095},"children":[],"strokeStyle":"#000000","fillStyle":"#ffffff","lineWidth":2,"smoothness":0.3,"sloppiness":0.5,"startX":50,"startY":0,"closed":true,"segments":[{"type":3,"x":100,"y":50,"x1":100,"y1":0,"r":[-0.3779207859188318,0.07996635790914297,-0.47163885831832886,-0.07100312784314156]},{"type":3,"x":50,"y":100,"x1":100,"y1":100,"r":[0.24857700895518064,0.030472169630229473,0.49844827968627214,0.13260168116539717]},{"type":3,"x":0,"y":50,"x1":0,"y1":100,"r":[0.1751830680295825,-0.18606301862746477,-0.4092112798243761,-0.4790717279538512]},{"type":3,"x":50,"y":0,"x1":0,"y1":0,"r":[0.37117584701627493,0.3612578883767128,0.0462839687243104,-0.1564063960686326]}],"shadow":false},{"type":"TextNode","matrix":{"m11":1,"m12":0,"m21":0,"m22":1,"dx":96,"dy":228},"children":[],"fillStyle":"#000000","text":"Y","fontName":"FG Virgil","fontSize":20},{"type":"TextNode","matrix":{"m11":1,"m12":0,"m21":0,"m22":1,"dx":112,"dy":147},"children":[],"fillStyle":"#000000","text":"x","fontName":"FG Virgil","fontSize":20},{"type":"ArrowNode","matrix":{"m11":1,"m12":0,"m21":0,"m22":1,"dx":0,"dy":0},"children":[],"arrowSize":10,"path":{"type":"PathNode","matrix":{"m11":1,"m12":0,"m21":0,"m22":1,"dx":17,"dy":0},"children":[],"strokeStyle":"#000000","fillStyle":"#ffffff","lineWidth":2,"smoothness":0.3,"sloppiness":0.5,"startX":103,"startY":192,"closed":false,"segments":[{"type":2,"x":89,"y":225}],"shadow":false}},{"type":"PathNode","matrix":{"m11":0.4841400176012311,"m12":0,"m21":0,"m22":0.48095238095238096,"dx":79.27057833345825,"dy":225.70238095238096},"children":[],"strokeStyle":"#000000","fillStyle":"#e1e1e1","lineWidth":4,"smoothness":0.3,"sloppiness":0.5,"startX":50,"startY":0,"closed":true,"segments":[{"type":3,"x":100,"y":50,"x1":100,"y1":0,"r":[-0.3779207859188318,0.07996635790914297,-0.47163885831832886,-0.07100312784314156]},{"type":3,"x":50,"y":100,"x1":100,"y1":100,"r":[0.24857700895518064,0.030472169630229473,0.49844827968627214,0.13260168116539717]},{"type":3,"x":0,"y":50,"x1":0,"y1":100,"r":[0.1751830680295825,-0.18606301862746477,-0.4092112798243761,-0.4790717279538512]},{"type":3,"x":50,"y":0,"x1":0,"y1":0,"r":[0.37117584701627493,0.3612578883767128,0.0462839687243104,-0.1564063960686326]}],"shadow":false},{"type":"ArrowNode","matrix":{"m11":1,"m12":0,"m21":0,"m22":1,"dx":0,"dy":0},"children":[],"arrowSize":10,"path":{"type":"PathNode","matrix":{"m11":1,"m12":0,"m21":0,"m22":1,"dx":17,"dy":0},"children":[],"strokeStyle":"#000000","fillStyle":"#ffffff","lineWidth":2,"smoothness":0.3,"sloppiness":0.5,"startX":76,"startY":111,"closed":false,"segments":[{"type":2,"x":92,"y":143}],"shadow":false}},{"type":"PathNode","matrix":{"m11":1.3368391918073623,"m12":0,"m21":0,"m22":1.3058369941348298,"dx":-49.536534735676724,"dy":-26.230987805439646},"children":[],"strokeStyle":"#000000","fillStyle":"#ffffff","lineWidth":2,"smoothness":0.3,"sloppiness":0.5,"startX":126.25,"startY":127.50445838342671,"closed":true,"segments":[{"type":3,"x":146.01190476190476,"y":147.5936260519611,"x1":146.01190476190476,"y1":127.50445838342671,"r":[-0.1750196823850274,-0.05804965365678072,-0.3536788672208786,0.053223272785544395]},{"type":3,"x":126.25,"y":167.6827937204955,"x1":146.01190476190476,"y1":167.6827937204955,"r":[-0.32906053867191076,-0.11536165233701468,0.35579121299088,0.38731588050723076]},{"type":3,"x":108,"y":147,"x1":106.48809523809524,"y1":167.6827937204955,"r":[0.08825046103447676,0.011088204570114613,0.43411328736692667,-0.1330692209303379]},{"type":3,"x":126.25,"y":127.50445838342671,"x1":106.48809523809524,"y1":127.50445838342671,"r":[0.42778260353952646,0.24726040940731764,0.3631806019693613,0.05325550492852926]}],"shadow":false},{"type":"PathNode","matrix":{"m11":0.4841400176012311,"m12":0,"m21":0,"m22":0.48095238095238096,"dx":58.270578333458246,"dy":64.70238095238095},"children":[],"strokeStyle":"#000000","fillStyle":"#ffffff","lineWidth":2,"smoothness":0.3,"sloppiness":0.5,"startX":50,"startY":0,"closed":true,"segments":[{"type":3,"x":100,"y":50,"x1":100,"y1":0,"r":[-0.3779207859188318,0.07996635790914297,-0.47163885831832886,-0.07100312784314156]},{"type":3,"x":50,"y":100,"x1":100,"y1":100,"r":[0.24857700895518064,0.030472169630229473,0.49844827968627214,0.13260168116539717]},{"type":3,"x":0,"y":50,"x1":0,"y1":100,"r":[0.1751830680295825,-0.18606301862746477,-0.4092112798243761,-0.4790717279538512]},{"type":3,"x":50,"y":0,"x1":0,"y1":0,"r":[0.37117584701627493,0.3612578883767128,0.0462839687243104,-0.1564063960686326]}],"shadow":false}]}

Download

Further reading