Data x Ethnography x Visualization / Python
データとプログラミングと可視化で文化・社会・人間の不思議を研究しています。
Public
Edited
Sep 29, 2023
chart = addTooltips(
Plot.plot({
// title: "NHK紅白歌合戦2023 出場予想歌手の検索ボリューム推移を可視化してみる",
caption:
"Google Trendsより徒然研究室（仮称）が2023年9月24日作成。出場歌手はKeiさん@Kei_radioの23年9月13日付ブログの予想を使用させていただいています。",
height: 1030,
width: 900,
marginTop: 50,
marginBottom: 0,
marginLeft: 185,
// marginRight: -70,
style: {
// background: "rgb(250, 245, 240)",
background: "#FBFAF5",
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: "Turbo", //"PuRd",
style: { width: 180, background: "#FBFAF5" } // レジェンドの背景色を設定
},
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.65,
// fill: (d) => `rgba(0, 0, 255, ${calculateAlpha(d.value)})`, // valueに基づいてアルファ値を計算して適用
sort: "timestamp",
// curve: "catmull-rom",
title: (d) =>
`${d.keyword} 時刻 ${d.timestamp} 検索ボリューム: ${d.value}`
}),
Plot.lineY(traffic, {
x: "timestamp",
y: "value",
z: "keyword",
curve: "catmull-rom",
strokeWidth: 1,
sort: "timestamp",
stroke: "black" // ストロークカラーを黒に設定
}),
Plot.text(
traffic,
Plot.selectFirst({
x: d3.min(traffic, (d) => d.timestamp),
text: "keyword",
dx: -5,
dy: -5,
frameAnchor: "right",
fontFamily: "Noto Sans JP ExtraBold, sans-serif", // Noto Sans JP Bold を指定
fontWeight: "bold",
fontSize: 15, // フォントサイズを設定
fill: "rgba(0, 0, 0, 0.7)" // フォントの色を黒にし、透明度を0.85に設定
})
)
]
})
)
traffic = _nhk__interpolate
230929_NHK紅白_予想歌手検索ボリューム推移_interpolate.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
230929_NHK紅白_予想歌手検索ボリューム推移_interpolate.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;
// }
230916_-New Jeans- OR NewJeans_-Mrs. GREEN APPLE- OR MrsGREENAPPLE_ENHYPEN_新しい学校のリーダーズ OR ATARASHIIGAKKO_-Travis Japan- OR TravisJapan_andTEAM_YOASOBI_#SEVENTEEN_30.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
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.
