Data x Ethnography x Visualization / Python
データとプログラミングと可視化で文化・社会・人間の不思議を研究しています。
231019_youtube_Ado_唱_2023-09-01T01:30:04-07:00_to_2023-10-18T10:59:30-07:00@2.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
// プロットを描画
Plot.plot({
// グラフ内側の余白を設定
inset: 20,
// グラフの幅を指定
width: 900,
// グラフの高さを指定
height: 1030,
marginBottom: 45,
r: { range: [0, 55] },
style: {
background: "rgb(250, 245, 240)",
fontSize: "17px",
color: "deepgray"
},
x: {
// tickFormat: d3.timeFormat("%-y/%-m/%-d"), // この行を追加
label: "投稿日"
},
marks: [
Plot.text(
// グラフ内の任意の位置にテキストをプロットするコード
[
`YouTubeデータより徒然研究室（仮称）作成。データ取得日は2023年10月19日。マーカーの大きさはデータ取得時の視聴回数に対応する。9月5日以降の869本の総計は1億6101万515回`
],
{
frameAnchor: "top-right",
fontSize: 10,
fontFamily: "Noto Sans JP, sans-serif", // Noto Sans JP Bold を指定
fontWeight: "300",
fill: "black",
dy: 5
}
),
Plot.text([`YouTubeにおける\nAdo「唱」\n関連動画の投稿数 推移`], {
frameAnchor: "top-right",
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(
presidents,
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",
// title: "title",
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.title
}\n視聴回数: ${d.views.toLocaleString()}\nリリース日: ${formattedDate}`;
}
})
)
]
})
// データを定義
chart = {
var data = presidents;
// 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.title);
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(
presidents,
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",
title: "title",
tip: true,
// 透明度を指定（0から1の値、0が完全に透明、1が不透明）
opacity: 0.7,
})
),
// "views"を表示するためのPlot.textを追加
Plot.text(
presidents,
Plot.dodgeY({
anchor: "bottom",
x: "release_date",
r: (datum) => Math.sqrt(datum.views) * 2 + 4, // マーカーのサイズに応じて適切なオフセットを調整,
text: "views"
}),
{ field: "views", baseline: "top", dy: -10 } // "views"のテキストを表示する位置を調整
),
],
});
presidents = _youtube_search_results_yoasobiIdol
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.
