{"id":5360,"date":"2017-02-14T07:23:19","date_gmt":"2017-02-13T22:23:19","guid":{"rendered":"https:\/\/gunmagisgeek.com\/wordpress\/?p=5360"},"modified":"2025-05-20T17:23:30","modified_gmt":"2025-05-20T08:23:30","slug":"%e6%84%9f%e6%9f%93%e7%97%87%e3%81%ae%e4%bc%9d%e6%92%ad%e3%81%a8%e9%9b%86%e5%9b%a3%e5%85%8d%e7%96%ab%e5%8a%b9%e6%9e%9c%e3%82%92%e8%a6%96%e8%a6%9a%e5%8c%96%e3%81%99%e3%82%8b%e3%80%82","status":"publish","type":"post","link":"https:\/\/gunmagisgeek.com\/blog\/javascript\/5360","title":{"rendered":"\u611f\u67d3\u75c7\u306e\u4f1d\u64ad\u3068\u96c6\u56e3\u514d\u75ab\u52b9\u679c\u3092\u8996\u899a\u5316\u3059\u308b\u3002"},"content":{"rendered":"\n<p>\u5148\u65e5\u3001\u305f\u307e\u305f\u307e\u898b\u3064\u3051\u3066\u8cfc\u5165\u3057\u305f\u300c<a href=\"https:\/\/leanpub.com\/natureincode\">Nature in Code<\/a>\u300d\u306b\u63b2\u8f09\u3055\u308c\u3066\u3044\u305f\u3001\u611f\u67d3\u75c7\u30b7\u30df\u30e5\u30ec\u30fc\u30b7\u30e7\u30f3(SIR\u30e2\u30c7\u30eb)\u304c\u9762\u767d\u305d\u3046\u3060\u3063\u305f\u306e\u3067\u4f5c\u6210\u3057\u3066\u307f\u305f\u3002<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><a href=\"https:\/\/gunmagisgeek.com\/example\/nature_in_code\/sir\/\" data-type=\"link\" data-id=\"https:\/\/gunmagisgeek.com\/example\/nature_in_code\/sir\/\">demo<\/a><\/p>\n\n\n\n<p>\u767d\u3044\u30bb\u30eb\u304c\u611f\u67d3\u53ef\u80fd\u8005\uff08\u611f\u67d3\u3059\u308b\u524d\u306e\u5065\u5eb7\u306a\u4eba\uff09\u3001\u8d64\u3044\u30bb\u30eb\u304c\u611f\u67d3\u8005\u3001\u7dd1\u306e\u30bb\u30eb\u304c\u9694\u96e2\u8005\uff08\u6b7b\u4ea1\u3001\u3082\u3057\u304f\u306f\u5feb\u5fa9\u3057\u3066\u514d\u75ab\u3092\u7372\u5f97\u3057\u305f\u4eba\uff09\u3068\u306a\u308b\u3002<\/p>\n\n\n\n<p>\u53c2\u8003\u66f8\u306e\u30b3\u30fc\u30c9\u3092\u5c11\u3057\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3057\u3066\u3001\u611f\u67d3\u7387\u3084\u9694\u96e2\u7387\u3092\u8abf\u6574\u3067\u304d\u308b\u3088\u3046\u306b\u3057\u305f\u3002<br>\u611f\u67d3\u7387\u304c\u9ad8\u3044\u3068\u65e9\u304f\u5e83\u7bc4\u56f2\u306b\u611f\u67d3\u304c\u5e83\u304c\u308a\u3001\u9694\u96e2\u7387\u304c\u9ad8\u3044\u3068\u65e9\u304f\u53ce\u675f\u3059\u308b\u3002<br>\u6570\u5024\u306f\u3001\u300c\u521d\u671f\u611f\u67d3\u8005\u300d\u4ee5\u5916\u306f\u3001\uff10\u301c\uff11\u306e\u5024\u3067\u5272\u5408\u3092\u793a\u3059\u3002\u4f8b\u3048\u3070\u3001\u611f\u67d3\u7387\u304c1\u306e\u5834\u5408\u3001\u96a3\u63a5\u3059\u308b\u611f\u67d3\u53ef\u80fd\u8005\u306f100%\u611f\u67d3\u3059\u308b\u3002<\/p>\n\n\n\n<p>\u521d\u671f\u514d\u75ab\u4fdd\u6301\u8005\u7387\u306f\u3001\u611f\u67d3\u304c\u5e83\u304c\u308b\u524d\u306b\u514d\u75ab\u3092\u7372\u5f97\u3057\u3066\u3044\u308b\u4eba\uff08\u7070\u8272\uff09\u306e\u5272\u5408\u3002<br>\u521d\u671f\u514d\u75ab\u4fdd\u6301\u8005\u304c\u591a\u3044\u3068\u3001\u62e1\u6563\u305b\u305a\u306b\u65e9\u671f\u306b\u53ce\u675f\u3059\u308b\u3002\uff08\u96c6\u56e3\u514d\u75ab\u52b9\u679c\uff09<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"http:\/\/shimz.me\/example\/nature_in_code\/sir\/\"><img loading=\"lazy\" decoding=\"async\" width=\"597\" height=\"600\" src=\"http:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2017\/02\/SIR_-simulator2.png\" alt=\"SIR_ simulator2\" class=\"wp-image-5362\" srcset=\"https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2017\/02\/SIR_-simulator2.png 597w, https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2017\/02\/SIR_-simulator2-150x150.png 150w, https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2017\/02\/SIR_-simulator2-149x150.png 149w, https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2017\/02\/SIR_-simulator2-100x100.png 100w\" sizes=\"auto, (max-width: 597px) 100vw, 597px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>\u3053\u306e\u30b7\u30df\u30e5\u30ec\u30fc\u30bf\u30fc\u3060\u3068\u521d\u671f\u9694\u96e2\u8005\u304c\u30e9\u30f3\u30c0\u30e0\u306b\u914d\u7f6e\u3055\u308c\u308b\u305f\u3081\u3001\u96c6\u56e3\u514d\u75ab\u7387\u306f\u5165\u529b\u3057\u305f\u6570\u5024\u3088\u308a\u4f4e\u304f\u306a\u308b\u3002<br>\uff08\u91cd\u8907\u3057\u305f\u30bb\u30eb\u306b\u914d\u7f6e\u3055\u308c\u308b\u3053\u3068\u304c\u3042\u308b\u306e\u3067\u30011\u3092\u5165\u529b\u3057\u3066\u3082100%\u306b\u306a\u3089\u306a\u3044)<\/p>\n\n\n\n<p>\u6539\u826f\u306e\u4f59\u5730\u304c\u591a\u3044\u3051\u3069\u3001\u6570\u5024\u3092\u3044\u308d\u3044\u308d\u8abf\u6574\u3057\u3066\u8a66\u3057\u3066\u307f\u308b\u3068\u3001\u306a\u304b\u306a\u304b\u697d\u3057\u3044\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9<\/h2>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:js decode:true \">!(function(){\n    \"use strict\";\n    \n    var width = 600;\n    var height = 600;\n    var svg = d3.select('svg')\n          .attr('width', width)\n          .attr('height', height);\n        \n        \n    var grid_length = 100;\n    var grid = [];\n    var temp_grid = [];\n    var point = 3\n    var touch = 0.75;\n    var beta = 0.1;\n    var gamma = 0.05;\n    var timer;    \n    var flag = true;\n    \n    init();\n    \n    d3.select(\"#point\").on(\"change\", init);\n    d3.select(\"#touch\").on(\"change\", init);\n    \n    d3.select(\"#start\").on(\"click\", function(){\n        beta = d3.select(\"#beta\").node().value;\n        gamma = d3.select(\"#gamma\").node().value;\n        \n        function simulate_and_visualize() {        \n            run_time_step();\n            update_grid(grid,[\"S\",\"white\",\"I\",\"red\",\"R\",\"green\", \"W\", \"gray\"]);\n        }\n        if(flag) timer = setInterval(simulate_and_visualize, 50);\n        \n        flag = false;\n    });\n    \n    d3.select(\"#stop\").on(\"click\", function(){\n        clearInterval(timer);\n        flag = true;\n    });\n    \n    d3.select(\"#reset\").on(\"click\", function(){\n        clearInterval(timer);\n        init_grid();\n        update_grid(grid,[\"S\",\"white\",\"I\",\"red\",\"R\",\"green\", \"W\", \"gray\"]);\n        flag = true;\n    });\n    \n    \n    function init() {\n        clearInterval(timer);\n        point = d3.select(\"#point\").node().value;\n        touch = d3.select(\"#touch\").node().value;\n        init_grid();\n        update_grid(grid,[\"S\",\"white\",\"I\",\"red\",\"R\",\"green\", \"W\", \"gray\"]);    \n    }\n    \n    \n    function get_random_int(min, max) {\n        return Math.floor(Math.random()*(max - min + 1)) + min;\n    }\n    \n    function init_grid() {\n        for(var i=0; i &lt; grid_length; i = i + 1){\n            grid[i] = [];\n            for (var ii = 0; ii &lt; grid_length; ii = ii + 1){\n                grid[i][ii] = \"S\";\n            }\n        }\n        for (var i = 0; i &lt; (grid_length*grid_length) * (1 - touch ) ; i++) {\n            grid[get_random_int(0, grid_length-1)][get_random_int(0, grid_length-1)] = \"W\";\n        }\n        for (var i = 0; i &lt; point ; i++) {\n            grid[get_random_int(0, grid_length-1)][get_random_int(0, grid_length-1)] = \"I\";\n        }\n    }\n    \n    \n    function run_time_step() {\n        for(var i=0; i &lt; grid_length; i = i + 1){\n            temp_grid[i] = [];\n            for (var ii = 0; ii &lt; grid_length; ii = ii + 1){\n                temp_grid[i][ii] = grid[i][ii];\n            }\n        }\n        for (i=0; i &lt; grid_length; i = i+1){\n            for(ii = 0; ii &lt; grid_length; ii = ii + 1){\n                if (grid[i][ii] == \"I\"){\n                    expose_neighbors(i, ii);\n                    tray_recovery(i, ii);\n                }\n            }\n        }\n        for (i=0; i &lt; grid_length; i = i+1){\n            for(ii = 0; ii &lt; grid_length; ii = ii + 1){\n                grid[i][ii] = temp_grid[i][ii];\n            }\n        }\n    }\n    \n    function expose_neighbors(i, ii) {\n        for(var n_i = i-1; n_i &lt;= i+1; n_i = n_i + 1){\n            for(var n_ii = ii-1; n_ii &lt;= ii+1; n_ii = n_ii + 1){\n                if (n_i == i &amp;&amp; n_ii == ii){\n                    continue;                \n                }\n                try_infection(get_bounded_index(n_i), get_bounded_index(n_ii));\n            }\n        }\n    }\n    \n    function try_infection(i, ii) {\n        if (grid[i][ii] == \"S\"){\n            if (Math.random() &lt; beta){\n                temp_grid[i][ii] = \"I\"\n            }\n        }\n    }\n    \n    function tray_recovery(i, ii) {\n        if (grid[i][ii] == \"I\"){\n            if (Math.random() &lt; gamma){\n                temp_grid[i][ii] = \"R\"\n            }\n        }\n        \n    }\n    \n    function get_bounded_index(index){\n        var bounded_index = index;\n        if (index &lt; 0){\n            bounded_index = index + grid_length;\n        }\n        if (index &gt;= grid_length){\n            bounded_index = index - grid_length;\n        }\n        \n        return bounded_index;\n    }\n    \n    function update_grid(data,colors) {\n        var grid_length = data.length;\n    \n        var rw = Math.floor(width\/grid_length);\n        var rh = Math.floor(height\/grid_length);\n    \n        var g = svg.selectAll('g').data(data)\n                \n        var newG = g.enter().append('g')\n                .attr('transform', function (d, i) {\n                  return 'translate(0, ' + (width\/grid_length) * i + ')';\n                });\n    \n        var rect = g.merge(newG).selectAll('rect')\n                .data(function (d) {\n                  return d;\n                })\n                \n        var newRect = rect.enter().append('rect')\n                .attr('x', function (d, i) {\n                  return (width\/grid_length) * i;\n                })\n                .attr('width', rw)\n                .attr('height', rh)\n            \n                \n        rect.merge(newRect).attr('class',function(d) {\n                  return d;\n                });\n        \n        for (var i = 0; i &lt; colors.length; i = i + 2) {\n            d3.selectAll(\".\"+colors[i]).style(\"fill\",colors[i+1]);\t\n        }\n    }\n    \n    \n}());<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u5148\u65e5\u3001\u305f\u307e\u305f\u307e\u898b\u3064\u3051\u3066\u8cfc\u5165\u3057\u305f\u300cNature in&hellip;<\/p>\n","protected":false},"author":1,"featured_media":5361,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[69,6],"tags":[],"class_list":["post-5360","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-d3v4","category-javascript","has-post-thumbnail-archive"],"_links":{"self":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/5360","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/comments?post=5360"}],"version-history":[{"count":2,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/5360\/revisions"}],"predecessor-version":[{"id":8451,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/5360\/revisions\/8451"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media\/5361"}],"wp:attachment":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media?parent=5360"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/categories?post=5360"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/tags?post=5360"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}