javascriptでJSONのファイルを開きたい

Question

前提・実現したいこと

Pythonで出力した結果をJSONファイルにし、D3.jsで可視化したいと考えています。
(使用するグラフ : https://gist.github.com/nbremer/6506614)
リンクの先でも確認できますが、今回このグラフが要求するデータ形式が、以下のようになっています。

グラフのサンプルコード

var w = 500,
	h = 500;

var colorscale = d3.scale.category10();

//Legend titles
var LegendOptions = ['Smartphone','Tablet'];

//Data(ここからがデータです)
var d = [
		  [
			{axis:"Email",value:0.59},
			{axis:"Social Networks",value:0.56},
			{axis:"Internet Banking",value:0.42},
			{axis:"News Sportsites",value:0.34},
			{axis:"Search Engine",value:0.48},
			{axis:"View Shopping sites",value:0.14},
			{axis:"Paying Online",value:0.11},
			{axis:"Buy Online",value:0.05},
			{axis:"Stream Music",value:0.07},
			{axis:"Online Gaming",value:0.12},
			{axis:"Navigation",value:0.27},
			{axis:"App connected to TV program",value:0.03},
			{axis:"Offline Gaming",value:0.12},
			{axis:"Photo Video",value:0.4},
			{axis:"Reading",value:0.03},
			{axis:"Listen Music",value:0.22},
			{axis:"Watch TV",value:0.03},
			{axis:"TV Movies Streaming",value:0.03},
			{axis:"Listen Radio",value:0.07},
			{axis:"Sending Money",value:0.18},
			{axis:"Other",value:0.07},
			{axis:"Use less Once week",value:0.08}
		  ],[
			{axis:"Email",value:0.48},
			{axis:"Social Networks",value:0.41},
			{axis:"Internet Banking",value:0.27},
			{axis:"News Sportsites",value:0.28},
			{axis:"Search Engine",value:0.46},
			{axis:"View Shopping sites",value:0.29},
			{axis:"Paying Online",value:0.11},
			{axis:"Buy Online",value:0.14},
			{axis:"Stream Music",value:0.05},
			{axis:"Online Gaming",value:0.19},
			{axis:"Navigation",value:0.14},
			{axis:"App connected to TV program",value:0.06},
			{axis:"Offline Gaming",value:0.24},
			{axis:"Photo Video",value:0.17},
			{axis:"Reading",value:0.15},
			{axis:"Listen Music",value:0.12},
			{axis:"Watch TV",value:0.1},
			{axis:"TV Movies Streaming",value:0.14},
			{axis:"Listen Radio",value:0.06},
			{axis:"Sending Money",value:0.16},
			{axis:"Other",value:0.07},
			{axis:"Use less Once week",value:0.17}
		  ]
		];

//Options for the Radar chart, other than default
var mycfg = {
  w: w,
  h: h,
  maxValue: 0.6,
  levels: 6,
  ExtraWidthX: 300
}

~~~以下省略~~

ご確認いただけると思いますが、//Data以降のaxisとvalueが割り振られている辞書型のものが、必要なデータになります。
そこで私はpythonの分析から、以下のようなJSONを出力できるようにしました。
（axisは少し変えています）

Pythonの分析結果を出力したもの

[
  {axis: "A" ,value: 0.01931858096241658},
  {axis: "B" ,value: 0.1378644186863365},
  {axis: "C" ,value: 0.0644538110291535},
  {axis: "D" ,value: 0.03371970495258166},
  {axis: "E" ,value: 0.08184053389532842},
  {axis: "F" ,value: 0.02704601334738321},
  {axis: "G" ,value: 0.010713031260976466},
  {axis: "H" ,value: 0.013523006673691605},
  {axis: "I" ,value: 0.051457674745345974},
  {axis: "J" ,value: 0.02985598876009835},
  {axis: "K" ,value: 0.03758342114506498},
  {axis: "L" ,value: 0.12363891815946611},
  {axis: "M" ,value: 0.013347383210396909},
  {axis: "N" ,value: 0.05321390937829294},
  {axis: "O" ,value: 0.07727432384966632},
  {axis: "P" ,value: 0.013347383210396909},
  {axis: "Q" ,value: 0.06638566912539515},
  {axis: "R" ,value: 0.01282051282051282},
  {axis: "S" ,value: 0.026343519494204427},
  {axis: "T" ,value: 0.05690200210748156},
  {axis: "U" ,value: 0.033192834562697573},
  {axis: "V" ,value: 0.016157358623112048}
]

サンプルと要素の数は異なっても、グラフの関数は動くようで、このJSONをソースコードにコピペすると描画されました。今回やりたいことは、グラフのサンプルコードを書き換えて、上のJSONファイルを読み込んで描画するような形にしたいのです。

試したこと

jsを扱い始めてまだ数日なのですが、jsでJSONのファイルを読み込むのは基本らしく、様々なサイトで手法が紹介されていました。今回、サンプルのように読み込みたいデータが二つ、data1.jsonとdata2.jsonがあったとして、以下のようにサンプルコードを書き換えました。しかしグラフが表示されません。

var w = 500,
	h = 500;

var colorscale = d3.scale.category10();

//Legend titles
var LegendOptions = ['The entire period','This Week'];

//Data(書き換えたところ)
$.getJSON("data1.json", {name: "data1"}, function(data)
$.getJSON("data2.json", {name: "data2"}, function(data)
var d = [ data1, data2 ];

//Options for the Radar chart, other than default
var mycfg = {
  w: w,
  h: h,
    levels: 6,
  ExtraWidthX: 300
}



~~~以下省略~~

わかる人が見るとムチャクチャなコードかもしれませんが、d=[]の中で外部のJSONを複数引用するにはどうすればいいのでしょうか。ご教授お願いいたします。

補足情報

使用したいグラフ(Radar Chart or Spider Chart)
https://gist.github.com/nbremer/6506614

Answer 1

これは動きませんね。
駄目な所はこの3行連続です。

//Data(書き換えたところ)
$.getJSON("data1.json", {name: "data1"}, function(data)
$.getJSON("data2.json", {name: "data2"}, function(data)
var d = [ data1, data2 ];

1行目、関数はfunction (data) {}のように始まりと終わりを{}という波括弧で包まなければなりません。
コンソールに下記のように入力すると構文エラーになる事を確認しました。

function (data) 1
// Uncaught SyntaxError: Unexpected token (

2行目、同様の問題で関数を{}で包みましょうという話とは別に、
引数が1行目と同じdataになっています。
JavaScriptは関数を宣言する度に変数スコープというものが作られ、
そこで存在しない変数や引数を参照した場合、無ければ上のスコープに探しに行きます。

しかし、今回は両方同じdataという引数名であり、
data2の方しか読み込めません。

3行目、data1とdata2という変数名がいきなり登場していますが、これはなんですか？？？
このdata1やdata2に紐づくはずなのは、function (data)ですよね。

1行目をfunction (data1) {、
2行目をfunction (data2) {で始めるようにしてください。
もちろん全ての処理が終わったらgetJSONの(と共に開いた波括弧をきっちり閉じてくださいね。

Comments

[WasedaGhost]

僕のような初心者にも、丁寧に解説して下さってありがとうございました！
これからも勉強を続けたいと思います。