Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
dataset_KOI_P
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
dataset_KOI_548 = d3.csv(KOI_548_Memo, d3.autoType)
Insert cell
KOI_548_Memo = "https://docs.google.com/spreadsheets/d/e/2PACX-1vSJKNgsvApVu4CO4G7BJgC1P75ygDU6D3S9wnr4I4x5hHhckcxOyGIhx-PdIIjDy86UjEw1cj6DngkZ/pub?output=csv"
Insert cell
dataset_KOI_548
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
viewof chart = {
const svg = d3
.create("svg")
.attr("width", 960)
.attr("height", 500)
.attr("viewBox", [0, 0, 960, 500])
.style("background-color", "#D1DCE2"); // 背景色を設定

const margin = { top: 20, right: 30, bottom: 30, left: 40 };
const width = 960 - margin.left - margin.right;
const height = 500 - margin.top - margin.bottom;

const g = svg
.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`);

// 日付データをパースする関数
const parseDate = d3.timeParse("%Y-%m-%d"); // 日付形式に合わせて調整してください

// データセットの日付をパース
dataset_KOI_548.forEach((d) => {
d.date = parseDate(d.date); // 日付形式に合わせて調整してください
});

const x = d3
.scaleBand()
.domain(dataset_KOI_548.map((d) => d.date))
.range([0, width])
.padding(0.1);

const y = d3.scaleLinear().domain([0, 1]).range([0, height]); // 上下を逆にするためにレンジを逆に設定

const color = d3
.scaleOrdinal()
.domain(["Falt", "Joke", "Succes", "Other"])
.range(["#80BEAF", "#EDB5D2", "#C8A8DA", "#708aa3"]); // 色を設定

const stack = d3
.stack()
.keys(["Falt", "Joke", "Succes", "Other"])
.order(d3.stackOrderNone)
.offset(d3.stackOffsetExpand);

const series = stack(dataset_KOI_548);

g.append("g")
.selectAll("g")
.data(series)
.join("g")
.attr("fill", (d) => color(d.key))
.selectAll("rect")
.data((d) => d)
.join("rect")
.attr("x", (d) => x(d.data.date))
.attr("y", (d) => y(d[0])) // y座標を逆に設定
.attr("height", (d) => y(d[1]) - y(d[0])) // 高さを逆に設定
.attr("width", x.bandwidth());

g.append("g")
.attr("transform", `translate(0,${height})`)
.call(d3.axisBottom(x).tickFormat(d3.timeFormat("%m/%d"))) // 日付フォーマットを変更
.selectAll("text")
.attr("transform", "rotate(45)")
.style("text-anchor", "start");

g.append("g").call(d3.axisLeft(y).ticks(10, "%"));

return svg.node();
}

Insert cell
<p class="main">
結果としては
</p>
Insert cell
a
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Cocking_Count = "https://docs.google.com/spreadsheets/d/e/2PACX-1vR-d3ZCMsTE1pkGL9-MnmlNIYmxCFzsK6zeh-PoqzsUjmHoP-D3VZDd6lTKmRZ8hvjv1nDQv561G_NY/pub?output=csv"
Insert cell
dataset_C_C = d3.csv(Cocking_Count, d3.autoType)
Insert cell
dataset_C_C
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
createSinglePieChart(dataset_C_C)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
dataset_W_H = d3.csv(Well_HA_trends, d3.autoType)
Insert cell
dataset_W_H
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
dataset_c_J
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more