const net = new brain.NeuralNetwork();
net.train([
{
input: [0, 0]
output: [0]
},
{
input: [1, 0]
output: [1]
},
{
input: [0, 1]
output: [1]
},
{
input: [1, 1]
output: [0]
}
])
const diagram = document.getElementById('diagram')
diagram.innerHTML = brain.utilities.toSVG(net)
This should show me the neural network diagram but it doesn't I do have the HTML all set up and it's supposed to be working correctly but when I run it first it loads for longer than usual code does but I suppose its because I'm working with more complex stuff than usual and well I just get a blank screen so I would like if someone would help me out by telling me what the problem is
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Storm</title>
<script src="//unpkg.com/brain.js" defer></script>
<script src="index.js" defer> </script>
</head>
<body>
<div id="diagram">Diagram </div>
</body>
</html>
Your import is this:
<script src="//unpkg.com/brain.js" defer></script>
But needs to be this:
<script src="https://unpkg.com/brain.js#1.0.0-rc.3/browser.js"></script>
https:// implies it will download it from a website, whereas yours
// implies it will look on your local machine (your computer) for the file.
Since you didn't download the file, it won't load anything.
Maybe you want to use a different package, but the main issue is the import.
Related
The "console-log(states)" line in he HTML File returns an "undefined".
Does anyone know why?
My goal here is to store the data from the JSON-File in a JavaScript-Variable.
The result should be a list that contains 3 dictionaries.
Both files are in the same directory.
Thanks a lot for any help!
HTML-File
<html>
<head>
<script type="text/javascript" src="states_Ex1.json"></script>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<script> var states=states_Ex1.json</script>
<script>
console.log(states) // --> undefined
</script>
</body>
</html>
JSON-File
[
{
"gene1": true,
"gene2": true,
"nextStateIndex": 1
},
{
"gene1": true,
"gene2": false,
"nextStateIndex": 2
},
{
"gene1": true,
"gene2": true,
"nextStateIndex": 1
}
]
New Answer
I've found a series of answers here for accessing local JSON files.
I tried #seppoo0010's method and it works on my end. Give it a shot:
$.getJSON("your-path-to-file.json", function(states) {
console.log(states); // this will show the info it in firebug console
});
You'll need to parse the JSON. Try this:
...
var states = JSON.parse(states_Ex1.json)
...
I am creating a layout with IE10-11 support. Most of my functions work, but the .text jQuery method does nothing. When I click on the button on my page, the text of some elements should change based on the passed argument to my function. The code:
const currenciesChars = new Map([
['rub', '₽'],
['usd', '$'],
['eur', '€']
])
const currenciesNote = new Map([
['rub', 'Руб'],
['usd', 'USD'],
['eur', 'EUR']
])
function changeCurrency(currency) {
$(".currency").text(currenciesChars.get(currency))
$(".currency-note").text(currenciesNote.get(currency))
}
changeCurrency('usd');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="currency"></div>
<div class="currency-note"></div>
The console does not produce a single error. However, the function works if you add alert (123) to it, you can verify this.
What is the problem of my code?
As commented above, new Map(arguments) is not supported in IE11. You need to use #babel/polyfill to polyfill it in IE:
Install #babel/polyfill by running the following command:
npm install --save #babel/polyfill
In the #babel/polyfill npm release, there's a file #babel/polyfill/dist/polyfill.js. You could include it before all your compiled Babel code. You can either prepend it to your compiled code or include it in a <script> before it.
To make your code working in IE 10, you also need to change const to var.
The working code sample is like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="node_modules/#babel/polyfill/dist/polyfill.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="currency"></div>
<div class="currency-note"></div>
<script>
var currenciesChars = new Map([
['rub', '₽'],
['usd', '$'],
['eur', '€']
])
var currenciesNote = new Map([
['rub', 'Руб'],
['usd', 'USD'],
['eur', 'EUR']
])
function changeCurrency(currency) {
$(".currency").text(currenciesChars.get(currency))
$(".currency-note").text(currenciesNote.get(currency))
}
changeCurrency('usd');
</script>
</body>
</html>
I'm trying to figure out if BokehJS can meet my plotting needs for a minor dev project. When I try to copy the last example found on https://docs.bokeh.org/en/latest/docs/user_guide/bokehjs.html it fails with this backtrace in Chrome:
Uncaught TypeError: Cannot read property 'classList' of null
at c (bokeh-1.3.4.min.js:31)
at Object.n.add_document_standalone (bokeh-1.3.4.min.js:31)
at Object.t.show (bokeh-api-1.3.4.min.js:31)
at bokeh.html:58
The example is copied verbatim into a file, bokeh.html, and opened directly in the browser. bokeh.html:58 is the line
Bokeh.Plotting.show(plot);
The example is supposed to be a complete standalone html file so I must be missing something obvious here. My copy of the example can be found here https://pastebin.com/VizzJbH4
Any hints are greatly appreciated.
Move script tag with code at the end instead of head tag.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Complete Example</title>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.1.1.min.js" integrity="sha384-kLr4fYcqcSpbuI95brIH3vnnYCquzzSxHPU6XGQCIkQRGJwhg0StNbj1eegrHs12" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.1.1.min.js" integrity="sha384-xIGPmVtaOm+z0BqfSOMn4lOR6ciex448GIKG4eE61LsAvmGj48XcMQZtKcE/UXZe" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.1.1.min.js" integrity="sha384-Dc9u1wF/0zApGIWoBbH77iWEHtdmkuYWG839Uzmv8y8yBLXebjO9ZnERsde5Ln/P" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-gl-2.1.1.min.js" integrity="sha384-cT9JaBz7GiRXdENrJLZNSC6eMNF3nh3fa5fTF51Svp+ukxPdwcU5kGXGPBgDCa2j" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-api-2.1.1.min.js" integrity="sha384-i2RsfqLVG6PTrWCD55m8pYN9N2XZRkYVASzqjzp79o0OpPmcp+APyuwCfItW7Kn2" crossorigin="anonymous"></script>
<script>
//The order of CSS and JS imports above is important.
</script>
</head>
<body>
</body>
<script>
// create a data source to hold data
var source = new Bokeh.ColumnDataSource({
data: { x: [], y: [] }
});
// make a plot with some tools
var plot = Bokeh.Plotting.figure({
title:'Example of Random data',
tools: "pan,wheel_zoom,box_zoom,reset,save",
height: 300,
width: 300
});
// add a line with data from the source
plot.line({ field: "x" }, { field: "y" }, {
source: source,
line_width: 2
});
// show the plot, appending it to the end of the current section
Bokeh.Plotting.show(plot);
function addPoint() {
// add data --- all fields must be the same length.
source.data.x.push(Math.random())
source.data.y.push(Math.random())
// notify the DataSource of "in-place" changes
source.change.emit()
}
var addDataButton = document.createElement("Button");
addDataButton.appendChild(document.createTextNode("Add Some Data!!!"));
document.currentScript.parentElement.appendChild(addDataButton);
addDataButton.addEventListener("click", addPoint);
addPoint();
addPoint();
</script>
</html>
I got this code from the GitHub:
<script src="path/to/jSignature.min.js"></script>
<script>
$(document).ready(function() {
$("#signature").jSignature()
})
</script>
<div id="signature"></div>
But it doesn't pull anything up on the actual webpage. I would think there is more code required but I don't know where to start.
Here is a minimal working example
<!DOCTYPE html>
<html lang="en">
<head>
<lang>
<title>Minimal working jSignature Example</title>
<meta charset="UTF-8">
<!-- Files from the origin -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://willowsystems.github.io/jSignature/js/libs/jSignature.min.js"></script>
<head>
<script>
$(document).ready(function() {
// Initialize jSignature
$("#signature").jSignature();
})
// ripped from the description at their the Github page
function getBase64Sig(){
// get the element where the signature have been put
var $sigdiv = $("#signature");
// get a base64 URL for a SVG picture
var data = $sigdiv.jSignature("getData", "svgbase64");
// build the image...
var i = new Image();
i.src = "data:" + data[0] + "," + data[1];
// and put it somewhere where the sun shines brightly upon it.
$(i).appendTo($("#output"));
}
</script>
<body>
Put your signature here:
<div id="signature"></div>
<button onclick="getBase64Sig()">Get Base64</button>
<div id="output"></div>
</body>
</html>
I hope you can go on from here.
It is really as simple as they describe it to be, only their description of the actual example is a bit lacking for beginners.
So I want to use angularJS to get data from a server and plot the data using Plotly. I am running a server in the background. The HTML I am using is shown below. I think it is pretty straight forward.
<!DOCTYPE html>
<html>
<head>
<title>Testign Plotly</title>
<script type="text/javascript" src='plotly.min.js'></script>
<script type="text/javascript" src='jquery.min.js'></script>
<script type="text/javascript" src='angular.min.js'></script>
<script type="text/javascript" src='plotApp.js'></script>
</head>
<body ng-app='myApp'>
<div id="graph" style="width:600px;height:250px;"></div>
<script type="text/javascript" ng-controller='plotXY'>
// var data = [{
// x:[1,2,3,4],
// y:[5,3,6,12],
// }];
Plotly.plot( $('#graph')[0], {{data}} , {margin: {t:0}});
</script>
<hr><div ng-controller='plotXY'>{{data}}</div>
</body>
</html>
I have the angularJS script plotApp.js as shown below, also very simple ...
var app = angular.module('myApp', []);
app.controller('plotXY', function($scope, $http){
$scope.data = {};
$scope.refresh = function(){
$http.get('http://localhost:8080/data').success(function(data){
$scope.data = {};
for(k in data){$scope.data[k] = data[k].map(Number);}
$scope.data = [$scope.data];
});
};
$scope.refresh();
});
Now, The compiled HTML for this (saved from the browser) is shown below ...
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252"><style type="text/css">#charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\:form{display:block;}.ng-animate-shim{visibility:hidden;}.ng-anchor{position:absolute;}</style>
<title>Testign Plotly</title>
<script type="text/javascript" src="Testign%20Plotly_files/plotly.js"></script><style></style>
<script type="text/javascript" src="Testign%20Plotly_files/jquery.js"></script>
<script type="text/javascript" src="Testign%20Plotly_files/angular.js"></script>
<script type="text/javascript" src="Testign%20Plotly_files/plotApp.js"></script>
</head>
<body class="ng-scope" ng-app="myApp">
<div id="graph" style="width:600px;height:250px;"></div>
<script class="ng-scope" type="text/javascript" ng-controller="plotXY">
// var data = [{
// x:[1,2,3,4],
// y:[5,3,6,12],
// }];
Plotly.plot( $('#graph')[0], {{data}} , {margin: {t:0}});
</script>
<hr><div class="ng-scope ng-binding" ng-controller="plotXY">[{"y":[1.26642e-14,2.8044e-14,6.1484e-14,1.33457e-13],"x":[-10,-9,-8,-7]}]</div>
</body></html>
As you can tell, the portion within the div gets updates with the right data. However, that within the script doesn't!
Just so you know, If I use the data variable (the one that is commented out), I am able to see the plot. So Plotly is working.
I want the client to pull data from the server and have plotly display it. I can do it if I create the entire page from the server and send it over. However, I think that this way is much better. However, for some reason, I dont seem to be able to connect the data source in Plotly, to that in angularJS. I would really appreciate some help ...
The Plotly-method of updating the data seems to be through Plotly.restyle():
var update = {x: [[0,1,2], y: [[5,2,4]]};
Plotly.restyle(graphDiv, update, 0);
Just make sure that you use double arrays when you want to update an array. Plotly supports updating multiple traces at once via arrays, so [[0,1,2],[1,3,4]] would update two traces