概要
wsl(wsl2じゃない)で、elixirやってみた。
練習問題、やってみた。
練習問題
Livebookでd3.jsでforceSimulationを表示せよ。
写真
サンプルコード
defmodule KinoD3.Force do
use Kino.JS
def new(html) do
Kino.JS.new(__MODULE__, html)
end
asset "main.js" do
"""
import "https://d3js.org/d3.v5.min.js";
function process_network(nodesData, linksData) {
var svg = d3.select('#out').append("svg").attr("width", 1200)
.attr("height", 600).append("g")
.attr("transform", "translate(" + 1200 + "," + 600 + ")");
var link = svg.selectAll("line").data(linksData).enter().append("line")
.attr("stroke-width", 1).attr("stroke", "black");
var node = svg.selectAll("g").data(nodesData).enter().append("g")
.call(d3.drag().on("start", dragstarted).on("drag", dragged).on("end", dragended));
node.append("circle").attr("r", 10).attr("stroke", "black").attr("stroke-width", 1.5)
.attr("fill", "peachpuff");
node.append("text").attr("text-anchor", "middle").attr("dominant-baseline", "middle")
.style("fill", "gray").text(function(d) {
return d.id;
}).append("title").text(function(d) {
return d.id;
});
var simulation = d3.forceSimulation(nodesData).velocityDecay(0.3).alpha(0.7)
.force("link", d3.forceLink().distance(250))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(200, 200));
simulation.nodes(nodesData).on("tick", ticked);
simulation.force("link").links(linksData);
function ticked() {
link.attr("x1", function(d) {
return d.source.x;
}).attr("y1", function(d) {
return d.source.y;
}).attr("x2", function(d) {
return d.target.x;
}).attr("y2", function(d) {
return d.target.y;
});
node.select("circle").attr("cx", function(d) {
return d.x;
}).attr("cy", function(d) {
return d.y;
});
node.select("text").attr("dx", function(d) {
return d.x;
}).attr("dy", function(d) {
return d.y + 40;
});
}
function dragstarted(d) {
if (!d3.event.active)
simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
function dragged(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
}
function dragended(d) {
if (!d3.event.active)
simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
}
}
export function init(ctx, json) {
const svgid = document.createElement("div");
svgid.id = "out";
ctx.root.appendChild(svgid);
var blob = new Blob([json], {
type: "text/csv"
});
var url = URL.createObjectURL(blob);
var no_regex = /No.([0-9]{1,3})/;
d3.csv(url).then(function(data) {
var node = [];
var link = [];
for (var i = 0; i < data.length; i++)
{
node.push({
id: data[i]['f'] + data[i]['e']
});
var o = no_regex.exec(data[i]['g']);
if (o)
{
link.push({
source: i,
target: o[1]
});
}
}
process_network(node, link);
});
}
"""
end
end
KinoD3.Force.new("""
a,b,c,d,e,f,g,h
1,1,1/15,30代,男,神奈川県,なし,38名特定、健康観察終了
2,2,1/24,40代,男,中国（武漢市）,なし,32名特定、健康観察終了
3,3,1/25,30代,女,中国（武漢市）,なし,７名特定、健康観察終了
4,4,1/26,40代,男,中国（武漢市）,No.19,２名特定、健康観察終了
5,5,1/28,40代,男,中国（武漢市）,なし,３名特定、健康観察終了
6,6,1/28,60代,男,奈良県,No.８、No.13,22名特定、健康観察終了
7,7,1/28,40代,女,中国（武漢市）,なし,２名特定、健康観察終了
8,8,1/29,40代,女,大阪府,No.６,２名特定、健康観察終了
9,10,1/30,50代,男,三重県,なし,３名特定、健康観察終了
10,11,1/30,30代,女,中国（湖南省）,なし,４名特定、健康観察終了
11,12,1/30,20代,女,京都府,なし,なし
12,13,1/31,20代,女,千葉県,No.６,１名特定、健康観察終了
13,17,2/4,30代,女,中国（武漢市）,No.20,６名特定、健康観察終了
14,19,2/4,50代,男,中国（湖北省）,No.４,調査中
15,20,2/5,40代,男,中国（武漢市）,No.17,６名特定、健康観察終了
16,21,2/5,20代,男,京都府,調査中,１名特定、健康観察終了
17,26,2/11,50代,男,神奈川県,調査中,調査中
18,27,2/13,80代,女,神奈川県,No.28、No.48,４名特定、健康観察実施中
19,28,2/13,70代,男,東京都,調査中,１名特定、健康観察実施中
20,29,2/13,50代,男,和歌山県,No.31,調査中
21,30,2/13,20代,男,千葉県,調査中,51名特定、健康観察実施中
22,31,2/14,70代,男,和歌山,No.29、No.54,16名特定、健康観察実施中
23,32,2/14,60代,女,沖縄県,なし,16名特定、健康観察実施中
24,33,2/14,50代,女,東京都,No.28,調査中
25,34,2/14,70代,男,東京都,No.28,調査中
26,35,2/14,60代,男,愛知県,調査中,３名特定、健康観察実施中
27,36,2/14,50代,男,北海道,なし,45名特定、健康観察実施中
28,37,2/14,30代,男,神奈川県,調査中,６名特定、健康観察実施中
29,38,2/14,50代,男,和歌山県,No.20,調査中
30,39,2/14,50代,女,和歌山県,No.29,調査中
31,40,2/15,60代,男,和歌山県,No.29、No.50、No.51,調査中
32,41,2/15,40代,男,東京都,No.45,調査中
33,42,2/15,60代,女,東京都,No.28,調査中
34,43,2/15,60代,女,愛知県,No.35、No.44、No.69、No.77,２名特定、健康観察実施中
35,44,2/16,60代,男,愛知県,No.43、No.53、No.59,７名特定、健康観察実施中
36,45,2/16,30代,男,東京都,No.41,14名特定、健康観察実施中
37,46,2/16,60代,男,調査中,なし,調査中
38,47,2/16,60代,男,調査中,No.28,調査中
39,48,2/17,40代,女,神奈川,No.27,４名特定、健康観察実施中
40,49,2/17,50代,男,東京都,調査中,調査中
41,50,2/17,80代,女,和歌山県,No.40,調査中
42,51,2/17,50代,男,和歌山県,No.40,調査中
43,52,2/17,50代,男,和歌山県,調査中,調査中
44,53,2/17,60代,男,愛知県,No.44、No.59,３名特定、健康観察実施中
45,54,2/18,60代,男,和歌山県,No.22,調査中
46,55,2/18,30代,男,和歌山県,調査中,調査中
47,56,2/18,80代,男,東京都,なし,調査中
48,57,2/18,20代,男,東京都,調査中,調査中
49,58,2/18,50代,男,東京都,調査中,調査中
50,59,2/18,60代,男,愛知県,No.44、No.53,３名特定、健康観察実施中
51,60,2/18,80代,男,神奈川県,No.27、No.61、No.78,２名特定、健康観察実施中
52,61,2/18,70代,男,神奈川県,No.60、No.78,６名特定、健康観察実施中
53,62,2/19,60代,男,神奈川県,調査中,２名特定、健康観察実施中
54,63,2/19,40代,男,北海道,No.72,26名特定、健康観察実施中
55,64,2/19,60代,男,北海道,No.101,69名特定、健康観察実施中
56,65,2/19,60代,男,沖縄県,不明,調査中
57,66,2/19,70代,男,東京都,No.67,調査中
58,67,2/19,70代,女,東京都,No.66,調査中
59,68,2/19,70代,女,東京都,調査中,調査中
60,69,2/19,50代,女,愛知県,No.43、No.77,４名特定、健康観察実施中
61,71,2/20,60代,男,福岡県,No.79,１名特定、健康観察実終了
62,72,2/20,40代,男,北海道,No.63,調査中
63,73,2/20,70代,女,千葉県,調査中,調査中
64,74,2/20,80代,男,沖縄県,調査中,調査中
65,75,2/20,40代,男,東京都,調査中,調査中
66,76,2/20,30代,男,埼玉県,調査中,調査中
67,77,2/20,80代,男,愛知県,No.43、No.69、No.167,３名特定、健康観察実施中
68,78,2/20,80代,男,神奈川県,No.60、No.61,調査中
69,79,2/20,60代,女,福岡県,No.71,１名特定、健康観察終了
70,80,2/21,10歳未満,男,北海道,No.81,調査中
71,81,2/21,10代,男,北海道,No.80,調査中
72,82,2/21,40代,女,北海道,調査中,38名特定、健康観察実施中
73,83,2/21,50代,男,石川県,不明,13名特定、健康観察実施中
74,85,2/21,50代,女,東京都,調査中,調査中
75,86,2/21,70代,女,東京都,調査中,調査中
76,87,2/21,50代,女,東京都,調査中,調査中
77,88,2/21,60代,男,千葉県,なし,調査中
78,89,2/21,80代,男,神奈川県,調査中,４名特定、健康観察実施中
79,90,2/21,70代,男,愛知県,No.43,１名特定、健康観察実施中
80,91,2/21,20代,女,愛知県,No.69,10名特定、健康観察実施中
81,92,2/22,20代,女,熊本県,No.93、No.142,11名特定、健康観察実施中
82,93,2/22,50代,男,熊本県,No.92、No.141、No.142,16名特定、健康観察実施中
83,94,2/21,60代,男,熊本県,なし,なし
84,95,2/22,40代,男,和歌山県,No.40,調査中
85,96,2/21,60代,女,千葉県,なし,調査中
86,97,2/22,50代,女,千葉県,なし,調査中
87,98,2/22,70代,女,北海道,調査中,調査中
88,99,2/22,80代,男,北海道,No.177、No.188,調査中
89,100,2/22,70代,男,北海道,調査中,調査中
90,101,2/22,50代,女,北海道,No.64,調査中
91,102,2/22,60代,男,北海道,調査中,調査中
92,103,2/22,50代,女,北海道,調査中,23名特定、健康観察実施中
93,104,2/22,10代,女,北海道,調査中,調査中
94,105,2/22,50代,女,北海道,調査中,調査中
95,106,2/22,60代,男,東京都,調査中,調査中
96,107,2/22,60代,女,愛知県,No.43,１名特定、健康観察実施中
97,108,2/22,40代,女,愛知県,No.43,なし
98,109,2/22,60代,男,愛知県,No.69,２名特定、健康観察実施中
99,110,2/22,60代,男,愛知県,No.69,６名特定、健康観察実施中
100,111,2/22,60代,女,栃木県,クルーズ船、下船後に発症,1名特定、健康観察実施中
101,112,2/22,50代,男,神奈川県,No.137、No.138、No.139、No.158,調査中
102,113,2/22,50代,男,北海道,No.177,調査中
103,114,2/22,70代,男,北海道,なし,調査中
104,115,2/23,70代,女,愛知県,No.43,調査中
105,116,2/23,70代,男,愛知県,No.43,調査中
106,117,2/23,40代,男,千葉県,なし,調査中
107,118,2/23,30代,男,北海道,調査中,調査中
108,119,2/23,60代,女,北海道,No.100,調査中
109,120,2/23,20代,男,北海道,調査中,調査中
110,121,2/23,70代,男,北海道,調査中,調査中
111,122,2/23,30代,女,北海道,調査中,20名特定、健康観察実施中
112,123,2/23,80代,男,北海道,No.98,調査中
113,124,2/23,40代,女,北海道,No.104,調査中
114,125,2/23,20代,女,北海道,調査中,調査中
115,126,2/24,40代,男,東京都,調査中,調査中
116,127,2/24,50代,男,東京都,調査中,調査中
117,128,2/24,60代,男,石川県,調査中,８名特定、健康観察実施中
118,129,2/24,70代,女,北海道,No.114,調査中
119,130,2/24,50代,男,北海道,No.174、No.175、No.177,調査中
120,131,2/24,20代,女,北海道,No.113,調査中
121,132,2/24,50代,男,北海道,調査中,調査中
122,133,2/24,50代,男,神奈川県,調査中,調査中
123,134,2/24,40代,男,東京都,調査中,調査中
124,135,2/24,50代,男,東京都,調査中,調査中
125,136,2/24,30代,男,東京都,調査中,調査中
126,137,2/22,50代,女,神奈川県,No.112,調査中
127,138,2/22,20代,女,神奈川県,No.112,調査中
128,139,2/22,20代,女,神奈川県,No.112,調査中
129,140,2/25,60代,男,長野県,調査中,調査中
130,141,2/25,50代,男,熊本県,No.93,９名特定、健康観察実施中
131,142,2/25,60代,女,熊本県,No.92、No.93,なし
132,143,2/25,60代,女,北海道,不明,調査中
133,144,2/25,50代,女,石川県,No.83,８名特定、健康観察実施中
134,145,2/25,70代,女,愛知県,No.43,調査中
135,146,2/25,70代,女,愛知県,No.43,調査中
136,147,2/25,40代,女,愛知県,No.69,調査中
137,148,2/25,60代,男,千葉県,クルーズ船、下船後に発症,１名特定、健康観察実施中
138,149,2/25,50代,男,千葉県,調査中,調査中
139,150,2/25,70代,男,千葉県,クルーズ船、下船後に発症,調査中
140,151,2/25,20代,男,北海道,No.177,調査中
141,152,2/25,20代,女,北海道,調査中,調査中
142,153,2/25,70代,男,北海道,調査中,調査中
143,154,2/25,確認中,確認中,北海道,調査中,調査中
144,155,2/26,70代,女,北海道,調査中,調査中
145,156,2/25,70代,女,北海道,調査中,調査中
146,157,2/26,40代,男,大阪府,なし,調査中
147,158,2/26,60代,男,神奈川県,No.112,調査中
148,159,2/26,40代,女,大阪府,No.８と、同一人物,調査中
149,160,調査中,80代,男,東京都,No.161,調査中
150,161,調査中,70代,男,東京都,No.160,調査中
151,162,調査中,70代,男,東京都,調査中,調査中
152,163,2/26,50代,男,愛知県,No.69,調査中
153,164,2/26,60代,男,愛知県,No.69,調査中
154,165,2/26,70代,男,愛知県,No.69,調査中
155,166,2/26,70代,男,愛知県,調査中,調査中
156,167,2/26,70代,女,愛知県,No.77,調査中
157,168,2/27,50代,男,岐阜県,No.169,９名特定、健康観察実施中
158,169,2/27,50代,女,大阪府,No.168,１名特定、健康観察実施中
159,170,2/27,50代,男,滋賀県,調査中,42名特定、健康観察実施中
160,171,2/27,50代,男,神奈川県,調査中,調査中
161,172,2/27,60代,女,千葉県,調査中,調査中
162,173,2/27,40代,男,大阪府,調査中,調査中
163,174,2/27,50代,男,北海道,No.130、No.177,調査中
164,175,2/27,50代,男,北海道,No.130、No.177,調査中
165,176,2/27,30代,男,北海道,調査中,調査中
166,177,2/27,70代,男,北海道,No.99、No.113、No.130、No.151、No.174、No.175,調査中
167,178,2/27,60代,男,北海道,調査中,調査中
168,179,2/27,40代,男,北海道,調査中,調査中
169,180,2/27,40代,男,北海道,調査中,調査中
170,181,2/27,10歳未満,男,北海道,調査中,調査中
171,182,2/27,30代,男,北海道,調査中,調査中
172,183,2/27,10歳未満,男,北海道,調査中,調査中
173,184,2/27,80代,男,北海道,調査中,調査中
174,185,2/27,30代,男,北海道,調査中,調査中
175,186,2/27,80代,男,北海道,調査中,調査中
176,187,2/27,60代,男,北海道,調査中,調査中
177,188,2/27,40代,女,北海道,No.99,調査中
178,189,2/27,60代,女,愛知県,調査中,調査中
179,190,2/27,60代,男,愛知県,調査中,調査中
180,191,2/27,50代,男,神奈川県,調査中,調査中
181,192,2/28,40代,女,神奈川県,調査中,調査中
182,193,2/28,20代,男,神奈川県,調査中,調査中
183,194,2/28,60代,男,静岡県,クルーズ船下船後に発症,１名特定、健康観察実施中
184,195,2/28,80代,女,北海道,調査中,調査中
185,196,2/28,10代未満,女,北海道,調査中,調査中
186,197,2/28,80代,男,北海道,調査中,調査中
187,198,2/28,60代,女,北海道,調査中,調査中
188,199,2/28,60代,男,北海道,No.100,調査中
189,200,2/28,60代,男,北海道,調査中,調査中
190,201,2/28,60代,女,北海道,調査中,調査中
191,202,2/28,40代,男,北海道,調査中,調査中
192,203,2/28,70代,男,北海道,調査中,調査中
193,204,2/28,60代,女,北海道,調査中,調査中
194,205,2/28,60代,男,北海道,調査中,調査中
195,206,2/28,60代,男,北海道,調査中,調査中
196,207,2/28,60代,男,愛知県,No.189,調査中
197,208,2/28,40代,女,大阪市,No.173,87名特定、健康観察中
198,209,2/28,30代,女,高知県,ライブハウス,16名特定、健康観察実施中
199,210,2/29,60代,男,新潟県,卓球スクール,54名特定、健康観察中
200,211,2/29,70代,男,宮城県,クルーズ船下船後に発症,１名特定、健康観察実施中
201,212,2/29,20代,女,東京都,No.56,調査中
202,213,2/29,90代,女,北海道,調査中,調査中
203,214,2/29,60代,女,北海道,調査中,調査中
204,215,2/29,30代,女,北海道,調査中,調査中
205,216,2/29,20代,女,北海道,調査中,調査中
206,217,2/29,70代,女,愛知県,調査中,調査中
207,218,3/1,60代,男,福岡県,調査中,調査中
208,219,3/1,70代,女,神奈川県,No.231、No.232,調査中
209,220,3/1,50代,女,神奈川県,No.230、No.232,調査中
210,221,3/1,20代,男,千葉県,No.230、No.231,調査中
211,222,3/1,20代,女,北海道,調査中,調査中
212,223,3/1,40代,女,北海道,展示会,調査中
213,224,3/1,50代,女,東京都,スポーツジム,調査中
214,225,3/1,70代,女,東京都,No.56,調査中
215,226,3/1,50代,男,神奈川県,No.227,調査中
216,227,3/1,50代,女,神奈川県,No.226,調査中
217,228,3/1,調査中,調査中,高知県,No.209,調査中
218,229,3/1,調査中,調査中,愛知県,No.217,調査中
219,230,3/1,調査中,調査中,愛知県,No.217,調査中
220,231,3/1,調査中,調査中,愛知県,調査中,調査中
221,232,3/1,40代,男,兵庫県,調査中,調査中
222,233,3/2,30代,女,高知県,No.209,調査中
223,234,3/2,40代,男,新潟県,卓球スクール,調査中
224,235,3/2,60代,男,北海道,調査中,調査中
225,236,3/2,60代,男,北海道,調査中,調査中
226,237,3/2,50代,男,北海道,調査中,調査中
227,238,3/2,40代,女,北海道,調査中,調査中
228,239,3/2,50代,男,北海道,調査中,調査中
229,240,3/2,50代,男,大阪府,No.157,調査中
230,241,3/2,40代,女,大阪府,No.240,調査中
231,242,3/3,30代,女,大分県,調査中,調査中
232,243,3/3,40代,男,兵庫県,調査中,調査中
233,244,3/3,30代,女,北海道,No.216,調査中
234,245,3/3,60代,女,北海道,No.216,調査中
235,246,3/3,60代,女,新潟県,卓球スクール,調査中
236,247,3/3,50代,女,新潟県,卓球スクール,調査中
237,248,3/3,40代,男,新潟県,卓球スクール,調査中
238,249,3/3,50代,女,京都府,ライブハウス,調査中
239,250,3/3,50代,女,東京都,調査中,調査中
240,251,3/3,50代,男,大阪府,調査中,調査中
241,252,3/3,40代,女,大阪府,ライブハウス,調査中
242,253,3/3,70代,女,愛知県,No.254,調査中
243,254,3/3,80代,男,愛知県,No.253,調査中
244,255,3/3,20代,女,愛知県,調査中,調査中
245,256,3/3,70代,男,愛知県,調査中,調査中
246,257,3/3,40代,女,兵庫県,ライブハウス,調査中
247,258,3/3,40代,男,山口県,調査中,調査中
248,259,3/4,40代,女,高知県,No.209,14名特定、健康観察中
249,260,3/4,60代,男,高知県,No.233,調査中
250,261,3/4,60代,女,高知県,No.233,調査中
251,262,3/4,10歳未満,男,高知県,No.233,16名特定、健康観察中
252,263,3/4,305,女,愛媛県,調査中,26名特定、健康観察中
253,264,3/4,70代,男,宮崎県,調査中,調査中
254,265,3/4,40代,男,北海道,調査中,調査中
255,266,3/4,60代,男,北海道,調査中,調査中
256,267,3/4,40代,男,北海道,調査中,調査中
257,268,3/4,80代,女,東京都,調査中,調査中
258,269,3/4,30代,女,東京都,ライブハウス,調査中
259,270,3/4,50代,男,東京都,調査中,調査中
260,271,3/4,40代,女,東京都,ライブハウス,調査中
261,272,3/4,80代,女,千葉県,No.224,調査中
262,273,3/4,60代,女,愛知県,No.164,調査中
263,274,3/4,50代,男,愛知県,No.217、No.230,調査中
264,275,3/4,70代,女,愛知県,No.229,調査中
265,276,3/4,80代,男,愛知県,No.229,調査中
266,277,3/4,80代,男,愛知県,No.230,調査中
267,278,3/4,80代,男,愛知県,No.230,調査中
268,279,3/4,50代,女,京都府,ライブハウス,調査中
269,280,3/4,50代,男,京都府,調査中,調査中
270,281,3/4,30代,女,大阪府,ライブハウス,調査中
271,282,3/4,30代,男,大阪府,ライブハウス,調査中
272,283,3/4,60代,女,大阪府,ライブハウス,調査中
273,284,3/4,50代,女,大阪府,No.251,調査中
274,285,3/4,50代,男,大阪府,調査中,調査中
275,286,3/4,30代,女,大阪府,調査中,調査中
276,287,3/4,70代,男,大阪府,調査中,調査中
277,288,3/5,60代,男,滋賀県,調査中,調査中
278,289,3/5,30代,男,京都府,調査中,調査中
279,290,3/4,60代,男,北海道,調査中,調査中
280,291,3/5,50代,女,神奈川県,調査中,調査中
281,292,3/5,50代,男,神奈川県,調査中,調査中
282,293,3/5,60代,男,埼玉県,調査中,調査中
283,294,3/5,50代,男,埼玉県,調査中,調査中
284,295,3/5,10歳未満,女,東京都,No.250,調査中
285,296,3/5,10歳未満,男,東京都,No.250,調査中
286,297,3/5,30代,女,東京都,No.250,調査中
287,298,3/5,20代,女,東京都,調査中,調査中
288,299,3/5,70代,女,東京都,No.168,調査中
289,300,3/5,90代,男,東京都,調査中,調査中
290,301,3/5,70代,男,東京都,調査中,調査中
291,302,3/5,80代,男,東京都,調査中,調査中
292,303,3/5,20代,女,和歌山県,ライブハウス,調査中
293,304,3/5,30代,男,愛知県,調査中,調査中
294,305,3/5,50代,男,愛知県,調査中,調査中
295,306,3/5,40代,女,愛知県,No.43,調査中
296,307,3/5,60代,男,愛知県,No.69,調査中
297,308,3/5,60代,女,愛知県,No.217,調査中
298,309,3/5,40代,女,愛知県,調査中,調査中
299,310,3/5,80代,女,愛知県,調査中,調査中
300,311,3/5,80代,男,愛知県,調査中,調査中
301,312,3/5,50代,女,愛知県,調査中,調査中
302,313,3/5,30代,女,栃木県,ライブハウス,調査中
""")
以上。