d3.js CSV element in-line - csv

Folks-
I'm making a viz based on Mike Bostock's http://bost.ocks.org/mike/uberdata/.
As this will be mailed and viewed locally rather than staged on a server it's necessary to embed the JS library, and any data in the document.
I have successfully integrated the javascript, as well as a JSON object. I'm having difficulty getting the CSV file included and then iterating over it.
var myMatrix = '[[0,557.3,0,0,0,1645.8,0,903.2,895.6,615.7,0,408.1,0,845.3,290.1,325,73.5],[788.1,0,0,0,1204.2,1859.7,1020.5,1160,976.4,1057,1082.4,0,697.2,0,614.2,0,0]]';
svg.append("circle")
.attr("r", outerRadius);
d3.csv("companies.csv", function(companies) {
//d3.json("matrix.json", function(matrix) {
matrix = JSON.parse(myMatrix); //new
// Compute the chord layout.
layout.matrix(matrix);
...<snip>
So basically I need to replace the "d3.csv" function with something that will operate on an in-line data set while still iterating over the rest of the function.
Thanks,
RL

Lars- you're right. I was overthinking it.
I just added the JSON object in and the d3 magically iterated over the items in the object.
var companies = [{name:"one", color:"#8a8a8a"},{name:"two", color:"#5d9a0c"},{name:"three", color:"#005a8b"}}];
thanks,
RL

Related

Apps script JSON.parse() returns unexpected result, how can I solve this?

I am currently working on external app using Google Sheets and JSON for data transmission via Fetch API. I decided to mock the scenario (for debugging matters) then simple JSON comes from my external app through prepared Code.gs to be posted on Google sheets. The code snippet I run through Apps-scripts looks like this:
function _doPost(/* e */) {
// const body = e.postData.contents;
const bodyJSON = JSON.parse("{\"coords\" : \"123,456,789,112,113,114,115,116\"}" /* instead of : body */);
const db = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
db.getRange("A1:A10").setValue(bodyJSON.coords).setNumberFormat("#"); // get range, set value, set text format
}
The problem is the result I get: 123,456,789,112,113,000,000,000 As you see, starting from 114 and the later it outputs me 000,... instead. I thought, okay I am gonna explicitly specify format to be returned (saved) as a text format. If the output within the range selected on Google Sheets UI : Format -> Number -> it shows me Text.
However, interesting magic happens, let's say if I would update the body of the JSON to be parsed something like that when the sequence of numbers composed of 2 digits instead of 3 (notice: those are actual part of string, not true numbers, separated by comma!) : "{\"coords\" : \"123,456,789,112,113,114,115,116,17,18\"}" it would not only show response result as expected but also brings back id est fixes the "corrupted" values hidden under the 000,... as so : "{"coords" : "123,456,789,112,113,114,115,116,17,18 "}".
Even Logger.log() returns me initial JSON input as expected. I really have no clue what is going on. I would really appreciate one's correspondence to help solving this issue. Thank you.
You can try directly assigning a JSON formatted string in your bodyJSON variable instead of parsing a set of string using JSON.parse.
Part of your code should look like this:
const bodyJSON = {
"coords" : "123,456,789,112,113,114,115,116"
}
I found simple workaround after all: just added the preceding pair of zeros 0,0,123,... at the very beginning of coords. This prevents so called culprit I defined in my issue. If anyone interested, the external app I am building currently, it's called Hotspot widget : play around with DOM, append a marker which coordinates (coords) being pushed through Apps-script and saved to Google Sheets. I am providing a link with instructions on how to set up one's own copy of the app. It's a decent start-off for learning Vanilla JavaScript basics including simple database approach on the fly. Thank you and good luck!
Hotspot widget on Github

Data frame error when converting iGraph to gexf object

I am trying to convert an iGraph object to a gexf object using the rgexf package so that I can write a file usable with Gephi, which I prefer for network visualization.
My iGraph object is created by reading in two CSVs: h.edges and h.nodes. There are both edge and node attributes. Once the files are read in, I create the iGraph object, calculate centrality measures and then attach the centrality measures as node attributes. The code looks like so:
iNet = graph_from_data_frame(d=h.edges, vertices = h.nodes, directed = F)
V(iNet)$degree = degree(iNet)
V(iNet)$eig = evcent(iNet)$vector
V(iNet)$betweenness = betweenness(iNet)
This appears to be working fine since I can do all the normal iGraph functions -- plot, calculate centralities, identify communities, etc. My problem comes when I try to convert this to a gexf object. I run the following code:
library(rgexf)
iNet.gexf igraph.to.gexf(iNet)
But get the below error message:
Error in `[.data.frame`(x, r, vars, drop = drop) :
undefined columns selected
Anyone know what's happening? Although I know the example here can all be done just by uploading the two CSVs straight to Gephi and running the calculations there, the end goal is to be able to attach iGraph's more robust calculations as attributes in ways that Gephi can't.

How to display a 2-D array as an html table for a Google Web App Page (using GAS)

Using a code.gs file, I have retrieved data from a Google Spreadsheet and put it into a 2-D array, and then manipulated the array a little bit (with things like transpose, condensing it, etc.).
I am trying to find out how to create a web app / web page that will display this 2-D array as an html table (subject to also being able to set table specifications, like width, color, etc.).
Does anyone have any ideas on how this can be done?
This will tell you how to do it, generally speaking. Just to display the HTML.
https://developers.google.com/apps-script/guides/html/
To choose specific data, you will want to use the .gs file to grab the spread sheet as you have already done. Now, when you're done modifying your array, store it in Properties Service, or Cache Service.
In your HTML page, write a JS function that calls back to the .gs file.
google.script.run
.withSuccessHandeler( function(array) { ... //We'll get to this in a moment... })
.getMyArray();
In your .gs file, write a function 'getMyArray'. Make it retrieve the array from Property or Cache Service and make it return the array.
Now, it the Success Handeler, use your array, and make it a table.
// 'array' here will be the return of .getMyArray()
.withSuccessHandler( function(array) {
for (var i in array) {
// Here, make every object into a string of the table you want
// i.e. "<table><td>" + array[i] + "<td> ..."
// Insert that string into some div.innerHTML
}
.getMyArray();
Easy as pi

Efficient way to work with multiple arrays in AS3

I'm creating a puzzle game in Flash/AS3. It uses about 30 to 40 groups of words. What I want to do is to load one random group of words in the beginning of the game and after using them, I want to load another random group and so on. What is the best way to solve this? Should I have multiple arrays which I will select from using switch statement based on random number or should I put them all into one multidimensional array? Every group of words could contain up to 2000 words.
It's better you use xml for creating wordgroups and to pull them easily. So, i mean, it's efficient you use multidimensional arrays.
var wordgroups:Array = new Array();
wordgroups.push(new Array("word1", "word3", "word5"), new Array("word2", "word4", "word6")); //you can easily create whole this multidimensional array with xml
wordgroups.shuffle(); //shuffles array (flashpunk library have this function, you may check it out and clone it's function if you can)
var selectedwordgroup:Array;
selectedwordgroup = wordgroups.pop(); //you can easily take a word group from that array and it removes selected wordgroup from the "wordgroups" array automatically with pop() function.
What about XML stuff
Thats a sample *.xml file:
<?xml version="1.0" encoding="utf-8"?>
<wordstuff>
<wordgroups>
<group>word1,word2,word3,word4,word5,word6</group>
<group>word7,word8,word9,word10,word11,word12</group>
<group>word13,word14,word15,word16,word17,word18</group>
</wordgroups>
</wordstuff>
and this is a sample to pull data from xml (you're going to embed your xml stuff to your game, so, you don't need any url loader object, you can embed it like you're embedding image files into your game, with a little difference)
then you can create arrays with this embedded xml
var pulledgroups:Array = new Array();
var my_xml:XML = WORDSTUFF //that's embedded file
var wordgroups:XMLList = my_xml.wordgroups.group;
var group:XML;
for each (group in wordgroups)
{
var pulledwordgroup:Array = group.split(",");
pulledgroups.push(pulledwordgroup);
}
THAT'S ALL, this single code paragraph, pulls all data at the same time

Create Linked List in AS3

how can I create a linked list in actionScript 3.0? I have a project that I should get some integer numbers from the user and sort them by a tree algorithm for example heap-sort and show the tree in flash, I think I should use linked list to sort the data by tree algorithms.
so anybody know how can I create a linked list which I can insert nodes, delete nodes and pass over the nodes, just like C++ linked list.
Thanks.
SA
You can use or take as an exmaple as3Commons linked list implementation. They provide very beautiful implementation with very good abstraction layer.
If you have access to the mx package, you could use mx.utils.LinkedList.
To construct the LinkedList you could repeatedly push or unshift items onto it.
var input:Array = getInput();
var myList:LinkedList = new LinkedList();
for each (var o:Object in input) {
myList.push(o);
}