Data x Ethnography x Visualization / Python
データとプログラミングと可視化で文化・社会・人間の不思議を研究しています。
// プロットを描画
Plot.plot({
// グラフ内側の余白を設定
inset: 20,
// グラフの幅を指定
width: 900,
// グラフの高さを指定
height: 1030,
marginBottom: 45,
r: { range: [0, 13] },
style: {
background: "rgb(250, 245, 240)",
fontSize: "17px",
color: "deepgray"
},
x: {
// tickFormat: d3.timeFormat("%-y/%-m/%-d"), // この行を追加
label: "リリース年月日"
},
marks: [
Plot.text(
// グラフ内の任意の位置にテキストをプロットするコード
[
`YouTubeデータより徒然研究室（仮称）作成。ランキング対象期間はNov 17 - Nov 23, 2023。サムネイルの大きさは視聴回数に対応する。`
],
{
frameAnchor: "top-left",
fontSize: 10,
fontFamily: "Noto Sans JP, sans-serif", // Noto Sans JP Bold を指定
fontWeight: "300",
fill: "black",
dy: 5
}
),
Plot.text(
[`YouTube\nWeekly楽曲ランキング\n登場曲のリリース年を\n可視化してみる`],
{
frameAnchor: "top-left",
fontSize: 50,
fontFamily: "Noto Sans JP, sans-serif", // Noto Sans JP Bold を指定
fontWeight: "700",
fill: "deeppink",
dy: 30,
lineHeight: 1.1
}
),
Plot.frame({ anchor: "bottom" }),
Plot.image(
data,
Plot.dodgeY({
anchor: "bottom",
x: "Release_Date",
r: (datum) => Math.sqrt(datum.Views) * 2, // Viewsの平方根に比例してrを大きくする
preserveAspectRatio: "xMidYMin slice", // try not to clip heads
src: "Thumbnail",
// Track_Name: "Track_Name",
tip: true,
title: (d) => {
const date = new Date(d.Release_Date);
const formattedDate = `${date.getFullYear()}-${(date.getMonth() + 1)
.toString()
.padStart(2, "0")}-${date.getDate().toString().padStart(2, "0")}`;
return `タイトル: ${
d.Track_Name
}\nby: ${d.Artist_Names.toLocaleString()}\n視聴回数: ${d.Views.toLocaleString()}\nリリース日: ${formattedDate}`;
}
})
),
// "Track_Name"を表示するためのPlot.textを追加
Plot.text(
data,
Plot.dodgeY({
anchor: "bottom",
x: "Release_Date",
r: (datum) => Math.sqrt(datum.Views) * 2,
text: "Track_Name",
fontSize: 9, // フォントサイズを小さく設定
dy: -10 // マーカーの上に配置
}),
{ field: "Track_Name", baseline: "bottom" }
)
]
})
// データを定義
chart = {
var data = data;
// SVG要素の幅と高さを定義
var width = 1200;
var height = 600;
// SVG要素を作成
var svg = d3
.select(DOM.svg(width, height))
.style("background", "rgb(250, 245, 240)");
// グラフタイトルを追加
svg
.append("text")
.attr("x", width / 2)
.attr("y", 30)
.attr("text-anchor", "middle")
.text("YouTubeにおけるYOASOBI「アイドル」 関連動画の視聴回数");
// データをバインドして画像要素を作成
var images = svg
.selectAll("image")
.data(data)
.enter()
.append("image")
.attr("xlink:href", function (d) {
return d.Thumbnail;
})
.attr("width", function (d) {
return Math.sqrt(d.Views) * 2;
})
.attr("height", function (d) {
return Math.sqrt(d.Views) * 2;
})
.attr("preserveAspectRatio", "xMidYMin slice")
.attr("x", function (d) {
return d.Release_Date;
})
.attr("y", height - 30);
// ツールチップを追加
images
.on("mouseover", function (event, d) {
d3.select(this).style("cursor", "pointer");
var tooltip = d3
.select(svg.node().parentNode)
.append("div")
.style("position", "absolute")
.style("z-index", "10")
.style("background-color", "white")
.style("border", "solid")
.style("border-width", "1px")
.style("border-radius", "5px")
.style("padding", "5px")
.text(d.Track_Name);
tooltip
.style("left", event.pageX + 10 + "px")
.style("top", event.pageY - 28 + "px");
})
.on("mouseout", function () {
d3.select(this).style("cursor", "default");
d3.select(svg.node().parentNode).select("div").remove();
});
return svg.node();
}
// プロットを描画
Plot.plot({
// グラフ内側の余白を設定
inset: 20,
// グラフの幅を指定
width: 1200,
// グラフの高さを指定
height: 675,
r: { range: [0, 40] },
style: `background:rgb(250, 245, 240)`,
marks: [
Plot.frame({ anchor: "bottom" }),
Plot.image(
data,
Plot.dodgeY({
anchor: "bottom",
x: "Release_Date",
r: (datum) => Math.sqrt(datum.Views) * 2, // Viewsの平方根に比例してrを大きくする
preserveAspectRatio: "xMidYMin slice", // try not to clip heads
src: "Thumbnail",
Track_Name: "Track_Name",
tip: true,
// 透明度を指定（0から1の値、0が完全に透明、1が不透明）
opacity: 0.7,
})
),
// "Views"を表示するためのPlot.textを追加
Plot.text(
data,
Plot.dodgeY({
anchor: "bottom",
x: "Release_Date",
r: (datum) => Math.sqrt(datum.Views) * 2 + 4, // マーカーのサイズに応じて適切なオフセットを調整,
text: "Views"
}),
{ field: "Views", baseline: "top", dy: -10 } // "Views"のテキストを表示する位置を調整
),
],
});
20231123_topsongs_weelkly@4.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.
