Add simple examples about semiotic HOT 19 CLOSED

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

from semiotic.

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.

from semiotic.

Include the data if possible in the code examples.

from semiotic.

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

from semiotic.

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, 😀

from semiotic.

What a silly mistake, thanks for catching that.

from semiotic.

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

from semiotic.

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

from semiotic.

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.

from semiotic.

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.

from semiotic.

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

Perhaps possible using babel-standalone.

from semiotic.

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

from semiotic.

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

from semiotic.

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.

from semiotic.

Nice! Are there video recordings of the Twitch sessions?

from semiotic.

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.

from semiotic.

@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]}

from semiotic.

@timelyportfolio Excellent!

from semiotic.

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

from semiotic.