WebDataRocks End User License Agreement (“Agreement”) has been revised and is effective as of April 18, 2024.
The following modifications have been made:
The modified version of WebDataRocks End User License Agreement is available here.
Downloading, installing, and/or continuing to use WebDataRocks after April 18, 2024, constitutes your acceptance of the terms and conditions of the modified version of WebDataRocks End User License Agreement. If you do not agree to any of these terms and conditions, do not download, install, use, or access (or continue to access) WebDataRocks.
Using the mapping object for JSON, you can create multilevel hierarchies from fields of any type.
In this guide, we’ll create a Food
hierarchy with Category
, Item
, and Serving Size
levels based on the data below:
[ { "Category": "Breakfast", "Item": "Frittata", "Serving Size": "4.8 oz (136 g)", "Calories": 300 }, { "Category": "Breakfast", "Item": "Boiled eggs", "Serving Size": "4.8 oz (135 g)", "Calories": 250 } ]
Step 1. In the mapping object, set the type of Category
, Item
, and Serving Size
fields as "level"
:
[ { "Category": { type: "level" }, "Item": { type: "level" }, "Serving Size": { type: "level" }, "Calories": { type: "number" } }, { "Category": "Breakfast", "Item": "Frittata", "Serving Size": "4.8 oz (136 g)", "Calories": 300 }, { "Category": "Breakfast", "Item": "Boiled eggs", "Serving Size": "4.8 oz (135 g)", "Calories": 250 } ]
Step 2. Use the hierarchy, parent, and level properties of the mapping object to create the Food
hierarchy:
[ { "Category": { type: "level", hierarchy: "Food" }, "Item": { type: "level", hierarchy: "Food", level: "Dish", parent: "Category" }, "Serving Size": { type: "level", hierarchy: "Food", level: "Size", parent: "Dish" }, "Calories": { type: "number" } }, { "Category": "Breakfast", "Item": "Frittata", "Serving Size": "4.8 oz (136 g)", "Calories": 300 }, { "Category": "Breakfast", "Item": "Boiled eggs", "Serving Size": "4.8 oz (135 g)", "Calories": 250 } ]
See how this dataset will be visualized in WebDataRocks:
Check out a live demo on CodePen.