Data x Ethnography x Visualization / Python
データとプログラミングと可視化で文化・社会・人間の不思議を研究しています。
Public
Edited
Dec 25, 2023
chart = addTooltips(
Plot.plot({
// title: "NHK紅白歌合戦2023 出場予想歌手の検索ボリューム推移を可視化してみる",
caption: "Xデータより徒然研究室（仮称）が2023年12月25日作成。",
height: 600,
width: 1200,
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: {
label: "検索日",
axis: "top",
round: true
},
y: {
domain: [-20, d3.max(traffic, (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: traffic.map((d) => d.query) // preserve input order
},
facet: {
data: traffic,
y: "query"
},
marks: [
Plot.areaY(traffic, {
x: "Minute_Timestamp",
y: "Tweet_Count",
z: "query",
fill: "Tweet_Count",
fillOpacity: 0.65,
// fill: (d) => `rgba(0, 0, 255, ${calculateAlpha(d.value)})`, // valueに基づいてアルファ値を計算して適用
sort: "Minute_Timestamp",
// curve: "catmull-rom",
title: (d) =>
`${d.query} 時刻 ${d.Minute_Timestamp} 検索ボリューム: ${d.Tweet_Count}`
}),
Plot.lineY(traffic, {
x: "Minute_Timestamp",
y: "Tweet_Count",
z: "query",
curve: "catmull-rom",
strokeWidth: 0.5,
sort: "Minute_Timestamp",
stroke: "black" // ストロークカラーを黒に設定
}),
Plot.text(
traffic,
Plot.selectFirst({
x: d3.min(traffic, (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: 22, // フォントサイズを設定
fill: "rgba(0, 0, 0, 0.7)" // フォントの色を黒にし、透明度を0.85に設定
})
)
]
})
)
traffic = _nhk__interpolate
231225_令和ロマン_シシガシラ_さや香_カベポスター_マユリカ_ヤーレンズ_真空ジェシカ_ダンビラムーチョ_くらげ_モグライダー_24hours.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
231225_令和ロマン_シシガシラ_さや香_カベポスター_マユリカ_ヤーレンズ_真空ジェシカ_ダンビラムーチョ_くらげ_モグライダー_24hours.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.
// データセットの各日時に9時間を加算
traffic.forEach((d) => {
d.Minute_Timestamp = d3.timeHour.offset(new Date(d.Minute_Timestamp), 9);
})
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.
