wslでelixir その172

概要

wsl(wsl2じゃない)で、elixirやってみた。
練習問題やってみた。

練習問題

Livebookの、kino.jsで、D3.jsでtableを動作させよ。

写真

サンプルコード

defmodule KinoTBL.D3js do
	use Kino.JS
	def new(json) do
		Kino.JS.new(__MODULE__, json)
	end
	asset "main.js" do
		"""
		import "https://d3js.org/d3.v5.js"
		export function init(ctx, json) {
      ctx.importCSS("main.css");
      ctx.root.innerHTML = '<div class="app" id="stage" ></div>';
      var objs = JSON.parse(json);
      var table = d3.select("#stage").insert("table", ":first-child");
      var thead = table.append("thead");
      var tbody = table.append("tbody");
      thead.append("tr").selectAll("th").data(d3.entries(objs[0])).enter().append("th").on("click", function(d, i) {
        createTableBody(d.key);
      }).text(function(d) {
        return d.key;
      });
      createTableBody("id");
function createTableBody(sortKey) {
    objs.sort(function(x, y) {
        return d3.descending(x[sortKey], y[sortKey]);
    });
    tbody.selectAll("tr").data(objs).enter().append("tr").selectAll("td").data(function(d) {
        return d3.entries(d);
    }).enter().append("td").text(function(d) {
        return d.value;
    });
    tbody.selectAll("tr").data(objs).selectAll("td").data(function(d) {
        return d3.entries(d);
    }).text(function(d) {
        return d.value;
    });
}
    		}
		"""
	end
  asset "main.css" do
    """
.app {
  background: #dff;
  font: 12px sans-serif;
}
th {
    background-color: #Cff;
}
table, td, th {
    border-collapse: collapse;
    border: 1px #CCC dotted;
    padding: 6px;
}
    """
  end
end

