Valentine

Adapted from a D3.js scatter plot example.

At every cycle, a thousand points are moved to new randomly generated positions. They are then scored by a Neural Network model created in JMP and exported to JavaScript.

Scoring results are used to determine if the points fell inside a heart curve and colored accordingly.

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <div id="heart"></div> 
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <script>
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
var model = require('./jmp_heart.js');

function getRandomArbitrary(min, max) {
    return Math.random() * (max - min) + min;
}

// Ranges come from original data used to create jmp_score model
var xRange = [-1.20, 1.20];
var yRange = [-17, 17];
function newX() {
    return getRandomArbitrary(xRange[0], xRange[1]);
}

function newY() {
    return getRandomArbitrary(yRange[0], yRange[1]);
}

function newDataSet(numDataPoints) {
    var dataset = [];  // Initialize empty array
    for (var i = 0; i < numDataPoints; i++) {
        var newNumber1 = newX();
        var newNumber2 = newY();
        dataset.push([newNumber1, newNumber2]);  // Add new number to array
    }
    return dataset;
}

// Setup data
var numDataPoints = 1000;  // Number of dummy data points
var dataset = newDataSet(numDataPoints);

// Setup settings for graphic
var canvas_width = 500;
var canvas_height = 500;
var padding = 30;  // for chart edges

// Create scale functions
var xScale = d3.scale.linear()  // xScale is width of graphic
                .domain(xRange)
                .range([padding, canvas_width - padding * 2]); // output range

var yScale = d3.scale.linear()  // yScale is height of graphic
                .domain(yRange)
                .range([canvas_height - padding, padding]);  // remember y starts on top going down so we flip

// Create SVG element
var svg = d3.select("#heart")  // This is where we put our vis
    .append("svg")
    .attr("width", canvas_width)
    .attr("height", canvas_height)

// Create Circles
svg.selectAll("circle")
    .data(dataset)
    .enter()
    .append("circle")  // Add circle svg
    .attr("cx", function(d) {
        return xScale(d[0]);  // Circle's X
    })
    .attr("cy", function(d) {  // Circle's Y
        return yScale(d[1]);
    })
    .attr("r", 2);  // radius

var updateHeart = function() {
    dataset = newDataSet(dataset.length);
    updateCircles();
};

