A javascript library that visualizes how machine learning algorithms work using d3.js.
The goal of d3ML is to create beautiful, interactive visualizations of machine learning algorithms to make them easier to understand. You can check out this example visualization of the K-Nearest Neighbor (KNN) algorithm on codepen.
At the moment d3ML is not available on npm yet. Instead you can paste the following code in your HTML to use the current version of the library from rawgit in your project:
<script src="https://rawgit.com/StefanieStoppel/d3ML/master/lib/d3ml.min.js"></script>
Currently only the K-Nearest Neighbor (KNN) algorithm is implemented.
var knnVis = new d3ml.KNNVisualization(data, options, types, k);
knnVis.draw();
data
represents the data points you want to visualize.
It has to be an array containing objects with the keys x
, y
and type
.
Example:
var data = [
{x: 1, y: 2, type: 'A'},
{x: 13, y: 4, type: 'B'},
{x: 8, y: 1, type: 'B'},
{x: 98, y: 134, type: 'A'},
{x: 5, y: 42, type: 'B'},
{x: 100, y: 56, type: 'A'},
...
];
The x
and y
values represent the data coordinates and have to be numeric.
type
specifies the group that a certain data point belongs to.
You can pass options to specify the look of your visualization. The default options object looks like this:
var options = {
rootNode: 'body',
width: 500,
height: 300,
padding: 50,
backgroundColor: '#1d1e22',
circleRadius: 5,
circleFill: 'grey',
circleStroke: 'white'
};
A CSS selector specifying which DOM element the visualization will be attached to.
Default: body
.
The width of the SVG for the visualization in pixels.
Default: 500
.
The height of the SVG for the visualization in pixels.
Default: 300
.
The domain of the visualization depends on your data. You can specify a padding (in pixels) to ensure that your data points are not too close to the edge of the SVG.
Default: 50
Set the background color of the visualization.
Default: #1d1e22
, which is a dark grey.
The data points are displayed as circles. Set the radius (in pixels) of the circles with this option.
Default: 5
Set the fill color of the circles.
Default: grey
Set the stroke color of the circles.
Default: white
Types is an array with which you specify the types / groups that correspond to your data points. For the example data
var data = [
{x: 1, y: 2, type: 'A'}
{x: 5, y: 4, type: 'B'}
{x: 4, y: 7, type: 'A'}
{x: 9, y: 2, type: 'B'}
];
types would be
var types = ['A', 'B'];
k
sets the initial amount of neighbors that are taken into account when performing the KNN algorithm.
It has to be an integer.
Default: 3