I have been trying to render a map offline on an android device. I am trying to use d3 for this and any leads and suggestions will go a long way in helping me out.
Can I use d3 and the geojson/topojson files of the region to plot the map on the browser? However, Is there a way to do this without an app server? As of now d3 reads a json through the function d3.json() which needs an app server in itself. Is there a way in which d3 can read the json file directly from the local file path instead of a URL?
Any other direction to approach this problem will be appreciated. Awaiting your response.
Regards,
Jones
This is not possible.
d3.json is meant to load data through HTTP. As a workaround, you could set up a local server to serve the data over HTTP.
This is possible. I have done something like this.
For me, I used an app server but I pushed the JSON string into the HTML and fetched it directly using JavaScript. The code is something like this:
var root = treeData = JSON.parse($('#json').val());
function visit(parent, visitFn, childrenFn) {
//....
visit(treeData, function(d) {
//....
Have you considered using an approach like IndexedDB to cache the json? This way you could load the json into IndexedDB on the first page load or while you have internet connectivity, and then retrieve it from the store when you are offline.
Related
so basically what I would like to do is read x-json file on my hdd for example and load it into the localstorage of my browser.
So far I went with
const localStorageName = 'events';
this.eventList = JSON.parse(localStorage.getItem(localStorageName)) || {};
localStorage.setItem(localStorageName, JSON.stringify(this.eventList));
to save something into the localstorage as a string.
As far as I can think and Iam pretty new to js, json and coding/programming in general, i would have to "unstringify" if that is even a word, the file when loading it and put it back into js right?
Well if it is even possible to load a local file into localstorage that is.
Iam well aware that localstorage can only read/store strings, so it has to be a json file that must be read/load.
Overwriting the data is not an issue. Security is also not an issue.
Why do I want this?
Iam creating a local calendar with an event list/planner but the local cache on the clients are being erased upon shutting down/restarting, so the events are getting erased.
And this has to be offline.
So if this is even possbile any help is highly appreciated!
Thank you in advance.
I'm a total novice in web development. I'm interested in using D3 to create interactive visualizations for my (insurance) work, not for sharing on web. The visualization would need to be pretty self-contained so non-tech-savvy business users can view it without special software setup--just the usual browser, internet access, and access to the same LAN locations I have. Below is my initial investigation into viability.
1) I can save this HTML example to my local machine and view the chart in a browser, no probs: https://bl.ocks.org/mbostock/b5935342c6d21928111928401e2c8608
2) Then I tried a visualization that uses a data file.
https://bl.ocks.org/mbostock/2838bf53e0e65f369f476afd653663a2
I went to the data source website and downloaded the .csv. Simply changing the file address in the d3.csv() command to my local drive didn't work (as I mentioned I'm a novice)
Can anyone show me how to make (2) work locally? I found some related answers
Loading local data for visualization using D3.js
Reading in a local csv file in javascript?
but still over my head--if someone can work the example (2) above I can probably understand better...
There are two techniques you can use to load d3 data without a server:
load the data yourself without using d3.csv() helpers.
use data-urls with d3.csv() to avoid server loading.
Loading the data yourself without d3.csv()
Your first example: Stacked Negative Values works because data is defined at the top of the page without using d3.csv():
var data = [...];
...
// d3 operates on the data
Your second example: Nested TreeMap doesn't work because the data is loaded by d3.csv() which takes a path, which ordinarily takes assumes a server:
d3.csv("Home_Office_Air_Travel_Data_2011.csv", type, function(error, data) {
...
// work on data within the anon function passed to d3.csv.
Using data-urls with d3.csv()
However, if you use a data-url as the path, you can get this to work without a server:
var data = [...];
var dataUri = "data:text/plain;base64," + btoa(JSON.stringify(data));
d3.csv(dataUri, function(data){
// d3 code here
});
Adapted from: Create data uri's on the fly?
As an aside, you may be interested in a Middleman plugin I wrote that creates self-contained d3 HTML pages that can be run from the file system without a server using these approaches:
https://github.com/coldnebo/middleman-static-d3
Most modern browsers (chrome, mozilla) have full built in html5, css3, and javascript support without need of a webserver (this is the preferred route for developement).
For example, if you're using chrome all you need to do is set the allow local file access flag: How to launch html using Chrome at "--allow-file-access-from-files" mode?
In mozilla set the about:config key security.fileuri.strict_origin_policy to false.
Again, these are options for loading local files without a webserver, but setting up a webserver is a relatively simple task that is the most recommended route.
you'll need to run a local server like python's SimpleHTTPServer to get this to work locally. once you've got it installed, it's as simple as running a single command in your terminal.
however, since you said that your end users should be able to access it through the browser, do you mean that you'll host it online? if so, they'll be able to view it correctly on the server
Notice how in the first example the data in hard coded into the html page with the variable name data? The data is already here so you won't need a server to go and fetch the data. On the other hand, in second example the data is not hardcoded and is fetched with a server. If you want this to work like the first example you will have to hard code the data into the web page.
You may want to use SERVED by Ian Johnson, its pretty good.
http://enjalot.github.io/served/
I have a very simple project. It's only local and I don't require it to ever be online. I'm perfectly content running it by opening index.html in chrome. Along with my html, css, and javascript file there is a data.JSON in my root directory of my project. My question is: can I read and write to this file? Or is there a possible alternative to simple data persistence. I've had no luck beating cross origin policy up to this point using $.getJSON.
$(document).ready(function(){
var data;
var g = $.getJSON('../data.JSON', function(d){
console.log(d);
data = d;
});
console.log(data)
d = proper JSON object,
data = undefined
I have no idea why...
javascript in your case is working only on client side and you cannot modify any file on client's machine.
Alternative solutions:
Use a server, if you are familiar with javascript, you can use node.js. Though it has a learning curve and you might take some time in learning that.
Download updated JSON file and replace original file with this new file. you can create files in javascript and download them on client machine. Then you have to manually replace original file.
i have a c++ file which reads values from a sensor and I want to display those values on a website dynamically. So Im looking for a way to pass these values(integers) from my cpp file to an javascript which displays them on the site.
My first, simple try was to write the values into a js file as variables every second from my cpp script. The Js then uses this file as a source and displays its variables on the site:
cpp:
fprintf(file, "var mx=%d, my=%d, mz=%d, ax=%d, ay=%d, az=%d, gx=%d, gy=%d, gz=%d;\n",
imu.raw_m[0], imu.raw_m[1], imu.raw_m[2], // M = Magnetometer
imu.raw_a[0], imu.raw_a[1], imu.raw_a[2], // A = Accelerometer
imu.raw_g[0], imu.raw_g[1], imu.raw_g[2] // G = Gyroscope
);
html/js:
<script src="./imu.js" type="text/javascript"></script>
The Problem now is of course, that I need to refresh the page all the time, because the imu.js file is cached by the website.
I'd rather have a way to directly pass to integers from the cpp file to the js script. I read something about json or Googles V8 script. But I'd like to hear your suggestions first.
By the way, Im running this on a raspi, if this is important.
Thanks for your help
EDIT:
I'm goning to try it with a mysql database, in which my cpp file writes the data from the sensor with Connector/c++ from http://dev.mysql.com/doc/connector-cpp/en/ and my website reads them.
You could compile your C++ code into a Node.js plugin, you can then register a JavaScript function with your plugin which the C++ calls when it updates the value. That way you can pass values directly from C++ into Javascript in a managed and controlled way.
Node.js has the added benefit of being able to host your webpage and do all the Websocket and HTTP stuff that can be a pain in C++.
You do not have to refresh if your script is smart about how to access the data file! In case you do have a webserver at hand: Take care that your data file is accessible by your webserver and then let your script request the file via ajax (link to w3schools)
I'm doing something similar on a BeagleBone Black. With websocketd you can turn pretty much any program into a websocket endpoint and then send data via stdin and stdout commands. This would be a particularly good solution for you since websockets are designed to handle information that's constantly changing.
I have a web server setup. And my web app (JQuery + HTML) is up and running. I would like to use the path that is provided in the URL as some variable and perform different operation.
E.g.
http://subdomain.mydomain.com/
This points to /var/www , and has my index.html
I am trying to achieve the functionality that, when path with some value is provided, e.g.
http://subdomain.mydomain.com/c3212
I will catch the value c3212 in javascript and set it as some static variable. The view/js code in index.html uses this code to make requests to server to fetch some data and layout the data accordingly.
How do I go about doing this ? Googling didn't help much, since I don't actually know what terms should I search for. Do I also need to make changes in Apache VirtualHost configuration?
I am not a web guy, help would be appreciated, thank you.
You can use the window.location JavaScript object to get the path like so:
var path = window.location.pathname;
console.log(path); // this will output "/c3212" based on your example
Once you have this you can use it with the rest of your script.
I hope this helps!