Develop Reference

Javascript D3-fetch write to csv

i have some code that reads a csv using d3-fetch. I load my csv in the way:
D3.csv(./mydata.csv).then(function (info) {
Console.log(info);
});
this works fine and gives me my data. But how would i write to this data?

Keep in mind D3 is supposed to be run in a web browser. Web browsers can read files through HTTP but they cannot write files.
A server could write files on a file system it controls. So you would need to write a server endpoint like /editCSV and then make a POST request to it from the browser. Your server could then write the changes to the CSV file.
In order to do this, you need to have control of the server (for example, a Node.js server) that is serving the CSV and the related file.

D3 visualization on local machine without HTML server?

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/

Passing Value from C++ to Javascript

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.

Offline map rendering on Android Tab

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.

Reading local XML file with javascript

I am new to HTML/Javascript, as well as coding in general so bear with me :). I am trying to create a "Spot the Difference" game in html5 using javascript. Everything is local (on my machine). I have two pictures, of the same size, one with differences. To generate data about the clickable fields, I have a java program that reads both of the images and outputs all of the positions in which pixels are different into a XML file. My plan was to then use this XML file with my javascript to define where the user could click. However, it appears (correct me if I'm wrong) that javascript cannot read local XML files for security reasons. I do not want to use an ActiveXObject because I plan on putting this onto mobile devices via phone gap or a webkit object. Does anyone have a better approach to this problem, or perhaps a way to read local XML files via javascript? Any help would be greatly appreciated, thanks.

If you are planning to put this into a smart phones (iOS and Android) and read local files, I have done similar things with JSON (yes, please don't use XML).
Convert your output to JSON
Put this as part of your application package. For example, in Android, I put it as part of the .apk in /appFiles/json
Create a custom content provider that would read the local file. I create mine as content:// but you create whatever scheme you want. You could leverage android.content.ContentProvider in order to achieve custom URL Scheme. iOS has its own way to create custom scheme as well. The implementation simply read your local storage and give the content
To read it from Javascript, I simply call ajax with the custom scheme to get the json file. For example content://myfile/theFile.json simply redirect me to particular directory in local storage with /myfile/theFile.json appended to it
Below is the sample to override openFile() in the ContentProvider
public ParcelFileDescriptor openFile (Uri uri, String mode) {
try {
Context c = getContext();
File cacheDir = c.getCacheDir();
String uriString = uri.toString();
String htmlFile = uriString.replaceAll(CUSTOM_CONTENT_URI, "");
// Translate the uri into pointer in the cache
File htmlResource = new File(cacheDir.toString() + File.separator + htmlFile);
File parentDir = htmlResource.getParentFile();
if(!parentDir.exists()) {
parentDir.mkdirs();
}
// get the file from one of the resources within the local storage
InputStream in = WebViewContentProvider.class.getResourceAsStream(htmlFile);
// copy the local storage to a cache file
copy(in, new FileOutputStream(htmlResource));
return ParcelFileDescriptor.open(htmlResource, ParcelFileDescriptor.MODE_READ_WRITE);
} catch(Exception e) {
throw new RuntimeException(e);
}
}
I hope it helps

I would suggest modifying your java program to output a JSON formatted file instead of XML. JSON is native to JavaScript and will be much simpler for you to load.
As for actually loading the data, i'm not sure what the best option is as you say you want to evenutally run this on a mobile device. If you were just making a normal website you could setup a web server using either Apache or IIS depending on your OS and put the files in the document root. Once you've done that you can load the JSON file via Ajax, which can easily be googled for.
Not sure if this helps any.

Since this is a local file, you can do this with jQuery
$.ajax({
type: "GET",
url: "your.xml",
dataType: "xml",
success: function(xml){
///do your thing
}
});
http://api.jquery.com/jQuery.ajax/