KinoTBL.D3js.new("""
 [{
    "車名": "インサイト", 
    "車重": 820,
    "エンジン": "直4 1.0Ｌ",
    "パワー": 70,
    "全長": 3940, 
    "全幅": 1695,
    "全高": 1355,
    "ホイールベース": 2400,
    "Kg/ps": 11.7
}, {
    "車名": "クリオRS", 
    "車重": 1060,
    "エンジン": "直4 2.0Ｌ",
    "パワー": 172,
    "全長": 3770, 
    "全幅": 1695,
    "全高": 1410,
    "ホイールベース": 2475,
    "Kg/ps": 6.2
}, {
    "車名": "カプチーノ", 
    "車重": 700,
    "エンジン": "直3 0.7ＬT",
    "パワー": 64,
    "全長": 3295, 
    "全幅": 1395,
    "全高": 1185,
    "ホイールベース": 2060,
    "Kg/ps": 10.9
}, {
    "車名": "スマート・K", 
    "車重": 750,
    "エンジン": "直3 0.6Ｌ",
    "パワー": 55,
    "全長": 2560, 
    "全幅": 1470,
    "全高": 1550,
    "ホイールベース": 1865,
    "Kg/ps": 13.6
}, {
    "車名": "ポルシェ・カイエン", 
    "車重": 2500,
    "エンジン": "V8 4.5Ｌ",
    "パワー": 340,
    "全長": 4800, 
    "全幅": 1780,
    "全高": 1700,
    "ホイールベース": 2855,
    "Kg/ps": 7.4
}, {
    "車名": "BMW・Z4", 
    "車重": 1380,
    "エンジン": "直６ 2.5Ｌ",
    "パワー": 192,
    "全長": 4110, 
    "全幅": 1950,
    "全高": 1285,
    "ホイールベース": 2495,
    "Kg/ps": 7.2
}, {
    "車名": "マセラティ・ビトルボ", 
    "車重": 1170,
    "エンジン": "V６ 2.5Ｌ",
    "パワー": 200,
    "全長": 4150, 
    "全幅": 1715,
    "全高": 1305,
    "ホイールベース": 2515,
    "Kg/ps": 5.9
}, {
    "車名": "フェアレディZ", 
    "車重": 975,
    "エンジン": "直６ 2.0Ｌ",
    "パワー": 130,
    "全長": 4115, 
    "全幅": 1620,    
    "全高": 1285,
    "ホイールベース": 2305,
    "Kg/ps": 7.5
}, {
    "車名": "スーパーセブン", 
    "車重": 500,
    "エンジン": "直４ 1.6Ｌ",
    "パワー": 100,
    "全長": 3360, 
    "全幅": 1585,
    "全高": 1120,
    "ホイールベース": 2220,
    "Kg/ps": 5.0
}, {
    "車名": "ジネッタＧ４",
    "車重": 550,
    "エンジン": "直４ 1.7Ｌ",
    "パワー": 135, 
    "全長": 3400, 
    "全幅": 1450, 
    "全高": 1200,
    "ホイールベース": 2027,
    "Kg/ps": 4.1
}, {
    "車名": "トヨタＳ８００", 
    "車重": 580, 
    "エンジン": "並２ 0.8Ｌ", 
    "パワー": 45, 
    "全長": 3580,
    "全幅": 1465,
    "全高": 1175,
    "ホイールベース": 2000,
    "Kg/ps": 12.9
}, {
    "車名": "オースティン・スプライトMk1",
    "車重": 602,
    "エンジン": "直４ 1.0Ｌ",
    "パワー": 43, 
    "全長": 3490,
    "全幅": 1350,
    "全高": 1250,
    "ホイールベース": 2030,
    "Kg/ps": 14.0
}, {
    "車名": "トミーカイラＺＺ", 
    "車重": 670,
    "エンジン": "直４ 2.0Ｌ",
    "パワー": 180,
    "全長": 3630,
    "全幅": 1740,
    "全高": 1100,
    "ホイールベース": 2375,
    "Kg/ps": 3.7
}, {
    "車名": "ロータス・エランＳ２",
    "車重": 674,
    "エンジン": "直４ 1.6Ｌ", 
    "パワー": 105,
    "全長": 3683,
    "全幅": 1422,
    "全高": 1149,
    "ホイールベース": 2134,
    "Kg/ps": 6.4
}, {
    "車名": "ロータス・エリーゼ",
    "車重": 690, 
    "エンジン": "直４ 1.8Ｌ",
    "パワー": 118,
    "全長": 3726,
    "全幅": 1701,
    "全高": 1175, 
    "ホイールベース": 2300,
    "Kg/ps": 5.8
}, {
    "車名": "アルピーヌＡ１１０", 
    "車重": 710,
    "エンジン": "直４ 1.6Ｌ", 
    "パワー": 122,
    "全長": 3850,
    "全幅": 1550, 
    "全高": 1220,
    "ホイールベース": 2100,
    "Kg/ps": 5.8
}, {
    "車名": "フィアット・アバルトＯＴ",
    "車重": 725,
    "エンジン": "直４ 0.9Ｌ",
    "パワー": 62,
    "全長": 3780,
    "全幅": 1500,
    "全高": 1220,
    "ホイールベース": 2030,
    "Kg/ps": 11.7
}, {
    "車名": "ロータス・ヨーロッパ", 
    "車重": 730, 
    "エンジン": "直４ 1.6Ｌ",
    "パワー": 126,
    "全長": 4000,
    "全幅": 1638,
    "全高": 1080,
    "ホイールベース": 2335,
    "Kg/ps": 5.8
}, {
    "車名": "ホンダＳ８００Ｍ", 
    "車重": 755, 
    "エンジン": "直４ 0.8Ｌ", 
    "パワー": 70, 
    "全長": 3335,
    "全幅": 1400,
    "全高": 1215,
    "ホイールベース": 2000,
    "Kg/ps": 10.8
}, {
    "車名": "ホンダ・ビート", 
    "車重": 760, 
    "エンジン": "直３ 0.7Ｌ",
    "パワー": 64, 
    "全長": 3295,
    "全幅": 1395,
    "全高": 1175,
    "ホイールベース": 2280,
    "Kg/ps": 11.9
}, {
    "車名": "ルノー８ゴルディーニ",
    "車重": 795,
    "エンジン": "直４ 1.1Ｌ", 
    "パワー": 95, 
    "全長": 3445, 
    "全幅": 1500, 
    "全高": 1370,
    "ホイールベース": 2270,
    "Kg/ps": 8.4
}, {
    "車名": "カルマン・ギア", 
    "車重": 800,
    "エンジン": "直４ 1.2Ｌ",
    "パワー": 34,
    "全長": 4140, 
    "全幅": 1630,
    "全高": 1320,
    "ホイールベース": 2400,
    "Kg/ps": 23.5
}, {
    "車名": "リアイアント・シミター",
    "車重": 839,
    "エンジン": "直４ 1.6Ｌ",
    "パワー": 96, 
    "全長": 3886,
    "全幅": 1582,
    "全高": 1240,
    "ホイールベース": 2133,
    "Kg/ps": 8.7
}, {
    "車名": "フィアット・ウーノ",
    "車重": 845,
    "エンジン": "直４ 1.3Ｌ",
    "パワー": 105,
    "全長": 3645,
    "全幅": 1560,
    "全高": 1410,
    "ホイールベース": 2362,
    "Kg/ps": 8.0
}, {
    "車名": "ポルシェ９１４", 
    "車重": 895,
    "エンジン": "並４ 2.0Ｌ",
    "パワー": 100,
    "全長": 3985,
    "全幅": 1650,
    "全高": 1260,
    "ホイールベース": 2400,
    "Kg/ps": 9.0
}, {
    "車名": "フェアレディ２０００", 
    "車重": 930,
    "エンジン": "直４ 2.0Ｌ",
    "パワー": 145,
    "全長": 3910,
    "全幅": 1495,
    "全高": 1300, 
    "ホイールベース": 2280,
    "Kg/ps": 6.4
}, {
    "車名": "コスモスポーツ", 
    "車重": 940, 
    "エンジン": "2RE 1.0Ｌ",
    "パワー": 110,
    "全長": 4140, 
    "全幅": 1595,
    "全高": 1165,
    "ホイールベース": 2200,
    "Kg/ps": 8.5
}, {
    "車名": "アルファロメオ・ジュリア", 
    "車重": 950, 
    "エンジン": "直４ 1.6Ｌ",
    "パワー": 115,
    "全長": 4076,
    "全幅": 1587,
    "全高": 1320,
    "ホイールベース": 2350,
    "Kg/ps": 8.3
}, {
    "車名": "ランチア・ストラトス",
    "車重": 980,
    "エンジン": "Ｖ６ 2.4Ｌ",
    "パワー": 190,
    "全長": 3710,
    "全幅": 1750,
    "全高": 1114,
    "ホイールベース": 2180,
    "Kg/ps": 5.2
}, {
    "車名": "フィアットＸ１／９", 
    "車重": 980,
    "エンジン": "直４ 1.5Ｌ",
    "パワー": 66,
    "全長": 3970,
    "全幅": 1575,
    "全高": 1170,
    "ホイールベース": 2200,
    "Kg/ps": 14.8
}, {
    "車名": "ユーノス・ロードスター", 
    "車重": 990,
    "エンジン": "直４ 1.8Ｌ",
    "パワー": 130,
    "全長": 3955, 
    "全幅": 1675,
    "全高": 1235,
    "ホイールベース": 2265,
    "Kg/ps": 7.6
}, {
    "車名": "ＢＭＷ２００２ｔｉｉ", 
    "車重": 1010,
    "エンジン": "直４ 2.0Ｌ",
    "パワー": 130,
    "全長": 4210,
    "全幅": 1590,
    "全高": 1410,
    "ホイールベース": 2500,
    "Kg/ps": 7.8
}, {
    "車名": "ポルシェ９１１", 
    "車重": 1030,
    "エンジン": "並６ 2.0Ｌ",
    "パワー": 160, 
    "全長": 4163,
    "全幅": 1610, 
    "全高": 1320,
    "ホイールベース": 2211,
    "Kg/ps": 6.4
}, {
    "車名": "アルピーヌＡ３１０", 
    "車重": 1040,
    "エンジン": "Ｖ６ 2.6Ｌ",
    "パワー": 150,
    "全長": 4250, 
    "全幅": 1770,
    "全高": 1150,
    "ホイールベース": 2270,
    "Kg/ps": 6.9
}, {
    "車名": "いすず１１７クーペ",
    "車重": 1050,
    "エンジン": "直４ 1.6Ｌ",
    "パワー": 115, 
    "全長": 4280,
    "全幅": 1600,
    "全高": 1320,
    "ホイールベース": 2500,
    "Kg/ps": 9.1
}, {
    "車名": "タルボ・マトラ・ムレーナ", 
    "車重": 1050, 
    "エンジン": "直４ 2.2Ｌ",
    "パワー": 118,
    "全長": 4070,
    "全幅": 1750,
    "全高": 1220,
    "ホイールベース": 2430,
    "Kg/ps": 8.9
}, {
    "車名": "フィアット・バルケッタ",
    "車重": 1060, 
    "エンジン": "直４ 1.8Ｌ", 
    "パワー": 130,
    "全長": 3916,
    "全幅": 1640,
    "全高": 1265,
    "ホイールベース": 2275,
    "Kg/ps": 8.2
}, {
    "車名": "ディーノ２４６ＧＴ", 
    "車重": 1080,
    "エンジン": "直４ 2.4Ｌ",
    "パワー": 195,
    "全長": 4240,
    "全幅": 1700,
    "全高": 1140, 
    "ホイールベース": 2340,
    "Kg/ps": 5.5
}, {
    "車名": "ＭＧＦ",
    "車重": 1090,
    "エンジン": "直４ 1.8Ｌ", 
    "パワー": 120,
    "全長": 3915,
    "全幅": 1640,
    "全高": 1260,
    "ホイールベース": 2375,
    "Kg/ps": 9.1
}, {
    "車名": "アルファ・ロメオ・スパイダー", 
    "車重": 1090,
    "エンジン": "直４ 2.0Ｌ",
    "パワー": 126,
    "全長": 4270,
    "全幅": 1630,
    "全高": 1290,
    "ホイールベース": 2250,
    "Kg/ps": 8.7
}, {
    "車名": "トヨタ２０００ＧＴ", 
    "車重": 1120, 
    "エンジン": "直６ 2.0Ｌ",
    "パワー": 150,
    "全長": 4175,
    "全幅": 1600, 
    "全高": 1160,
    "ホイールベース": 2330,
    "Kg/ps": 7.5
}, {
    "車名": "ベンツ２３０ＳＬ", 
    "車重": 1210,
    "エンジン": "直６ 2.3Ｌ",
    "パワー": 170, 
    "全長": 4285,
    "全幅": 1760,
    "全高": 1320,
    "ホイールベース": 2400,
    "Kg/ps": 7.1
}, {
    "車名": "ＳＬＫ", 
    "車重": 1270,
    "エンジン": "直４ 2.0Ｌ",
    "パワー": 136,
    "全長": 3995,
    "全幅": 1715,
    "全高": 1265, 
    "ホイールベース": 2400,
    "Kg/ps": 9.3
}, {
    "車名": "デロリアン", 
    "車重": 1288,
    "エンジン": "Ｖ６ 2.8Ｌ",
    "パワー": 130,
    "全長": 4267,
    "全幅": 1990,
    "全高": 1140,
    "ホイールベース": 2408,
    "Kg/ps": 9.9
}, {
    "車名": "ＳＡＡＢ９００ｉ", 
    "車重": 1300,
    "エンジン": "直４ 2.0Ｌ",
    "パワー": 126,
    "全長": 4680,
    "全幅": 1690,
    "全高": 1420, 
    "ホイールベース": 2515,
    "Kg/ps": 10.3
}, {
    "車名": "ランチア・デルタ・インテグラーレ",
    "車重": 1340,
    "エンジン": "直４ 2.0Ｌ", 
    "パワー": 215, 
    "全長": 3898,
    "全幅": 1767,
    "全高": 1365,
    "ホイールベース": 2479,
    "Kg/ps": 6.2
}, {
    "車名": "デ・トマソ・パンテーラ", 
    "車重": 1455,
    "エンジン": "Ｖ８ 5.8Ｌ",
    "パワー": 330,
    "全長": 4270,
    "全幅": 1810, 
    "全高": 1120, 
    "ホイールベース": 2515,
    "Kg/ps": 4.4
}]
""")

以上。