D3OG

All examples By author By category About

Bcohn

Full window Github gist

softmax

<!DOCTYPE html>
<meta charset="utf-8">

path {
  fill: none;
  stroke: #666;
  stroke-width: 1.5px;
}

.yAxis text {
  font: 10px sans-serif;
}
.xAxis text {
  font: 10px sans-serif;
}

.linegraph{
  display: block;
  margin: auto;
  height: 250px;
  width 960px;
}

.axis path,
.axis line {
    fill: none;
    stroke: #808080;
    stroke-width: 1;
    shape-rendering: crispEdges;
}

/*.chart {width: 100px; height: 100px;}
*/

.xAxis path, .xAxis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
/

.but{width:100px;}
.dot{
  opacity:.7;
  fill: #1A2F4B;
}
text{
    font-family: 'Open Sans', sans-serif;
}

</style>

</div>
<br>
<div id="graph1" class="linegraph"></div>
<br>
<div id="chart"></div>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.0/js/bootstrap-toggle.min.js"></script>
<script src="https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/jquery.auto-complete.min.js"></script>
<link rel="stylesheet" type="text/css" href="js/jquery.auto-complete.css" />

(function(){

$(".icon-search").click(function() {
  var itsearchstring = $('#Iterations');
  Iterations=itsearchstring.focus().val();
  var lambdastring = $('#Lambda');
  lambda=lambdastring.focus().val();
  var etasearchstring = $('#Eta');
  eta=etasearchstring.focus().val();
  Errorlist=[];
  if(Iterations){
    Iterations=Iterations;
  }
  else{
    Iterations=10;
  }
  if(lambda){
    lambda=lambda;
  }
  else{
    lambda=.001
  }
  if(eta){
    eta=eta;
  }
  else{
    eta=.01
  }

FitModel()
});

var alignthing = d3.select(".ui-widget")
           .attr("align","center")

var alignthing = d3.select(".linegraph")
           .attr("align","center")

var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x = d3.scale.linear()
    .range([0, width]);

var y = d3.scale.linear()
    .range([height, 0]);

var color = d3.scale.ordinal()
              .range([d3.rgb("red"),d3.rgb("green"),d3.rgb("blue")]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

var graph = d3.select(graph1)
      .append("svg:svg")
      .attr("width",width)
      .attr("height",150)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + 50 + ")");

var svg = d3.select("#chart")    
	.attr("align","center")
	.append("svg")
    .attr("class", "axis")
    .attr("width",width + margin.left+margin.right )
    .attr("height", height + margin.top+margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// create a line object that represents the SVN line we're creating

d3.csv("fruit.csv", function(error, dataInput) {
  if (error) throw error;
  dataInput.forEach(function(d) {
      d.fruit =+d.fruit
      d.fruit = fruitmap(d.fruit)
      d.width = +d.width;
      d.height = +d.height;
      });
  create(dataInput);
   });

function Error(astart,Ymatrix){
  var yln = astart.map(function (value, index, matrix) {
    return Math.log(value);
  });
  var Errors= math.dotMultiply(Ymatrix, yln)
  var count=0
  var ErrorFinal= Errors.map(function (value, index, matrix) {
    count += value;
    return -count;
  });

return ErrorFinal._data[58][2];
}

function OneHotEncoder(d){
  if(d===1){
    return [1,0,0];
  }
  if(d===2){
    return [0,1,0];
  }
  else return [0,0,1];
}

function create(dataInput){

var xlimits=d3.extent(dataInput, function(d) { return d.width;}) 
  var ylimits=d3.extent(dataInput, function(d) { return d.height;}) 
  ylimits[0]=3.9
  x.domain(xlimits).nice();
  y.domain(ylimits).nice();
  var fruit=["Apples","Oranges","Lemons"];
  svg.append("g")
      .attr("class", "x-axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
    .append("text")
      .attr("class", "label")
      .attr("x", width)
      .attr("y", -6)
      .style("text-anchor", "end")
      .text("Width");

svg.append("g")
      .attr("class", "y-axis")
      .call(yAxis)
    .append("text")
      .attr("class", "label")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Height")

svg.selectAll(".dot")
      .data(dataInput)
    .enter().append("circle")
      .attr("class", "dot")
      .attr("r", 3.5)
      .attr("cx", function(d) { return x(d.width); })
      .attr("cy", function(d) { return y(d.height); })
      .style("fill", function(d) { return color(d.fruit); });

var legend = svg.selectAll(".legend")
      .data(color.domain())
    .enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

legend.append("rect")
      .attr("x", width - 18)
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", color);

legend.append("text")
      .attr("x", width - 24)
      .attr("y", 9)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text(function(d) { return d; });
}

function Errorline(Errorlist){
  var gx = d3.scale.linear().domain([0, Errorlist.length]).range([0, 900]);
  var gy = d3.scale.linear().domain([Math.max(...Errorlist),0]).range([0, 100]);
  var gxAxis = d3.svg.axis()
    .scale(gx)
    .orient("bottom");

var gyAxis = d3.svg.axis()
    .scale(gy)
    .orient("left");

var line = d3.svg.line()
    .x(function(d,i) { 
      return gx(i)-20; 
    })
    .y(function(d) { 
      return gy(d); 
    })
    graph.select("path")
         .remove();

var path = graph.append("path")
      .attr("d", line(Errorlist))
      .attr("stroke", "steelblue")
      .attr("stroke-width", "2")
      .attr("fill", "none");

var totalLength = path.node().getTotalLength();

path
      .attr("stroke-dasharray", totalLength + " " + totalLength)
      .attr("stroke-dashoffset", totalLength)
      .transition()
        .duration(2000)
        .ease("linear")
        .attr("stroke-dashoffset", 0);
  
      graph.select("text")
         .remove();

var graph_title= graph.append("text")
    .attr("transform", "translate(" + (width-90+3) + "," + gy(Errorlist[Errorlist.length-1]) + ")")
    .attr("font-size", "10px")
    .text("Error");

// graph.append("g")
  //     .attr("class", "x-axis")
  //     .attr("transform", "translate(0," + height + ")")
  //     .call(gxAxis)
  //   .append("text")
  //     .attr("class", "label")
  //     .attr("x", width)
  //     .attr("y", -6)
  //     .style("text-anchor", "end")
  //     .text("Width");

// graph.append("g")
  //     .attr("class", "y-axis")
  //     .call(gyAxis)
  //   .append("text")
  //     .attr("class", "label")
  //     .attr("transform", "rotate(-90)")
  //     .attr("y", 6)
  //     .attr("dy", ".71em")
  //     .style("text-anchor", "end")
  //     .text("Height")

}

function Predict(Datum,Weights){
  class0prob=Datum[0]*Weights._data[0][0]+Datum[1]*Weights._data[1][0]
  class1prob=Datum[0]*Weights._data[0][1]+Datum[1]*Weights._data[1][1]
  class2prob=Datum[0]*Weights._data[0][2]+Datum[1]*Weights._data[1][2]
  classes=[class0prob,class1prob,class2prob]
  var Prediction= Softmax(classes);
  console.log(Prediction);
  return Prediction
}

var buckets=rawdata;
  // x.domain([5.5,10]).nice();
  // y.domain([3,11]).nice();

var xStep = .25;
  var yStep = .25;

svg.selectAll(".tile")
    .remove();

svg.selectAll(".tile")
    .data(buckets)
  .enter().append("rect")
    .attr("class", "tile")
    .attr("x", function(d) { return x(d[0]); })
    .attr("y", function(d) { return y(d[1] + yStep); })
    .attr("width", x(xStep) - x(0))
    .attr("height",  y(0) - y(yStep))
    .style("opacity",function(d){return Math.max(...Predict(d,Weights))}) 
    .style("fill", function(d) {return colorinterpolation(Predict(d,Weights))});
}

})();

</script>

Modified http://cdnjs.cloudflare.com/ajax/libs/mathjs/2.7.0/math.min.js to a secure url

Modified http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js to a secure url

https://cdnjs.cloudflare.com/ajax/libs/mathjs/2.7.0/math.min.js

https://code.jquery.com/jquery-1.10.2.js

https://code.jquery.com/ui/1.11.4/jquery-ui.js

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js

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

https://d3js.org/topojson.v1.min.js

https://gitcdn.github.io/bootstrap-toggle/2.2.0/js/bootstrap-toggle.min.js

https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js

https://code.jquery.com/jquery-1.11.3.min.js