I am starting using Vega and I am now trying to stream my data to nicely refresh my graph. I followed this doc (https://vega.github.io/vega-lite/tutorials/streaming.html) with no success so far. The examples I found have values in arrays and mine are in a JSON file which is refreshed on a regular basis. I ended up with this code which properly shows my graph as I want but it does not refresh my data.
<html>
<head>
<title>A title</title>
<meta charset="utf-8" />
<script src="https://cdn.jsdelivr.net/npm/vega#5.8.1"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite#4.0.0-beta.12"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed#6.1.0"></script>
<style media="screen">
/* Add space between Vega-Embed links */
.vega-actions a {
margin-right: 5px;
}
</style>
</head>
<body>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vega#5"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed#5"></script>
</head>
<body>
<div id="vis"></div>
<script>
var vlSpec = {
data: {"url": "http://localhost:8123/d.json", "name":"table"},
mark: "bar",
"width": 1240,
"encoding": {
"y": {"field": "task", "type": "ordinal", "sort":"x2"},
"x": {"field": "start", "type": "temporal", "aggregate":"sum"},
"x2": {"field": "end", "type": "temporal"},
"color": {"field": "status", "type": "nominal"}
}
};
// Embed visualization and save view as window.view:
vegaEmbed('#vis', vlSpec).then(function(res) {
window.setInterval(function() {
var changeSet = vega
.changeset()
.insert()
res.view.change('table', changeSet).run();
}, 1000);
});
</script>
</body>
</html>
My issue seems to be the insert() where in the example of the doc they insert the result of a function to generate data and I should insert here my JSON file -- I tried different variations with fetch but with no success.
Any help would be appreciated.
Thanks
Let me answer my own question as I figured it out.
First I used jquery:
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
I removed the url tag not to load the JSON file at first:
"data": {"name":'table'},
And the VEGA streaming data from my JSON file:
vegaEmbed('#vis', vlSpec).then(function(res) {
var newdata ;
window.setInterval(function() {
jQuery.getJSON("http://localhost:8123/d.json", function(data) {
newdata = data;
})
var changeSet = vega
.changeset()
.remove(vega.truthy)
.insert(newdata)
console.log (newdata)
res.view.change('table', changeSet).run();
}, 1000);
});
It works like a charm !
Related
Hi I want to generate a heatmap from a .geojson file with this plugin
How can I manage that? I'm very new to json, leaflet and web development.
The geoJSON file I have looks something like this (with more points ofc):
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"name": "testmarker",
"description": "This is a test description"
},
"geometry": {
"type": "Point",
"coordinates": [
-33.134766,
-60.326948
]
}
},
{
"type": "Feature",
"properties": {
"name": "testmarker2"
},
"geometry": {
"type": "Point",
"coordinates": [
-41.220703,
-62.552857
]
}
}
]
}
And here is what my index.html looks like right now.
<!DOCTYPE html>
<html = style="height: 100%;">
<head>
<title>Test Map</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="scripts/leaflet.css">
<script src="scripts/leaflet.js"></script>
<script src="scripts/leaflet.ajax.min.js"></script>
<script src="scripts/leaflet-heat.js"></script>
</head>
<body style="height: 100%;margin: 0;">
<div id="map" style="width: 100%; height: 100%; background: #000000;"></div>
<!-- Workaround for 1px lines appearing in some browsers due to fractional transforms
and resulting anti-aliasing.-->
<style>
.leaflet-tile-container img {
width: 256.5px !important;
height: 256.5px !important;
}
</style>
<script type="text/javascript">
// Creating the Map
var map = L.map('map').setView([58.602611, 50.350342], 4);
L.tileLayer('maps/mymap/{z}/{x}/{y}.png', {
continuousWorld: false,
noWrap: true,
minZoom: 2,
maxZoom: 6,
zoomControl: false,
minNativeZoom: 2,
maxNativeZoom: 6,
updateInterval: 200,
}).addTo(map);
// Remove old zoomControl and add new one in order to move it to bottomright
map.zoomControl.remove();
L.control.zoom({
position: 'bottomright'
}).addTo(map);
// Binds tooltip on all markers and also a popup on click if the markers has a description
function oef(feature, layer) {
if (feature.properties && feature.properties.name) {
layer.bindTooltip(feature.properties.name);
}
if (feature.properties && feature.properties.name && feature.properties.description) {
layer.bindPopup("<center><b> " + feature.properties.name + "</center></b><br>" + feature.properties.description);
}
}
var geojsonMarkers = new L.GeoJSON.AJAX(["https://raw.githubusercontent.com/***/test.geojson"],{onEachFeature:oef});
var mapOverlays={
"Test" : geojsonMarkers,
//"Test - Heat Map" : geojsonMarkersHeat,
}
var layerControl = L.control.layers(null, mapOverlays, {position:'topleft'}).addTo(map);
</script>
</body>
</html>
As you can see from above I want the heatmap to be toggleable via the mapOverlays but I don't really know how to proceed.
I am looking to create a web extension in Azure Devops from a React application.
As in seen in this tutorial, there is a file called my-hub.html, which is the start page of the extension.
By following the steps in the above link, I was able to create a web extension that prints the logged in user, as per my-hub.html, which does document.getElementById("name").innerText = VSS.getWebContext().user.name;.
However, I have written my application in React using Typescript and the start file is App.tsx. Could someone advise how I can instruct the vss-extension.json file to load the extension from App.tsx file?
{
"manifestVersion": 1,
"id": "my-first-extension",
"publisher": "",
"version": "1.0.0",
"name": "My First Extension",
"description": "A sample Visual Studio Services extension",
"public": false,
"categories": ["Azure Repos"],
"targets": [
{
"id": "Microsoft.VisualStudio.Services"
}
],
"contributions": [
{
"id": "my-hub",
"type": "ms.vss-web.hub",
"targets": [
"ms.vss-code-web.code-hub-group"
],
"properties": {
"name": "My Hub",
"uri": "my-hub.html"
}
}
],
"files": [
{
"path": "my-hub.html",
"addressable": true
},
{
"path": "node_modules/vss-web-extension-sdk/lib",
"addressable": true,
"packagePath": "lib"
}
]
}
Would I need to convert the React application to an html page?
you can deploy the React App first, then add the app/website link in html file. Something like this :
<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml">;
<head>
<script src="lib/VSS.SDK.min.js"></script>
<style>
body {
background-color: rgb(100, 100, 100);
color: white;
margin: 10px;
font-family: "Segoe UI VSS (Regular)","-apple-system",BlinkMacSystemFont,"Segoe UI",sans-serif;
}
</style>
<script type="text/javascript">
VSS.init();
VSS.ready(function() {
document.getElementById("name").innerText = VSS.getWebContext().user.name;
});
</script>
</head>
<body>
<h1>Hello, <span id="name"></span></h1>
<p>Hello. This is a link to React App?<br />
Just click to navigate to it</p>
</body>
</html>
Please reference this example if you want to integrate the React app directly with the extension.
Screenshot of the issues:
Web3.min.js path in my system directory!
Web3.min.js is loaded from folder in my browser
Copy of the web3.min.js in the same folder where index.html file is present.
Code added
info of the node!
I am facing following two issues:
Failed to load resource: web3.min.js:1 net::ERR_CONNECTION_REFUSED
ERROR: Couldn't connect to node http://localhost:8545.
My Index.html file is
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="container">
<h1>Coursetro Instructor</h1>
<h2 id="instructor"></h2>
<label for="name" class="col-lg-2 control-label">Instructor Name</label>
<input id="name" type="text">
<label for="name" class="col-lg-2 control-label">Instructor Age</label>
<input id="age" type="text">
<button id="button">Update Instructor</button>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script>
if (typeof web3 !== 'undefined') {
web3 = new Web3(web3.currentProvider);
} else {
// set the provider you want from Web3.providers
web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));
}
web3.eth.defaultAccount = web3.eth.accounts[0];
var CoursetroContract = web3.eth.contract([
{
"constant": false,
"inputs": [
{
"name": "_fName",
"type": "string"
},
{
"name": "_age",
"type": "uint256"
}
],
"name": "setInstructor",
"outputs": [],
"payable": false,
"stateMutability": "nonpayable",
"type": "function"
},
{
"constant": true,
"inputs": [],
"name": "getInstructor",
"outputs": [
{
"name": "",
"type": "string"
},
{
"name": "",
"type": "uint256"
}
],
"payable": false,
"stateMutability": "view",
"type": "function"
}
]);
var Coursetro=CoursetroContract.at('0x95712aa4ff464e56f76af55da6239a368c459ed4');
console.log(Coursetro);
</script>
</body>
</html>
If you are connecting to a local node:
You have included jquery cdn, similarly include a web3 from the link web3_cdn.
You can download one file from the link and connect the file in your webapp by
<script type="text/javascript" src="web3.min.js"></script>
And make sure when you run the app your metamask is disabled. Metamask injects a web3 object right into your application.
For reference check the other answers link
i have this problem and i solve it .
the solution :
you must create index.html and main.css in folder project, not in node_modules folder.
I am having trouble getting jsonp to work for a data serving website. Below is my script that will plot data points on a leaflet map as long as they are in the same domain. I need to take it a step further by using jsonp. I am having trouble understanding jsonp tutorials, especially with understanding how to deal with the response of the json file. This is my first time trying to use this method, and I have not be successful as I still don't fully understand js/html that well. Any help would be great as I think I am just a few lines of code from being able to get this to work properly. Thanks.
<html>
<head>
<meta charset="utf-8"/>
<title>A Leaflet map!</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style>
#map{ width: 1000px; height: 600px; }
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map',{center: [35, -121],zoom: 7});
var myStyle = {"color": "#ff7800", "weight": 5, "opacity": 0.65};
L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/tile/{z}/{y}/{x}', {attribution: 'Tiles © Esri — Sources: GEBCO, NOAA, CHS, OSU, UNH, CSUMB, National Geographic, DeLorme, NAVTEQ, and Esri'}).addTo(map);
$.getJSON("http://localhost:8000/erdCalCOFIcufes.geojson", function(data) {
L.geoJson(data, {
style: myStyle
}).addTo(map);
})
</script>
</body>
</html>
Note that it is hosted locally as detailed below. The website I need to use is here...
https://coastwatch.pfeg.noaa.gov/erddap/tabledap/erdCalCOFIcufes.geoJson?longitude,latitude,sardine_eggs&cruise=%22201504%22&sardine_eggs%3E=0&.draw=markers&.marker=5%7C5&.color=0x000000&.colorBar=%7C%7C%7C%7C%7C&.bgColor=0xffccccff
Here is what is looks like without a proper jsonp to grab data to plot. Currently, I have been able to grab the data by hosting the scripts in the same domain as the geojson file using the following...
python -m SimpleHTTPServer
This was more for proof of concept and wont fit my needs.
<html>
<head>
<meta charset="utf-8"/>
<title>A Leaflet map!</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style>
#map{ width: 1000px; height: 600px; }
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map',{center: [35, -121],zoom: 7});
var myStyle = {"color": "#ff7800", "weight": 5, "opacity": 0.65};
L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/tile/{z}/{y}/{x}', {attribution: 'Tiles © Esri — Sources: GEBCO, NOAA, CHS, OSU, UNH, CSUMB, National Geographic, DeLorme, NAVTEQ, and Esri'}).addTo(map);
$.getJSON("http://localhost:8000/erdCalCOFIcufes.geojson", function(data) {
L.geoJson(data, {
style: myStyle
}).addTo(map);
})
</script>
</body>
</html>
The geojson file looks like the following. I cut out a lot of points to make it more digestible.
{
"type": "FeatureCollection",
"propertyNames": ["sardine_eggs"],
"propertyUnits": ["count"],
"features": [
{"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-123.3226, 38.1476] },
"properties": {
"sardine_eggs": 0 }
},
{"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-123.3527, 38.1785] },
"properties": {
"sardine_eggs": 1 }
},
{"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-123.369, 38.238] },
"properties": {
"sardine_eggs": 0 }
},
{"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-117.3725, 32.6873] },
"properties": {
"sardine_eggs": 0 }
},
{"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-117.2973, 32.6538] },
"properties": {
"sardine_eggs": 0 }
}
],
"bbox": [-126.5296, 29.8483, -117.2931, 43.7501]
}
I am trying to use the following code to highlight features under the mouse pointer.
The difference between my geojson data and the geojson data used in the linked example is that the example is made up of polygons whereas my geojson is made up of polylines. I have tried to modify the code accordingly in order that lines are highlighted however it does not work.
My geojson is accessible here:
http://iskandarblue.github.io/mapbox/data/prototype2.geojson
Any advice on what needs to be changed?
Example:
https://www.mapbox.com/mapbox-gl-js/example/hover-styles/
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>HTML markers from geoJSON url</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.15.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.15.0/mapbox-gl.css' rel='stylesheet'/>
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiaXNrYW5kYXJibHVlIiwiYSI6ImNpbHIxMXA3ejAwNWl2Zmx5aXl2MzRhbG4ifQ.qsQjbbm1A71QzVg8OcR7rQ';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v8',
center: [37.625224, 55.744537,],
zoom: 13
});
map.on('style.load', function () {
map.addSource("streets", {
"type": "geojson",
"data": "http://iskandarblue.github.io/mapbox/data/prototype2.geojson"
});
map.addLayer({
"id": "m_streets",
"type": "line",
"source": "streets",
"interactive": true,
"layout": {},
"paint": {
"line-color": "#627BC1",
"line-width": 2.5
}
});
map.addLayer({
"id": "route-hover",
"type": "line",
"source": "streets",
"layout": {},
"paint": {
"line-color": "#627BC1",
"line-width": 2.5
},
"filter": ["==", "rd_name", ""]
});
// When the user moves their mouse over the page, we look for features
// at the mouse position (e.point) and within the states layer (states-fill).
// If a feature is found, then we'll update the filter in the route-hover
// layer to only show that state, thus making a hover effect.
map.on("mousemove", function(e) {
map.featuresAt(e.point, {
radius: 5,
layer: ["m_streets"]
}, function (err, features) {
if (!err && features.length) {
map.setFilter("route-hover", ["==", "rd_name", features[0].properties.rd_name]);
} else {
map.setFilter("route-hover", ["==", "rd_name", ""]);
}
});
});
});
//.addTo(map);
</script>
</body>
</html>
The route-hover layer just needs to be styled differently right? Here's a live example of your code above with a slight adjustment: https://jsbin.com/loxoquwiye/