Data x Ethnography x Visualization / Python
データとプログラミングと可視化で文化・社会・人間の不思議を研究しています。
chart = addTooltips(
Plot.plot({
title: "NHK MUSIC EXPO 出演者の検索ボリューム推移を可視化してみる",
caption: "Google Trendsより徒然研究室（仮称）が2023年9月14日作成",
height: 675,
width: 1200,
marginTop: 50,
marginBottom: 0,
marginLeft: 220,
style: {
background: "rgb(250, 245, 240)",
fontSize: "13px",
color: "rgb(60, 60, 60)"
},
axis: null,
x: {
label: "放送時刻",
axis: "top",
round: true
},
y: {
domain: [-20, d3.max(traffic, (d) => d.value) / (overlap + 1)]
},
// y: { axis: null, range: [2.5 * 17 + 50, (2.5 - overlap) * 17 - 2] }, // Y軸を非表示にし、レンジを設定
color: {
legend: true,
label: "検索ボリューム",
scheme: "purd",
style: { background: "rgb(250, 245, 240)" } // レジェンドの背景色を設定
},
fy: {
domain: traffic.map((d) => d.keyword) // preserve input order
},
facet: {
data: traffic,
y: "keyword"
},
marks: [
Plot.areaY(traffic, {
x: "timestamp",
y: "value",
z: "keyword",
fill: "value",
fillOpacity: 0.85,
// fill: (d) => `rgba(0, 0, 255, ${calculateAlpha(d.value)})`, // valueに基づいてアルファ値を計算して適用
sort: "timestamp",
title: (d) => `時刻 ${d.timestamp}\検索ボリューム: ${d.value}`
}),
Plot.lineY(traffic, {
x: "timestamp",
y: "value",
z: "keyword",
strokeWidth: 1,
sort: "timestamp",
stroke: "black" // ストロークカラーを黒に設定
}),
Plot.text(
traffic,
Plot.selectFirst({
x: d3.min(traffic, (d) => d.timestamp),
text: "keyword",
dx: -4,
frameAnchor: "right",
fontFamily: "Noto Sans JP ExtraBold, sans-serif", // Noto Sans JP Bold を指定
fontWeight: "bold",
fontSize: 20 // フォントサイズを設定
})
)
]
})
)
traffic = _nhk_music_expo_interpolated_melt2Csv
230914_NHK_MUSIC_EXPO_interpolated_simple@10.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
// traffic = FileAttachment("230914_NHK_MUSIC_EXPO_interpolated_melt@2.csv.csv").csv({typed: true})
import { addTooltips } from "@mkfreeman/plot-tooltip"
// // valueに基づいてアルファ値を計算する関数
// function calculateAlpha(value) {
// // valueの値に応じてアルファ値を0から1の範囲で調整
// const minAlpha = 0.2; // 最小のアルファ値
// const maxAlpha = 0.9; // 最大のアルファ値
// const normalizedValue = (value - 0.2) / (0.9 - 0.2);
// return minAlpha + (maxAlpha - minAlpha) * normalizedValue;
// }
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.
