This demo is similar to Variety Shoe. It uses a JSON dataset of planets, along with a set of planet icons via Adobe.
[Use this template]((https://github.com/new?template_name=json-planets&template_owner=ixd-system-design)
A key feature in this demo is the sorting of data. In particular it's possible to sort an array of objects based on some common property that all those objects have. The array sort function is quite useful here. In this demo, you'll find two varations: sorting by temperature, and also sorting by distance from the sun.
It's possible to use numeric values from a dataset as part of your content and markup, but it's also possible to use the same data to create CSS styling. For example, we can generate a background colour for each planet based on the given temperature using some math and the HSL colour model.
Given the name of a planet, (e.g. Saturn) we can dynamically generate a corresponding file path that points to an image. (e.g. assets/Saturn.svg). In this example, you'll find that we use this technique to add icons to each planet.
- modify the template to show the composition of the atmosphere for each planet.
- modify the JSON file to include the "dwarf planet" Pluto
- Use Webfonts to support an outer space narrative.