Add simple examples

[emeeks]

Add examples in the interactive documentation that show the code for minimal, effective traditional charts:

• Bar Chart (Stacked Bar Chart separately)
• Pie Chart
• Line Chart

[fengshuo]

In the XYFrame tutorial here, the code snippet shows:

<XYFrame
   lines={data}
   xAccessor="timestamp"
   yAccessor="sales"
   xScaleType={scaleTime()}
   lineDataAccessor="data"
   lineStyle={d => ({ stroke: d.color, fill: d.color })}
/>

but it will throw The prop size is marked as required in XYFrame, but its value is undefined, would be easier for first time user if the code snippet has what's on the example page, like adding size prop, 😀

[emeeks]

What a silly mistake, thanks for catching that.

[sa-mm]

Also, that tutorial might be easier to follow if the constant and key in the constant weren't both called "data."

[bengarvey]

Include the data if possible in the code examples.

[emeeks]

First simple tutorial for a bar chart:
https://emeeks.github.io/semiotic/#/semiotic/creatingbarchart
More coming soon.

[emeeks]

Two more examples:
Line chart:
https://emeeks.github.io/semiotic/#/semiotic/creatinglinechart
Pie/Donut/Nightingale Chart
https://emeeks.github.io/semiotic/#/semiotic/creatingpiechart

[zettadam]

Would it be possible to make data passed to visualizations easier to understand? In many examples, it seems a little magical.

For example, I took a look at histogram summaryType in ORFrame demo. The docs are unclear how one would format data for this type of visualization. I understand that they are 'funnelized' because I tried to follow the source code, but I failed to find how it is processed.

I created a HistogramChart based on that example and copied generated data, but the output visualization was nowhere near what I expected.

[emeeks]

This is a good point @zettadam. I'll put together a summaryType walkthrough and be very specific about this. I think the ORFrame data abstraction is the most "magic" part of Semiotic based on feedback. I think it's a good model but I know I need to explain it better.

[curran]

Has anyone had success with Semiotic on bl.ocks.org?

Perhaps possible using babel-standalone.

[emeeks]

People have shared examples using StackBlitz and I know there was some talk about creating an unpkg version, which would make it blocks friendly.

[curran]

Just discovered this https://github.com/emeeks/semiotic-examples

[emeeks]

Yeah, it's my Twitch repo. I've been so irregular with Twitch that I haven't sort of mentally integrated the results with the rest of Semiotic, but it's getting to be a growing set of examples.

[curran]

Nice! Are there video recordings of the Twitch sessions?

[emeeks]

The videos are stored for two weeks at https://www.twitch.tv/elijahmeeks/videos/all and I've downloaded the old ones and I need to edit them and put them on Youtube.

[timelyportfolio]

@curran, also you might want to follow along #70 for the standalone discussion for usage with bl.ocks or blockbuilder. If you wanted to use my bundled version, https://rawgit.com/timelyportfolio/semiotic/standalone/dist/semiotic.js. Will be namespaced Semiotic, so when using

<Semiotic.ORFrame
   size={[700, 700]}

[timelyportfolio]

Here is a quick example http://blockbuilder.org/timelyportfolio/2657963ea577afe43b6eeab798b31c67 using my temporary standalone version of Semiotic. I have not worked out the CSS part yet.

[curran]

@timelyportfolio Excellent!

[curran]

Is there a "tutorials" section anywhere? If so, this would be a good link to add there https://medium.com/@matt_herman/shared-tooltips-in-semiotic-cd8fdf140d5a

[emeeks]

Added it to https://github.com/emeeks/semiotic/wiki/Tutorials