American Healthcare company Vizient needed to create on-brand infographics without the need for a graphic designer. And they needed to be animated.
Infographics needed to be created by content editors and this mean’t implementing within their Sitecore instance.
The solution was a React application integrated into their Sitecore instance. Sitecore would store the data, the app would create it. The solution would produce a single SVG file which when displayed on page would animate.
But rather than typical REST endpoints data was created and edited within the app as JSON, clicking save would run a server side method to store the data. No async or API to integrate - easy.
The solution was a React application integrated into Sitecore. Sitecore would store the data, the app would create it. The solution would produce a single SVG file which when displayed on page with some straight forward JQuery animation would animate when the user scrolled to it on page.
Any vector graphic containing only stroked paths could be used as the central graphic. A set of these would be preloaded into the Sitecore.
Two types of annotation, stats (including text, number and icon) and text blocks could be created with the first accompanied by a dot marking its place on the line art.
The decision to use Redux from the outset made data management more… well… manageable. But in hindsight could easily have been swapped out for React context API.
In the end everything could be controlled from within Sitecore, colour-ways, icons, main line art graphic, and annotation blocks.
What would I do differently?
Although it wasn’t really an option at the time I’d store the data somewhere other than Sitecore, with a set of endpoints to add/remove text directly from the React app. Text within Annotations would be directly editable. I’d swap redux for React Context API.