Scala と Java スクリプトを使用したカスタム ビジュアライゼーションの作成

カスタム オペレーター SDK、共通 JavaScript ライブラリ D3、Plotly、Dojo を使用してビジュアライゼーションを作成できます。

手順
1. JavascriptVisualization の名前をオペレーターの任意の名前に変更します。

   たとえば、「MyCoolOperator」というオペレーターを作成するには、ファイル名 MyCoolOperator.js および MyCoolOperator.scala を使用します。

2. 次の Scala サンプル コードを確認してください。

   class JavascriptVisualizationRuntime extends SparkRuntime[HdfsTabularDataset, IONone] {
   
       [...]
           override def createVisualResults(context: SparkExecutionContext,
                                           input: HdfsTabularDataset,
                                           output: IONone,
                                           params: OperatorParameters,
                                           listener: OperatorListener): VisualModel = {
           val dataset = context.visualModelHelper.createTabularDatasetVisualization(input)
           val tabularModel = dataset.asInstanceOf[TabularVisualModel]
           
           val columnName = params.getTabularDatasetSelectedColumn(JavascriptVisualizationUtil.COLUMN_TO_ANALYZE)._2
           val i = tabularModel.columnDefs.indexWhere(columnDef => columnDef.columnName == columnName)
           
           val compositeVisualModel = new CompositeVisualModel()
           if (i != -1) {
               val valuesSet = tabularModel.content.map(row => row(i))
               compositeVisualModel.addVisualModel("Data Cloud",
               new JavascriptVisualModel("execute", Option.apply(valuesSet)))
           } else {
               compositeVisualModel.addVisualModel("Data Cloud",
               new JavascriptVisualModel("execute", Option.apply("No results")))
           }
           compositeVisualModel.addVisualModel("Hello World",
               new JavascriptVisualModel("simpleFunction", Option.apply("")))
           compositeVisualModel
           }

   • JavaScriptVisualizationRuntime は SparkRuntime を拡張します。
   • この例では、createVisualResults をオーバーライドしてカスタム コードを挿入します。カスタマイズのために、パラメーターを定義どおりに維持します。
   • CompositeVisualModel() は例の中心部であり、ビジュアライゼーションの作成と定義を行います。 CompositeVisualModel は、出力に複数の「タブ」を含めることができることを意味します。この例では、2 つのタブを含むビジュアライゼーションを作成します。1 つは「word cloud」、もう 1 つは「Hello World」という単純なテキストです。
   • この例では、CompositeVisualModel 内で、次の構造を使用して JavascriptVisualModel を作成します。

     case class JavascriptVisualModel(
               functionName:String,
               data: Option[Any]) extends VisualModel

   • JavaScript コードは関数 simpleFunction を実行します。
   • この例では、CompositeVisualModel を返します。

   サンプル JavaScript コードを編集する前に、オペレーターの署名クラスをチェックして、メタデータに useJavascript=True が含まれていることを確認してください。この設定がないと JavaScript コードは実行されません。

3. JavaScript ファイルで、Scala コードから呼び出される関数を定義します。

define([
    "dojo/dom-construct",
    "dojo/dom-geometry"
], function(domConstruct, domGeo) {
    return {
        /**
        * @param outpane The enclosing html <div> in which the Javascript code should place elements into
        * @param visualData Data specified by the custom operator in createVisualResults() when creating the JavascriptVisualModel
        */
        execute: function(outpane, visualData) {
            var geo = domGeo.position(outpane);
            var canvas = domConstruct.create('canvas', {width: geo.w, height: geo.h}, outpane);
            var context = canvas.getContext('2d');
                // Trivial visualization example - all elements in visualData (an array) are randomly positioned in the canvas with random colors
            for (var i = 0; i < visualData.length; i++) {
                context.fillStyle = 'rgb('+Math.floor(Math.random() * 255)+','+Math.floor(Math.random() *
                    255)+','+ Math.floor(Math.random() * 255)+')';
                context.fillText(visualData[i], 100 + (Math.random() * (geo.w - 200)), 100 + (Math.random() * (geo.h - 200)));
            }
        },
        simpleFunction: function(outpane, visualData) {
            var span = domConstruct.create('span', {}, outpane);
            span.innerHTML = "Hello World"
        }
    };
});