Polis2024-08-20

2024-08-19

このAPIが返すデータをinitDataとして

code:js

// id->(x,y)の対応を作成

const idToCoordinates = {};

ids.forEach((id, index) => {

};

});

// クラスタごとのデータを作成

data = []

const clusterData = groupClusters.forEach((cluster, index) => {

cluster.members.forEach((id)=>{

data.push({

cluster: index,

});

});

});

// SVGの設定

const width = 600;

const height = 400;

const margin = {top: 20, right: 20, bottom: 30, left: 40};

const svg = d3.select("#scatter-plot")

.append("svg")

.attr("width", width + margin.left + margin.right)

.attr("height", height + margin.top + margin.bottom)

.append("g")

// スケールの設定

const xScale = d3.scaleLinear()

.domain(d3.extent(data, d => d.x))

const yScale = d3.scaleLinear()

.domain(d3.extent(data, d => d.y))

// 軸の追加

svg.append("g")

.call(d3.axisBottom(xScale));

svg.append("g")

.call(d3.axisLeft(yScale));

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

const colorScale = d3.scaleOrdinal(d3.schemeCategory10);

// 散布図のプロット

svg.selectAll("circle")

.data(data)

.enter()

.append("circle")

.attr("cx", d => xScale(d.x))

.attr("cy", d => yScale(d.y))

.attr("r", 5)

.style("fill", d => colorScale(d.cluster));

// ラベルの追加

svg.selectAll("text")

.data(data)

.enter()

.append("text")

.attr("x", d => xScale(d.x) + 10)

.attr("y", d => yScale(d.y))

.text(d => d.label)

.style("font-size", "12px");

// Convex Hull生成関数

console.log("hello");

// クラスターごとにデータをグループ化

const clusters = d3.group(data, d => d.cluster);

// Convex Hullの描画

const hull = d3.polygonHull;

clusters.forEach((points, cluster) => {

if (hullPoints) {

svg.append("path")

.datum(hullPoints)

.attr("fill", colorScale(cluster))

.attr("fill-opacity", 0.2)

.attr("stroke", colorScale(cluster))

.attr("stroke-width", 2);

}

});

https://scrapbox.io/files/66c419608324bc001c157fa8.png

https://scrapbox.io/files/66c41962d33e62001c128205.png

上下が逆なだけで同じクラスタ形状にはできてる