D3js Scatter Plot in RapidMiner

Continuing on the theme of using D3js to visualize RapidMiner results, this time I show you how to skip putting it into a RapidMiner Server dashboard. I simply borrowed the scatterplot D3js code from mblocks and slapped into a RapidMiner process (see XML below).  Copy the XML code and you can make a D3js Scatter Plot in RapidMiner!

For this example, I’m just using the Iris data set but I have tried it with shapefiles and other data. I also use RapidMiner macros to vary the x and y axis. You can control those macros within the context view of RapidMiner.

When you execute the process, it writes two files to a tmp directory, the Iris data set in a data.js file and the actual scatterplot HTML file. The data.js file is called into the HTML file.

Note: you will need some sort of web server to be running so you can render the generated HTML file correctly. Enjoy!

<?xml version="1.0" encoding="UTF-8"?><process version="7.2.003">
  <context>
    <input/>
    <output/>
    <macros>
      <macro>
        <key>x_axis</key>
        <value>a2</value>
      </macro>
      <macro>
        <key>y_axis</key>
        <value>a3</value>
      </macro>
      <macro>
        <key>color_column</key>
        <value>label</value>
      </macro>
    </macros>
  </context>
  <operator activated="true" class="process" compatibility="7.2.003" expanded="true" name="Process">
    <process expanded="true">
      <operator activated="true" class="text:create_document" compatibility="7.2.001" expanded="true" height="68" name="Create Document (3)" width="90" x="45" y="255">
        <parameter key="text" value="&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;meta charset=&quot;utf-8&quot;&gt;  &lt;!-- Example based on http://bl.ocks.org/mbostock/3887118 --&gt; &lt;!-- Tooltip example from http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html --&gt;  &lt;style&gt; body {   font: 11px sans-serif; }  .axis path, .axis line {   fill: none;   stroke: #000;   shape-rendering: crispEdges; }  .dot {   stroke: #000; }  .tooltip {   position: absolute;   width: 200px;   height: 28px;   pointer-events: none; } &lt;/style&gt; &lt;body&gt; &lt;script src=&quot;http://d3js.org/d3.v3.min.js&quot;&gt;&lt;/script&gt;  &lt;script&gt; var margin = {top: 20, right: 20, bottom: 30, left: 40},     width = 960 - margin.left - margin.right,     height = 500 - margin.top - margin.bottom;  /*   * value accessor - returns the value to encode for a given data object.  * scale - maps value to a visual display encoding, such as a pixel position.  * map function - maps from data value to display value  * axis - sets up axis  */   // setup x  var xValue = function(d) { return d.%{x_axis};}, // data -&gt; value     xScale = d3.scale.linear().range([0, width]), // value -&gt; display     xMap = function(d) { return xScale(xValue(d));}, // data -&gt; display     xAxis = d3.svg.axis().scale(xScale).orient(&quot;bottom&quot;);  // setup y var yValue = function(d) { return d.%{y_axis};}, // data -&gt; value     yScale = d3.scale.linear().range([height, 0]), // value -&gt; display     yMap = function(d) { return yScale(yValue(d));}, // data -&gt; display     yAxis = d3.svg.axis().scale(yScale).orient(&quot;left&quot;);  // setup fill color var cValue = function(d) { return d.%{color_column};},     color = d3.scale.category10();  // add the graph canvas to the body of the webpage var svg = d3.select(&quot;body&quot;).append(&quot;svg&quot;)     .attr(&quot;width&quot;, width + margin.left + margin.right)     .attr(&quot;height&quot;, height + margin.top + margin.bottom)   .append(&quot;g&quot;)     .attr(&quot;transform&quot;, &quot;translate(&quot; + margin.left + &quot;,&quot; + margin.top + &quot;)&quot;);  // add the tooltip area to the webpage var tooltip = d3.select(&quot;body&quot;).append(&quot;div&quot;)     .attr(&quot;class&quot;, &quot;tooltip&quot;)     .style(&quot;opacity&quot;, 0);  // load data d3.json(&quot;data.js&quot;, function(error, data) {    // change string (from CSV) into number format   data.forEach(function(d) {     d.%{x_axis} = +d.%{x_axis};     d.%{y_axis} = +d.%{y_axis}; //    console.log(d);   });    // don't want dots overlapping axis, so add in buffer to data domain   xScale.domain([d3.min(data, xValue)-1, d3.max(data, xValue)+1]);   yScale.domain([d3.min(data, yValue)-1, d3.max(data, yValue)+1]);    // x-axis   svg.append(&quot;g&quot;)       .attr(&quot;class&quot;, &quot;x axis&quot;)       .attr(&quot;transform&quot;, &quot;translate(0,&quot; + height + &quot;)&quot;)       .call(xAxis)     .append(&quot;text&quot;)       .attr(&quot;class&quot;, &quot;label&quot;)       .attr(&quot;x&quot;, width)       .attr(&quot;y&quot;, -6)       .style(&quot;text-anchor&quot;, &quot;end&quot;)       .text(&quot;%{x_axis}&quot;);    // y-axis   svg.append(&quot;g&quot;)       .attr(&quot;class&quot;, &quot;y axis&quot;)       .call(yAxis)     .append(&quot;text&quot;)       .attr(&quot;class&quot;, &quot;label&quot;)       .attr(&quot;transform&quot;, &quot;rotate(-90)&quot;)       .attr(&quot;y&quot;, 6)       .attr(&quot;dy&quot;, &quot;.71em&quot;)       .style(&quot;text-anchor&quot;, &quot;end&quot;)       .text(&quot;%{y_axis}&quot;);    // draw dots   svg.selectAll(&quot;.dot&quot;)       .data(data)     .enter().append(&quot;circle&quot;)       .attr(&quot;class&quot;, &quot;dot&quot;)       .attr(&quot;r&quot;, 3.5)       .attr(&quot;cx&quot;, xMap)       .attr(&quot;cy&quot;, yMap)       .style(&quot;fill&quot;, function(d) { return color(cValue(d));})        .on(&quot;mouseover&quot;, function(d) {           tooltip.transition()                .duration(200)                .style(&quot;opacity&quot;, .9);           tooltip.html(d[&quot;%{color_column}&quot;] + &quot;&lt;br/&gt; (&quot; + xValue(d)           + &quot;, &quot; + yValue(d) + &quot;)&quot;)                .style(&quot;left&quot;, (d3.event.pageX + 5) + &quot;px&quot;)                .style(&quot;top&quot;, (d3.event.pageY - 28) + &quot;px&quot;);       })       .on(&quot;mouseout&quot;, function(d) {           tooltip.transition()                .duration(500)                .style(&quot;opacity&quot;, 0);       });    // draw legend   var legend = svg.selectAll(&quot;.legend&quot;)       .data(color.domain())     .enter().append(&quot;g&quot;)       .attr(&quot;class&quot;, &quot;legend&quot;)       .attr(&quot;transform&quot;, function(d, i) { return &quot;translate(0,&quot; + i * 20 + &quot;)&quot;; });    // draw legend colored rectangles   legend.append(&quot;rect&quot;)       .attr(&quot;x&quot;, width - 18)       .attr(&quot;width&quot;, 18)       .attr(&quot;height&quot;, 18)       .style(&quot;fill&quot;, color);    // draw legend text   legend.append(&quot;text&quot;)       .attr(&quot;x&quot;, width - 24)       .attr(&quot;y&quot;, 9)       .attr(&quot;dy&quot;, &quot;.35em&quot;)       .style(&quot;text-anchor&quot;, &quot;end&quot;)       .text(function(d) { return d;}) });  &lt;/script&gt; &lt;/body&gt; &lt;/html&gt;"/>
        <description align="center" color="transparent" colored="false" width="126">D3js Scatterplot script</description>
      </operator>
      <operator activated="true" class="text:write_document" compatibility="7.2.001" expanded="true" height="82" name="Write Document" width="90" x="179" y="255"/>
      <operator activated="true" class="write_file" compatibility="7.2.003" expanded="true" height="68" name="Write File" width="90" x="313" y="255">
        <parameter key="filename" value="C:tmpD3IRISscatterplot.html"/>
        <description align="center" color="transparent" colored="false" width="126">Write HTML with D3js</description>
      </operator>
      <operator activated="true" class="retrieve" compatibility="7.2.003" expanded="true" height="68" name="Retrieve Iris" width="90" x="45" y="30">
        <parameter key="repository_entry" value="//Samples/data/Iris"/>
        <description align="center" color="transparent" colored="false" width="126">Load Iris Data</description>
      </operator>
      <operator activated="true" class="text:data_to_json" compatibility="7.2.001" expanded="true" height="82" name="Data To JSON" width="90" x="179" y="30">
        <parameter key="generate_array" value="true"/>
        <description align="center" color="transparent" colored="false" width="126">Convert to JSON</description>
      </operator>
      <operator activated="true" class="text:write_document" compatibility="7.2.001" expanded="true" height="82" name="Write Document (2)" width="90" x="313" y="30">
        <description align="center" color="transparent" colored="false" width="126">Write JSON data for D3plt</description>
      </operator>
      <operator activated="true" class="write_file" compatibility="7.2.003" expanded="true" height="68" name="Write File (2)" width="90" x="581" y="120">
        <parameter key="filename" value="C:tmpD3data.js"/>
        <description align="center" color="transparent" colored="false" width="126">JS data file</description>
      </operator>
      <operator activated="true" class="text:documents_to_data" compatibility="7.2.001" expanded="true" height="82" name="Documents to Data" width="90" x="581" y="30">
        <parameter key="text_attribute" value="text"/>
      </operator>
      <operator activated="true" class="extract_macro" compatibility="7.2.003" expanded="true" height="68" name="Extract Macro" width="90" x="715" y="30">
        <parameter key="macro" value="jsonData"/>
        <parameter key="macro_type" value="data_value"/>
        <parameter key="attribute_name" value="text"/>
        <parameter key="example_index" value="1"/>
        <list key="additional_macros"/>
      </operator>
      <connect from_op="Create Document (3)" from_port="output" to_op="Write Document" to_port="document"/>
      <connect from_op="Write Document" from_port="file" to_op="Write File" to_port="file"/>
      <connect from_op="Write File" from_port="file" to_port="result 1"/>
      <connect from_op="Retrieve Iris" from_port="output" to_op="Data To JSON" to_port="example set 1"/>
      <connect from_op="Data To JSON" from_port="documents" to_op="Write Document (2)" to_port="document"/>
      <connect from_op="Write Document (2)" from_port="document" to_op="Documents to Data" to_port="documents 1"/>
      <connect from_op="Write Document (2)" from_port="file" to_op="Write File (2)" to_port="file"/>
      <connect from_op="Documents to Data" from_port="example set" to_op="Extract Macro" to_port="example set"/>
      <portSpacing port="source_input 1" spacing="0"/>
      <portSpacing port="sink_result 1" spacing="0"/>
      <portSpacing port="sink_result 2" spacing="0"/>
    </process>
  </operator>
</process>

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: