Data x Ethnography x Visualization / Python
データとプログラミングと可視化で文化・社会・人間の不思議を研究しています。
Public
Edited
Dec 31, 2023
chart = addTooltips(
Plot.plot({
title: "NHK紅白歌合戦2023 生放送中の X投稿数の推移",
caption: "Xデータより徒然研究室（仮称）が2023年12月31日作成。",
height: 1030,
width: 900,
marginTop: 50,
marginBottom: 0,
marginLeft: 185,
// marginRight: -70,
style: {
// background: "rgb(250, 245, 240)",
background: "#FBFAF5",
fontSize: "12px",
color: "rgb(60, 60, 60)"
},
axis: null,
// X軸の設定
x: {
label: "検索日",
axis: "top",
round: true
// tickFormat: "%Y-%m-%dT%H:%M:%S" // 日本時間のフォーマットを指定
},
y: {
domain: [-20, d3.max(nhk_kouhaku, (d) => d.Tweet_Count) / (overlap + 1)]
},
// y: { axis: null, range: [2.5 * 17 + 50, (2.5 - overlap) * 17 - 2] }, // Y軸を非表示にし、レンジを設定
color: {
legend: true,
label: "15分あたりの投稿数",
scheme: "Turbo", //"PuRd",
style: { width: 180, background: "#FBFAF5" } // レジェンドの背景色を設定
},
fy: {
domain: nhk_kouhaku.map((d) => d.query) // preserve input order
},
facet: {
data: nhk_kouhaku,
y: "query"
},
marks: [
Plot.areaY(nhk_kouhaku, {
x: "Minute_Timestamp",
y: "Tweet_Count",
z: "query",
fill: "Tweet_Count",
fillOpacity: 0.65,
// fill: (d) => `rgba(0, 0, 255, ${calculateAlpha(d.Tweet_Count)})`, // Tweet_Countに基づいてアルファ値を計算して適用
sort: "Minute_Timestamp",
curve: "catmull-rom",
title: (d) =>
`${d.query} 時刻 ${d.Minute_Timestamp} 検索ボリューム: ${d.Tweet_Count}`
}),
Plot.lineY(nhk_kouhaku, {
x: "Minute_Timestamp",
y: "Tweet_Count",
z: "query",
curve: "catmull-rom",
strokeWidth: 0.5,
sort: "Minute_Timestamp",
stroke: "black" // ストロークカラーを黒に設定
}),
Plot.text(
nhk_kouhaku,
Plot.selectFirst({
x: d3.min(nhk_kouhaku, (d) => d.Minute_Timestamp),
text: "query",
dx: -5,
dy: 0,
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_kouhaku
excludequerys = [
// "宇多田ヒカル",
// "XG",
// "島津亜矢",
// "TWICE",
// "NewJeans",
// "日向坂46",
// "松田聖子",
// "和田アキ子",
// "INI",
// "imase",
// "King Gnu",
// "Da-iCE",
// "Vaundy",
// "back number",
// "藤井風",
// "ポルノグラフィティ",
// "米津玄師",
// "結束バンド",
// "中納良恵",
// "さかいゆう",
// "趣里",
// "サザンオールスターズ",
// "ジョングク",
// "スピッツ"
]
240101_0019_kouhaku_24hours.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
231231_2106_kouhaku_24hours.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
// データセットの各日時に9時間を加算
nhk_kouhaku.forEach((d) => {
d.Minute_Timestamp = d3.timeHour.offset(new Date(d.Minute_Timestamp), 9);
})
// traffic_NG = traffic_0.filter((row) => !excludequerys.includes(row.query))
// traffic = FileAttachment("230914_NHK_MUSIC_EXPO_interpolated_melt@2.csv.csv").csv({typed: true})
import { addTooltips } from "@mkfreeman/plot-tooltip"
// // Tweet_Countに基づいてアルファ値を計算する関数
// function calculateAlpha(Tweet_Count) {
// // Tweet_Countの値に応じてアルファ値を0から1の範囲で調整
// const minAlpha = 0.2; // 最小のアルファ値
// const maxAlpha = 0.9; // 最大のアルファ値
// const normalizedTweet_Count = (Tweet_Count - 0.2) / (0.9 - 0.2);
// return minAlpha + (maxAlpha - minAlpha) * normalizedTweet_Count;
// }
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.
