Add curated list of user examples

[dgwyer]

Semiotic docs have some nice examples of what you can do when applying basic settings to the available frame types.

But I think there would be real value in adding a page to the docs site with a curated list of user-submitted examples to show off what this data visualization framework is really capable of.

There are many ways user submissions could work but how about having examples shown on the docs site as a thumbnail gallery which links to a live CodePen example, so the code itself can be explored and experimented with.

Obviously, not everyone who has created a data viz will have used CodePen so the ones that aren't would need to be recreated as a pen. The ones that are done as a pen could be forked into an official Semiotic CodePen account and cleaned up and the thumbnail redone if necessary. The thumbnail could then be displayed in the gallery on the Semiotics docs.

It should be possible to auto-create an image gallery pens from an RSS feed. e.g. https://codepen.io/emeeks/public/feed

Each CodePen collection also has it's own feed so we could split all submissions roughly into each data viz type and still auto-generate the gallery, which would cut down on the admin work.

The thumbnail can be generated as long as you know the pen URL (which is in the RSS feed): https://blog.codepen.io/documentation/api/screenshots/

To help generate interest, a prominent link on the docs site to prompt users to submit work could work well?

I'd be happy to help out with any of this. Unless there was a lot of submissions it shouldn't be too much work to create forks of pens and cleaning them up if necessary.

[dgwyer]

I've done a quick mockup of a basic CodePen gallery here. However, as you can see the default CodePen thumbnails aren't great.

I had to manually add in the URL to each pen as, currently, the CodePen RSS feed only supports the last 10 items added to a collection. So this wouldn't be much use if we wanted to show all the items in a collection.

An alternative is to just have a thumbnail gallery linking directly to a Semiotic data visualization which could be CodePen, blog post, tutorial, YouTube video, and a range of other sources. It depends really on how you want to organize the examples?

If linking to other peoples content though you're reliant on that content always being available. Which over time inevitably means broken links.

I guess this is a start though.