[TW5] Data Visualisation using SVG or Chartist.js

[Anders Hagen Jarmund]

Hi all! I am pretty new to TiddlyWiki, and was looking for data visualisation plugins, but as far as I could see, they are yet to be fully developed. The main target is to summarise data from several articles in scatter plots, being able to update the plot when new research arrive. Then I stumbled across the chartist.js library, which seems perfect (?). But I wasn't able to include the necessary scripts in my tiddlers; I added a tiddler with

<link rel="stylesheet" href="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
<script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>

and tagged it $:/tags/RawMarkup, and tried to add 

<div class="ct-chart ct-perfect-fourth"></div>
<script>
var data = {
  // A labels array that can contain any sort of values
  labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
  // Our series array that contains series objects or in this case series data arrays
  series: [
    [5, 2, 4, 2, 0]
  ]
};


// Create a new line chart object where as first parameter we pass in a selector
// that is resolving to our chart container element. The Second parameter
// is the actual data object.
new Chartist.Line('.ct-chart', data);
</script>

into another tiddler, but no plot appeared.. I guess the problem is related to the latter script, but are there any simple workarounds to make it work? Or has the chartist.js to be loaded as a library?

As a side note; I guess it is simpler to use an approach combining CSS and SVG, such as https://css-tricks.com/how-to-make-charts-with-svg/ It seems quite easy to implement into macros, and may provide ok looking scatter plots.

[Mat]

I vaguely recall someone mentioned scatter plots very recently. Possibly it was Jed / inmysocks

Otherwise I made graphs which is a pure TW+CSS approach. Now, it is probably NOT what you're after - I'd say it is not appropriate for data heavy use or more "sophisticated" applications. Rather it is made for showing quick graphs like in some presentation. Overall the whole plugin is also due for a full overhaul when 5.1.20 comes with its many new filter operators and even new CSS functions.

...but if you still want to try it out, you can get the scatter plot components under the Install tab and DnD the blue pill found at bottom-right. You'll probably also want x-axis, y-axis and Reference.

Your "items" to be plotted would be tiddlers holding an x and y field with their values and you would create the graph like so

<<graph "myfilter" scatter>>

<:-)

[Mat]

http://graphs.tiddlyspot.com/

<:-)

[Anders Hagen Jarmund]

That's wonderful, Mat! Thank you very much!

[ajarmund]

And now 5.1.20 has been released with mathematical operators! I tried to make a simple macro using SVG: http://folk.ntnu.no/anderhja/plotdemo.html

However, what is the best way to transclude a macro making a SVG in terms of scaling? I tried to make a tiddler calling the macro with type SVG for transclusion, but it didn't work, so maybe CSS is the way to go?

- Anders

[Jed Carty]

I made some data visualisation plugins.

https://ooktech.com/TiddlyWiki/BarChart/

https://ooktech.com/TiddlyWiki/ScatterPlot/

https://ooktech.com/jed/ExampleWikis/SnapSVG/

I should have some examples using chart.js and p5.js around somewhere but I have no idea where they are.

I have been working with d3.js in my day job so there will probably be some more d3 plugins at some point in the future.

[Mohammad]

Hi Anders,

 This is wonderful! The feasibility was proved!

It is good if one can customize the size the marker and have a better hover effect.

--Mohammad

[ajarmund]

Thank you! I updated the macro to have plot width and marker size as parameters as well. The hover effect should be customisable through the CSS stylesheet, but I guess the plugins by Jed will have more functionality

Best,

Anders

[ajarmund]

Very nice, Jed! I think easy-to-use data visualisation tools will increase the value of tiddlywiki for use in research and academia a lot!

Best,

Anders

[Mohammad]

This is great Anders!

Thanks for sharing!

Mohammad