window.setInterval(updateHeart, 2500);
// first pass
updateCircles();
},{"./jmp_heart.js":2}],2:[function(require,module,exports){
"use strict";

var jmp = require('./jmp_score.js');

/* ==================================================================
 Copyright(C) 2018 SAS Institute Inc.All rights reserved.
 
 Notice:
 The following permissions are granted provided that the
 above copyright and this notice appear in the score code and
 any related documentation.Permission to copy, modify
 and distribute the score code generated using
 JMP(R) software is limited to customers of SAS Institute Inc. ("SAS")
 and successive third parties, all without any warranty, express or
 implied, or any other obligation by SAS.SAS and all other SAS
 Institute.Inc.product and service names are registered
 trademarks or trademarks of SAS Institute Inc.in the USA
 and other countries.Except as contained in this notice,
 the name of the SAS Institute Inc. and JMP shall not be used in
 the advertising or promotion of products or services without
 prior written authorization from SAS Institute Inc.
 ================================================================== */

/* JavaScript code generated by JMP v14.0.0 */
var getModelMetadata = function() {
	return {"creator": "Neural", "modelName": "", "predicted": "Location", "table": "Heart", "version": "14.0.0", "timestamp": "2017-02-14T18:49:48Z"};
};

var getInputMetadata = function() {
    return {
   "$schema": "https://json-schema.org/draft-04/schema#",
   "id": "/",
   "type": "object",
   "properties": {
     "X": {
       "id": "X",
       "type": "number"
     },
     "Y": {
       "id": "Y",
       "type": "number"
     }   },
   "additionalProperties": false,
  };
};

var getOutputMetadata = function() {
    return {
   "$schema": "https://json-schema.org/draft-04/schema#",
   "id": "/",
   "type": "object",
   "properties": {
     "Probability( Location=Inside )": {
       "id": "Probability( Location=Inside )",
       "type": "number"
     },
     "Probability( Location=Outside )": {
       "id": "Probability( Location=Outside )",
       "type": "number"
     },
     "Most Likely Location": {
       "id": "Most Likely Location",
       "type": "string"
     }   },
   "additionalProperties": false,
  };
};

var score = function(indata, outdata) {
    var H2_1;
    var H2_2;
    var H2_3;
    var H2_4;
    var H2_5;
    var H2_6;
    var H2_7;
    var H2_8;
    var H2_9;
    var H2_10;
    var H1_1;
    var _temp0 = -0.0025889527863438;
    var H1_2;
    var _temp1 = -0.561104818648586;
    var H1_3;
    var _temp2 = -1.07587651435724;
    var H1_4;
    var _temp3 = 0.261864321167137;
    var H1_5;
    var _temp4 = 0.666162571175294;
    var _temp5 = -14.5165870963556;
    var _temp6 = -14.5165870963556;
    var _temp7 = -14.5165870963556;
    var _temp8;
    var _temp9 = [];
    var _temp10 = "";

H2_1 = Math.tanh((0.906862452221691 + 0.28589541239972 * indata['X'] + 0.123476732643996 * indata['Y']));

H2_2 = Math.tanh((0.389272400663128 + -4.49035082943397 * indata['X'] + 0.029994437264834 * indata['Y']));

H2_3 = Math.tanh((0.135670707094981 + 0.517955296902832 * indata['X'] + -0.00491296263388025 * indata['Y']));

H2_4 = Math.tanh((1.24990105123269 + -1.82515191811896 * indata['X'] + 0.0666137664602011 * indata['Y']));

H2_5 = Math.tanh((0.359229490439728 + 0.0258170532501211 * indata['X'] + 0.0208812618846582 * indata['Y']));

H2_6 = Math.tanh((0.374851968137568 + 4.26737072750981 * indata['X'] + 0.028198711283364 * indata['Y']));

H2_7 = Math.tanh((1.38109738462623 + 0.225812298040086 * indata['X'] + -0.141652342202742 * indata['Y']));

H2_8 = Math.tanh((-0.122731904982036 + -0.452476198958453 * indata['X'] + 0.00391439763422938 * indata['Y']));

H2_9 = Math.tanh((-1.23636971826989 + -1.77282769376887 * indata['X'] + -0.100681293644277 * indata['Y']));

H2_10 = Math.tanh((0.222879336557181 + 0.139106195899012 * indata['X'] + 0.0100462854321572 * indata['Y']));

_temp0 += 1.01721439823662 * H2_1;
    _temp0 += -0.0990308956267049 * H2_10;
    _temp0 += 1.12716455100972 * H2_2;
    _temp0 += -0.236721434972115 * H2_3;
    _temp0 += 1.02236279743244 * H2_4;
    _temp0 += -0.0219020460106092 * H2_5;
    _temp0 += -0.630461324126668 * H2_6;
    _temp0 += 1.5970866200482 * H2_7;
    _temp0 += 0.267748304254134 * H2_8;
    _temp0 += -0.197993252816764 * H2_9;
    H1_1 = Math.tanh(_temp0);

_temp1 += 0.0682915694354052 * H2_1;
    _temp1 += -0.109291835705242 * H2_10;
    _temp1 += -0.635229268164431 * H2_2;
    _temp1 += -0.0396494694094181 * H2_3;
    _temp1 += 0.388047613790836 * H2_4;
    _temp1 += -0.212086684680784 * H2_5;
    _temp1 += -0.675181583160569 * H2_6;
    _temp1 += 0.432940053549962 * H2_7;
    _temp1 += 0.0306297055684985 * H2_8;
    _temp1 += -0.337968618584483 * H2_9;
    H1_2 = Math.tanh(_temp1);

_temp2 += 0.107124211798651 * H2_1;
    _temp2 += -0.225756898877663 * H2_10;
    _temp2 += -1.20684928223233 * H2_2;
    _temp2 += -0.0598737048818925 * H2_3;
    _temp2 += 0.988838152231585 * H2_4;
    _temp2 += -0.339143237903077 * H2_5;
    _temp2 += -1.19274318844864 * H2_6;
    _temp2 += 0.797801775665556 * H2_7;
    _temp2 += -0.000402920388415558 * H2_8;
    _temp2 += -0.809904071880251 * H2_9;
    H1_3 = Math.tanh(_temp2);

_temp3 += 0.65211608156898 * H2_1;
    _temp3 += 0.153358826229231 * H2_10;
    _temp3 += -0.577284797592672 * H2_2;
    _temp3 += 0.429987946104019 * H2_3;
    _temp3 += -0.0214944881562618 * H2_4;
    _temp3 += -0.0197578404119275 * H2_5;
    _temp3 += 0.81602931772807 * H2_6;
    _temp3 += 1.55441041269438 * H2_7;
    _temp3 += -0.354654919286015 * H2_8;
    _temp3 += -1.35246623279643 * H2_9;
    H1_4 = Math.tanh(_temp3);

_temp4 += -0.0205229428050754 * H2_1;
    _temp4 += 0.10826081444459 * H2_10;
    _temp4 += 0.689829328369476 * H2_2;
    _temp4 += 0.0180524122986651 * H2_3;
    _temp4 += -0.487032459020667 * H2_4;
    _temp4 += 0.235838175047739 * H2_5;
    _temp4 += 0.725612954061537 * H2_6;
    _temp4 += -0.529678615104436 * H2_7;
    _temp4 += -0.0626682444697669 * H2_8;
    _temp4 += 0.405148933483215 * H2_9;
    H1_5 = Math.tanh(_temp4);

_temp5 += 15.3285630835005 * H1_1;
    _temp5 += 10.5633968636429 * H1_2;
    _temp5 += 19.5732699419147 * H1_3;
    _temp5 += 19.2877635933711 * H1_4;
    _temp5 += -12.149757986894 * H1_5;
    _temp6 += 15.3285630835005 * H1_1;
    _temp6 += 10.5633968636429 * H1_2;
    _temp6 += 19.5732699419147 * H1_3;
    _temp6 += 19.2877635933711 * H1_4;
    _temp6 += -12.149757986894 * H1_5;
    outdata['Probability( Location=Inside )'] = Math.exp(_temp5) / (1 + Math.exp(_temp6));

_temp7 += 15.3285630835005 * H1_1;
    _temp7 += 10.5633968636429 * H1_2;
    _temp7 += 19.5732699419147 * H1_3;
    _temp7 += 19.2877635933711 * H1_4;
    _temp7 += -12.149757986894 * H1_5;
    outdata['Probability( Location=Outside )'] = 1 / (1 + Math.exp(_temp7));

_temp9[0] = outdata['Probability( Location=Inside )'];
    _temp9[1] = outdata['Probability( Location=Outside )'];
    _temp8 = jmp.max_array(2, _temp9);
    switch (_temp8) {
        case 0: {
            _temp10 = "Inside";
        }
        break;
        case 1: {
            _temp10 = "Outside";
        }
        break;
        default: {
            _temp10 = "";
        }
    }
    outdata['Most Likely Location'] = _temp10;

return outdata['Most Likely Location'];
};

module.exports = {
  getInputMetadata: getInputMetadata,
  getOutputMetadata : getOutputMetadata,
  getModelMetadata : getModelMetadata,
  score : score
};

},{"./jmp_score.js":3}],3:[function(require,module,exports){
"use strict";

/*-----------------------------------------------------------------
* jmp_score.js
* Helper module with defines and functions supporting 
* the JavaScript language scoring code generated by JMP
*
* Required by customer code: Yes
* Follows the require.js module convention
* Use with a compatible environment like node.js or browserify
*-----------------------------------------------------------------*/

var squish = function(x) {
    return 1.0 / (1.0 + Math.exp(-x));
};

var squash = function(x) {
    return 1.0 / (1.0 + Math.exp(x));
};

var is_missing = function (x) {
    return isNaN(x) || !isFinite(x) || x === undefined; 
};

/*-----------------------------------------------------------------
 * return the index of the max value found in an array
 * or -1 if all are missing
 *-----------------------------------------------------------------*/
var max_array = function(n, lst) {
    var maxval = -Infinity;
    var maxidx = 0;
    var count_miss = 0;
    
    for (var i = 0; i < n; i++) {
        if (is_missing(lst[i])) {
            count_miss++;
        }
        else if (maxval < lst[i]) {
            maxval = lst[i];
            maxidx = i;
        }
    }
    return (count_miss == n) ? -1 : maxidx;
};

/*-----------------------------------------------------------------
 * return the index of the min value found in an array
 * or -1 if all are missing
 *-----------------------------------------------------------------*/
var min_array = function(n, lst) {
    var minval = Infinity;
    var minidx = 0;
    var count_miss = 0;
    
    for (var i = 0; i < n; i++) {
        if (is_missing(lst[i])) {
            count_miss++;
        }
        else if (minval > lst[i]) {
            minval = lst[i];
            minidx = i;
        }
    }
    return (count_miss == n) ? -1 : minidx;
};

/*-----------------------------------------------------------------
 * Returns true if the numbers are identical using straight comparison.
 * If necessary, replace with a suitable comparison using a value of EPSILON
 * appropriate for your domain.
 *-----------------------------------------------------------------*/
var numeq = function(x, y) {
    return x == y;
    //  return Math.abs(a - b) < EPSILON;
}

module.exports = {
  squish: squish,
  squash: squash,
  is_missing: is_missing,
  max_array: max_array,
  min_array: min_array,
  numeq: numeq
};

},{}]},{},[1]);

</script>
</body>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js