chart = {
const svg = d3
.create("svg")
.attr("preserveAspectRatio", "xMinYMin meet")
.attr("viewBox", "0 0 900 1030")
.style("background-color", "rgb(250, 245, 240)");
const gradientStartColor = customColorMap(1.0);
const gradientMidColor = customColorMap(0.6);
const gradientEndColor = customColorMap(0.0);
const gradient_light = svg
.append("linearGradient")
.attr("id", "gradLight")
.attr("x1", "0%")
.attr("y1", "0%")
.attr("x2", "0%")
.attr("y2", "100%");
// グラデーションの開始色を追加します
gradient_light
.append("stop")
.attr("offset", "0%")
.attr("stop-color", gradientStartColor);
// グラデーションの中間色を追加します
gradient_light
.append("stop")
.attr("offset", "60%")
.attr("stop-color", gradientMidColor);
// グラデーションの終了色を追加します
gradient_light
.append("stop")
.attr("offset", "95%")
.attr("stop-color", gradientEndColor);
// 暗いグラデーションを定義します
const gradient_dark = svg
.append("linearGradient")
.attr("id", "gradDark")
.attr("x1", "0%")
.attr("y1", "0%")
.attr("x2", "0%")
.attr("y2", "100%");
// グラデーションの開始色を追加します
gradient_dark
.append("stop")
.attr("offset", "0%")
.attr("stop-color", gradientStartColor);
// グラデーションの中間色を追加します
gradient_dark
.append("stop")
.attr("offset", "60%")
.attr("stop-color", gradientMidColor);
// グラデーションの終了色を追加します
gradient_dark
.append("stop")
.attr("offset", "95%")
.attr("stop-color", gradientEndColor);
// // // 明るいグラデーションを定義します
// // const gradient_light = svg
// // .append("linearGradient")
// // .attr("id", "gradLight")
// // .attr("x1", "0%")
// // .attr("y1", "0%")
// // .attr("x2", "0%")
// // .attr("y2", "100%");
// // // グラデーションの開始色を追加します
// // gradient_light
// // .append("stop")
// // .attr("offset", "0%")
// // .attr("stop-color", "#6a915c");
// // // グラデーションの中間色を追加します
// // gradient_light
// // .append("stop")
// // .attr("offset", "60%")
// // .attr("stop-color", "#92ac7d");
// // // グラデーションの終了色を追加します
// // gradient_light
// // .append("stop")
// // .attr("offset", "95%")
// // .attr("stop-color", "#b8c8a0");
// // 暗いグラデーションを定義します
// const gradient_dark = svg
// .append("linearGradient")
// .attr("id", "gradDark")
// .attr("x1", "0%")
// .attr("y1", "0%")
// .attr("x2", "0%")
// .attr("y2", "100%");
// // グラデーションの開始色を追加します
// gradient_dark
// .append("stop")
// .attr("offset", "0%")
// .attr("stop-color", "#b8c8a0");
// // グラデーションの中間色を追加します
// gradient_dark
// .append("stop")
// .attr("offset", "60%")
// .attr("stop-color", "#92ac7d");
// // グラデーションの終了色を追加します
// gradient_dark
// .append("stop")
// .attr("offset", "95%")
// .attr("stop-color", "#6a915c");
// x軸をSVGに追加します
svg.append("g").call(xAxis);
// 新しいY軸を右側に追加するための設定
const yAxisRight = d3
.axisRight(y)
.ticks(5) // 目盛りの数を設定
.tickSize(width); // 目盛り線の長さをグラフ全体の幅に設定
// Y軸を右側に追加
svg
.append("g")
.attr("class", "y-axis-right") // クラスを追加(任意)
.call(yAxisRight)
.attr("transform", `translate(${width},0)`); // 右側に配置
// データの各シリーズに対して要素を追加し、位置を調整します
const group = svg
.append("g")
.selectAll("g")
.data(data.series)
.join("g")
.attr("transform", (d) => `translate(0,${y(d.country) + 1})`)
// .on("mouseover", handleMouseOver) // マウスオーバー時のイベントを追加
// .on("mouseout", handleMouseOut); // マウスアウト時のイベントを追加
.attr("class", (d) => (d.country === "United States" ? "highlighted" : ""));
// 領域を描画します
group
.append("path")
.attr("fill", mode === "dark" ? "url(#gradDark)" : "url(#gradLight)")
.attr("fill-opacity", (d) => (d.country === "United States" ? 1.0 : 0.2))
.attr("d", (d) => area(d.viewss));
// 線を描画します
group
.append("path")
.attr("fill", "none")
.attr("stroke", (d) =>
d.country === "United States" ? "white" : "rgb(250, 245, 240)"
)
.attr("stroke-width", 2.5)
.attr("stroke-opacity", (d) => (d.country === "United States" ? 0.0 : 0.1))
.attr("d", (d) => line(d.viewss));
// // 領域を描画します
// group
// .append("path")
// .attr("fill", mode === "dark" ? "url(#gradDark)" : "url(#gradLight)")
// .attr("fill-opacity", 0.7)
// .attr("d", (d) => area(d.viewss));
// // 線を描画します
// group
// .append("path")
// .attr("fill", "none")
// // .attr("stroke", mode === "dark" ? "#f2e8d2" : "#544208")
// .attr("stroke", "white")
// .attr("stroke-width", 2.5) // 線の太さを設定します
// .attr("stroke-opacity", 0.5) // 線の透明度を設定します
// .attr("d", (d) => line(d.viewss));
// y軸をSVGに追加します
svg
.append("g")
.call(yAxis)
.selectAll("text")
.attr("text-anchor", "end")
.attr("transform", "translate(85, -15)")
.style("font-size", "22px")
.style("font-weight", "bold")
// .style("stroke", "rgb(250, 245, 240)") // ストロークの色を指定します
.style("stroke", "white") // ストロークの色を指定します
.style("opacity", 1.0) // ストロークの透明度を指定します
.style("stroke-width", "0.3px"); // ストロークの太さを指定します
// SVG要素を返します
return svg.node();
}