Add example plugin

config/plugins/visualizations/example/config/config.js

@@ -0,0 +1,16 @@
+define([], function() {
+    return {
+        title       : 'Example',
+        library     : 'Custom',
+        tag         : 'svg',
+        keywords    : 'others',
+        datatypes   : [ 'tabular', 'csv' ],
+        use_panels  : 'both',
+        description : 'This is a developer example which demonstrates how to implement and configure a basic d3-based plugin for charts.',
+        groups      : {
+            x : { type : 'data_column', is_numeric : true, label : 'Bubble x-position' },
+            y : { type : 'data_column', is_numeric : true, label : 'Bubble y-position' },
+            z : { type : 'data_column', is_numeric : true, label : 'Bubble size' }
+        }
+    }
+});

config/plugins/visualizations/example/config/example.xml

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE visualization SYSTEM "../../visualization.dtd">
+<visualization name="Example" regular="True">
+    <description>This is a developer example which demonstrates how to implement and configure a basic d3-based plugin for charts.</description>
+    <data_sources>
+        <data_source>
+            <model_class>HistoryDatasetAssociation</model_class>
+            <test type="isinstance" test_attr="datatype" result_type="datatype">tabular.Tabular</test>
+            <test type="isinstance" test_attr="datatype" result_type="datatype">tabular.CSV</test>
+            <to_param param_attr="id">dataset_id</to_param>
+        </data_source>
+    </data_sources>
+    <params>
+        <param type="dataset" var_name_in_template="hda" required="true">dataset_id</param>
+    </params>
+    <entry_point entry_point_type="chart" src="../heatmap_default/static/script.js" func="load"/>
+    <specs>
+        <tag>svg</tag>
+        <use_panels>both</use_panels>
+    </specs>
+    <groups>
+        <input>
+            <name>x</name>
+            <label>Bubble x-position</label>
+            <type>data_column</type>
+            <is_numeric>true</is_numeric>
+        </input>
+        <input>
+            <name>y</name>
+            <label>Bubbles y-position</label>
+            <type>data_column</type>
+            <is_numeric>true</is_numeric>
+        </input>
+        <input>
+            <name>z</name>
+            <label>Bubble size</label>
+            <type>data_column</type>
+            <is_numeric>true</is_numeric>
+        </input>
+    </groups>
+</visualization>

config/plugins/visualizations/example/package.json

@@ -0,0 +1,19 @@
+{
+    "name": "visualization",
+    "version": "0.1.0",
+    "keywords": [
+        "galaxy",
+        "visualization"
+    ],
+    "license": "AFL-3.0",
+    "dependencies": {
+        "babel-preset-env": "^1.6.1",
+        "backbone": "^1.3.3",
+        "bootstrap": "^3.3.7",
+        "jquery": "^3.1.1",
+        "parcel-bundler": "^1.4.1"
+    },
+    "scripts": {
+        "build": "parcel build src/script.js -d static"
+    }
+}

config/plugins/visualizations/example/src/script.js

@@ -0,0 +1,41 @@
+import * as d3 from "d3";
+
+var Datasets = window.bundleEntries.chartUtilities.Datasets;
+
+_.extend(window.bundleEntries || {}, {
+    load: function(options) {
+        var chart = options.chart;
+        Datasets.request({
+            dataset_id      : chart.get( 'dataset_id' ),
+            dataset_groups  : chart.groups,
+            success         : function( groups ) {
+                var colors = d3.scale.category20();
+                var error = null;
+                _.each( groups, function( group, group_index ) {
+                    try {
+                        var svg = d3.select( '#' + ( options.targets[ group_index ] || options.targets[ 0 ] ) );
+                        var height = parseInt( svg.style( 'height' ) );
+                        var width  = parseInt( svg.style( 'width' ) );
+                        var maxValue = d3.max( group.values, function( d ) { return Math.max( d.x, d.y ) } );
+                        svg.selectAll( 'bubbles' )
+                            .data( group.values )
+                            .enter().append( 'circle' )
+                            .attr( 'r', function( d ) { return ( Math.abs( d.z ) * 20 ) / maxValue } )
+                            .attr( 'cy', function( d, i ) { return height * d.y / maxValue } )
+                            .attr( 'cx', function( d ) { return width * d.x / maxValue } )
+                            .style( 'stroke', colors( group_index ) )
+                            .style( 'fill', 'white' );
+                    } catch ( err ) {
+                        error = err;
+                    }
+                });
+                if ( error ) {
+                    chart.state( 'failed', error );
+                } else {
+                    chart.state( 'ok', 'Workshop chart has been drawn.' );
+                }
+                options.process.resolve();
+            }
+        });
+    }
+});