D3.jsでcontours図を描く

from 応用数学1：差分法

D3.jsでcontours図を作るサンプル

https://wizardace.com/d3-contours/ を改造したもの

Himmelblau函数のプロットとなる

https://en.wikipedia.org/wiki/Himmelblau's_function

最適化プログラムのテストに使われるらしい

https://gyazo.com/e3afa7ebae050b7f6ad584068c3f73cd

変更点

最新のECMAScriptの書き方に変えた

ESModulesにした

SVGの大きさは指定しなかった

<g>で少しだけ属性指定をまとめた

TypeScriptで書こうかと思ったが、めんどいのでやめたtakker.icon

code:index.html

<!DOCTYPE html>

<html>

<head>

<title>D3 Contours Plot</title>

import { select, selectAll } from "https://cdn.skypack.dev/d3-selection@3.0.0"

import { hsv } from "https://cdn.skypack.dev/d3-hsv@0.1.0";

import { contours } from "https://cdn.skypack.dev/d3-contour@4.0.2";

import { geoIdentity, geoPath } from "https://cdn.skypack.dev/d3-geo@3.1.0";

import { scaleSequential } from "https://cdn.skypack.dev/d3-scale@4.0.2";

// 1. データの準備

const n = 240;

const m = 125;

const values = [];

{

const himmelblaus = (x, y) =>

(x * x + y - 11) * (x * x + y - 11) + (x + y * y - 7) * (x + y * y - 7);

for(let j = 0; j < m; ++j) {

for(let i = 0; i < n; ++i) {

const x = i / (n - 1) * 10 - 5;

const y = j / (m - 1) * 10 - 5;

values.push(himmelblaus(x, y));

}

// contours図の設定

const contours_ = contours()

// x方向にn分割, y方向にm分割

.size(n, m)

// 7ごとに色を変える

.thresholds(

...Array(20).keys().map((p) => 7 * p)

);

// カラースケールの設定

const color = scaleSequential(

(t) => hsv(t*230, 1, 0.5)

)

.domain(140,0);

// contours図を描く

const width = 800;

const height = 600;

const svg = select("#app")

.append("svg")

// widthとheightはHTML側で自動調整する

.attr("viewBox", 0 0 ${width} ${height})

.append("g")

.attr("stroke", "white")

.attr("stroke-width", "0.5")

.selectAll("path")

.data(contours_(values))

.enter()

.append("path")

// スケールの調節

.attr("d", geoPath(geoIdentity().scale(width / n)))

.attr("fill", (d) => color(d.value));

</script>

</head>

<body>

</body>

</html>

#2023-01-16 17:20:03