25:["$","title",null,{"children":"ボーカロイドの使用遍歴を辿る | TMU Dataviz Class | Observable"}] 4b:T6bd,table = { var names = Object.keys(compare2024_2[0]); const table = d3 .create("table") .style("display", "block") .style("max-height", "400px") .style("overflow-y", "scroll") .style("width", "1000px") .style("margin", "20px auto") .style("table-layout", "auto") .style("border", "1px solid #ccc") .style("border-collapse", "collapse"); // 境界線をきれいに // ヘッダー const thead = table.append("thead").append("tr"); // 番号列のヘッダー thead .append("th") .style("min-width", "50px") .style("background-color", "#aaa") .style("color", "#fff") .style("border-right", "1px solid #ccc"); // 縦線を追加 // データのヘッダー thead .selectAll("th.data-header") .data(names) .join("th") .attr("class", "data-header") .text((d) => d) .style("min-width", "125px") .style("background-color", "#aaa") .style("color", "#fff") .style("border-right", "1px solid #ccc"); // 縦線を追加 // ボディ const tbody = table.append("tbody"); tbody .selectAll("tr") .data(compare2024_2) .join("tr") .each(function (d, i) { const row = d3.select(this); // 行番号を追加 row .append("td") .text(i + 1) .style("font-weight", "bold") .style("text-align", "center") .style("border-right", "1px solid #ccc"); // 縦線を追加 // データを追加 row .selectAll("td.data-cell") .data(Object.values(d)) .join("td") .attr("class", "data-cell") .text((d) => d) .style("border-right", "1px solid #ccc"); // 縦線を追加 }); return table.node(); }4c:Te66,{ const allYears = d3.range(2007, 2025, 1); // 2007年～2024年の全ての年 const allVocaloids = new Set(compare.flatMap((d) => d.VOCALOID.split(","))); const dataByYearAndVocaloid = compare.reduce((acc, d) => { const year = d.Year; const vocals = d.VOCALOID.split(","); acc.set(year, acc.get(year) || new Map()); vocals.reduce((map, vocal) => { map.set(vocal, (map.get(vocal) || 0) + 1); return map; }, acc.get(year)); return acc; }, new Map()); let dataset = Array.from(allVocaloids).flatMap((vocal) => allYears.map((year) => ({ year, vocal, count: dataByYearAndVocaloid.get(year)?.get(vocal) ?? 0 })) ); const width = 800; const height = 400; const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .style("display", "block") // 中央寄せのためのスタイルを追加 .style("margin", "auto"); const margin = { top: 50, right: 50, bottom: 50, left: 50 }; const x = d3 .scaleLinear() .domain(d3.extent(dataset, (d) => d.year)) .range([margin.left, width - margin.right]); const y = d3 .scaleLinear() .domain([0, d3.max(dataset, (d) => d.count) + 3]) .range([height - margin.bottom, margin.top]); const xAxis = d3 .axisBottom() .scale(x) .tickValues(d3.range(2007, 2025, 1)) // 2007年～2024年のすべての年を表示 .tickFormat((d) => `${d}年`); const yAxis = d3 .axisLeft() .scale(y) .tickSize(-(width - margin.left - margin.right)); svg .append("rect") .attr("width", width) .attr("height", height) .attr("fill", "hsl(220,10%,95%)"); svg .append("g") .attr("class", "xAxis") .attr("transform", `translate(0, ${height - margin.bottom})`) .call(xAxis); svg .append("g") .attr("class", "yAxis") .attr("transform", `translate(${margin.left}, 0)`) .call(yAxis); svg .selectAll("g.xAxis, g.yAxis") .selectAll("line, path") .attr("stroke", "black") .attr("opacity", 0.3); svg .append("text") .attr("x", margin.right + 3) .attr("y", margin.top - 5) .text("曲数") .attr("font-family", "sans-serif") .attr("font-size", 9) .attr("fill", "#000"); svg .append("text") .attr("x", 630) .attr("y", 30) .text("「年ごとのVOCALOID曲数」") .attr("font-family", "sans-serif") .attr("fill", "#000") .attr("opacity", 0.8) .attr("font-size", 9); const color = d3.scaleOrdinal(d3.schemeCategory10); const line = d3 .line() .x((d) => x(d.year)) .y((d) => y(d.count)); const groupedData = d3.group(dataset, (d) => d.vocal); svg .selectAll("path.line") .data(groupedData) .join("path") .attr("fill", "none") .attr("stroke", ([vocal]) => color(vocal)) .attr("stroke-width", 2) .attr("d", ([, data]) => line(data)) .attr("class", "line"); // 重複を排除して一意のVOCALOIDだけを表示 const nameVocaloids = Array.from( new Set(dataset.filter((d) => d.count > 20).map((d) => d.vocal)) ); const years = [2019, 2013, 2020, 2014, 2008]; const c = [60, 26, 24, 16, 22]; svg .selectAll("text.a") .data(nameVocaloids) // 重複を排除したVOCALOIDリストをデータとして使う .join("text") .attr("x", (d, i) => x(years[i])) // 配列の年をx座標に対応させる .attr("y", (d, i) => y(c[i]) - 10) .text((d) => d) // VOCALOIDの名前を表示 .attr("font-family", "sans-serif") .attr("text-anchor", "middle") .attr("font-weight", "bold") .attr("font-size", 12) .attr("fill", "dimgray"); return svg.node(); }4d:Ta2f,function createChart(selectedMedia) { const dataset = selectedMedia === "YouTube" ? youtube2024 : niconico2024; const dataByYearAndVocaloid = dataset.reduce((acc, d) => { const year = d.Year; const vocals = d.VOCALOID.split(","); if (!acc.has(year)) { acc.set(year, new Map()); } const yearMap = acc.get(year); vocals.forEach((vocal) => { yearMap.set(vocal, (yearMap.get(vocal) || 0) + 1); }); return acc; }, new Map()); const allYears = [...dataByYearAndVocaloid.keys()]; const allVocaloids = new Set( [...dataByYearAndVocaloid.values()].flatMap((yearMap) => [ ...yearMap.keys() ]) ); let datasetArray = Array.from(allVocaloids).flatMap((vocal) => allYears.map((year) => ({ year, vocal, count: dataByYearAndVocaloid.get(year)?.get(vocal) ?? 0 })) ); // カウントが多い順に並べ替え datasetArray.sort((a, b) => b.count - a.count); // D3.jsで棒グラフを作成 const width = 650; const height = 300; const margin = { top: 20, right: 10, bottom: 50, left: 50 }; const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .style("display", "block") .style("margin", "0 auto"); const x = d3 .scaleBand() .domain(datasetArray.map((d) => d.vocal)) .range([margin.left, width - margin.right]) .padding(0.15); const y = d3 .scaleLinear() .domain([0, 23]) .nice() .range([height - margin.bottom, margin.top]); svg .selectAll(".bar") .data(datasetArray) .join("rect") .attr("class", "bar") .attr("x", (d) => x(d.vocal)) .attr("y", (d) => y(d.count)) .attr("width", x.bandwidth()) .attr("height", (d) => height - margin.bottom - y(d.count)) .attr("fill", "steelblue"); svg .append("g") .attr("transform", `translate(${margin.left}, 0)`) .call(d3.axisLeft(y)); svg .selectAll(".text-name") .data(datasetArray) .join("text") .attr("class", "text-name") .attr("x", (d) => x(d.vocal) + x.bandwidth() / 2) .attr("y", (d) => height - y(d.count) < 15 ? y(d.count) + 20 : y(d.count) - 5 ) .attr("text-anchor", "middle") .attr("font-size", 12) .text((d) => d.vocal); svg .selectAll(".text-count") .data(datasetArray) .join("text") .attr("class", "text-count") .attr("x", (d) => x(d.vocal) + x.bandwidth() / 2) .attr("y", (d) => y(d.count) + 15) .attr("text-anchor", "middle") .attr("font-size", 18) .attr("fill", "white") .text((d) => d.count); return svg.node(); }4e:Ta51,function renderChart() { // 一番大きいものを除外 const maxYoutube = d3.max(compare2024view, (d) => d.Youtube); const maxニコニコ = d3.max(compare2024view, (d) => d.ニコニコ); // 一番大きいYoutubeとニコニコの値を除いたデータを作成 const filteredData = compare2024view.filter( (d) => d.Youtube !== maxYoutube && d.ニコニコ !== maxニコニコ ); // SVG設定 const width = 800; const height = 500; const margin = { top: 20, right: 30, bottom: 90, left: 100 }; const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .style("display", "block") // 中央寄せのためのスタイルを追加 .style("margin", "auto"); const chartWidth = width - margin.left - margin.right; const chartHeight = height - margin.top - margin.bottom; const chart = svg .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); // スケール関数 const xScale = d3 .scaleBand() .domain(filteredData.map((d) => d.Title.slice(0, 10))) // タイトルの最初の10文字を使用 .range([0, chartWidth]) .padding(0.2); const yScale = d3 .scaleLinear() .domain([0, 50]) // 差は 0 から 100 のスケール .range([chartHeight, 0]); // 軸 const xAxis = d3.axisBottom(xScale); const yAxis = d3.axisLeft(yScale).ticks(10); chart .append("g") .attr("transform", `translate(0,${chartHeight})`) .call(xAxis) .selectAll("text") .style("text-anchor", "end") .attr("dx", "-0.8em") .attr("dy", "0.15em") .attr("transform", "rotate(-45)"); // X軸の曲名を傾けて表示 chart.append("g").call(yAxis); // データをスケールに合わせる const scaledData = filteredData.map((d) => ({ Title: d.Title.slice(0, 10), // タイトルの最初の10文字を使用差: Math.abs( (d.Youtube / maxYoutube) * 100 - (d.ニコニコ / maxニコニコ) * 100 ), youtubeRatio: (d.Youtube / maxYoutube) * 100, ニコニコRatio: (d.ニコニコ / maxニコニコ) * 100 })); // 棒グラフを描画 chart .selectAll(".bar") .data(scaledData) .enter() .append("rect") .attr("class", "bar") .attr("x", (d) => xScale(d.Title)) .attr("y", (d) => yScale(d.差)) // Y座標 .attr("width", xScale.bandwidth()) .attr("height", (d) => chartHeight - yScale(d.差)) // 棒の高さ .attr("fill", (d) => { // Youtube が大きい場合は赤、小さい場合は青 return d.youtubeRatio > d.ニコニコRatio ? "#B24B45" : "steelblue"; }); return svg.node(); }4f:Tcae,function renderChart2() { // 最大と二番目に大きいものを除外したデータ const maxYoutube = d3.max( compare2024view.filter( (d) => d.Youtube !== d3.max(compare2024view, (d) => d.Youtube) ), (d) => d.Youtube ); const maxニコニコ = d3.max( compare2024view.filter( (d) => d.ニコニコ !== d3.max(compare2024view, (d) => d.ニコニコ) ), (d) => d.ニコニコ ); // Find second largest values const secondMaxYoutube = d3.max( compare2024view.filter((d) => d.Youtube !== maxYoutube), (d) => d.Youtube ); const secondMaxニコニコ = d3.max( compare2024view.filter((d) => d.ニコニコ !== maxニコニコ), (d) => d.ニコニコ ); // 最大値と二番目に大きいものを除外 const filteredData = compare2024view.filter( (d) => d.Youtube !== maxYoutube && d.Youtube !== secondMaxYoutube && d.ニコニコ !== maxニコニコ && d.ニコニコ !== secondMaxニコニコ ); // SVG設定 const width = 800; const height = 500; const margin = { top: 20, right: 30, bottom: 90, left: 100 }; const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .style("display", "block") // 中央寄せのためのスタイルを追加 .style("margin", "auto"); const chartWidth = width - margin.left - margin.right; const chartHeight = height - margin.top - margin.bottom; const chart = svg .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); // スケール関数 const xScale = d3 .scaleBand() .domain(filteredData.map((d) => d.Title.slice(0, 10))) // タイトルの最初の10文字を使用 .range([0, chartWidth]) .padding(0.2); const yScale = d3 .scaleLinear() .domain([0, 80]) // 差は 0 から 100 のスケール .range([chartHeight, 0]); // 軸 const xAxis = d3.axisBottom(xScale); const yAxis = d3.axisLeft(yScale).ticks(10); chart .append("g") .attr("transform", `translate(0,${chartHeight})`) .call(xAxis) .selectAll("text") .style("text-anchor", "end") .attr("dx", "-0.8em") .attr("dy", "0.15em") .attr("transform", "rotate(-45)"); // X軸の曲名を傾けて表示 chart.append("g").call(yAxis); // データをスケールに合わせる const scaledData = filteredData.map((d) => ({ Title: d.Title.slice(0, 10), // タイトルの最初の10文字を使用差: Math.abs( (d.Youtube / maxYoutube) * 100 - (d.ニコニコ / maxニコニコ) * 100 ), youtubeRatio: (d.Youtube / maxYoutube) * 100, ニコニコRatio: (d.ニコニコ / maxニコニコ) * 100 })); // 棒グラフを描画 chart .selectAll(".bar") .data(scaledData) .enter() .append("rect") .attr("class", "bar") .attr("x", (d) => xScale(d.Title)) .attr("y", (d) => yScale(d.差)) // Y座標 .attr("width", xScale.bandwidth()) .attr("height", (d) => chartHeight - yScale(d.差)) // 棒の高さ .attr("fill", (d) => { // Youtube が大きい場合は赤、小さい場合は青 return d.youtubeRatio > d.ニコニコRatio ? "#B24B45" : "steelblue"; }); return svg.node(); }50:T16ea,function compareChart(selectedVocal) { const allYears = d3.range(2007, 2025, 1); // 2007年～2024年の全ての年 const allVocaloids = new Set(compare.flatMap((d) => d.VOCALOID.split(","))); const dataByYearAndVocaloid = compare.reduce((acc, d) => { const year = d.Year; const vocals = d.VOCALOID.split(","); acc.set(year, acc.get(year) || new Map()); vocals.reduce((map, vocal) => { map.set(vocal, (map.get(vocal) || 0) + 1); return map; }, acc.get(year)); return acc; }, new Map()); let dataset = Array.from(allVocaloids) .filter((vocal) => vocal !== "初音ミク") // 初音ミクを除外 .flatMap((vocal) => allYears.map((year) => ({ year, vocal, count: dataByYearAndVocaloid.get(year)?.get(vocal) ?? 0 })) ); // VOCALOID をフィルタリング if (selectedVocal !== "すべて") { dataset = dataset.filter((d) => d.vocal === selectedVocal); } const width = 800; const height = 400; const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .style("display", "block") .style("margin", "auto"); const margin = { top: 50, right: 50, bottom: 50, left: 50 }; const x = d3 .scaleLinear() .domain(d3.extent(dataset, (d) => d.year)) .range([margin.left, width - margin.right]); const y = d3 .scaleLinear() .domain([0, 30]) .range([height - margin.bottom, margin.top]); const xAxis = d3 .axisBottom() .scale(x) .tickValues(d3.range(2007, 2025, 1)) .tickFormat((d) => `${d}年`); const yAxis = d3 .axisLeft() .scale(y) .tickSize(-(width - margin.left - margin.right)); svg .append("rect") .attr("width", width) .attr("height", height) .attr("fill", "hsl(220,10%,95%)"); svg .append("g") .attr("class", "xAxis") .attr("transform", `translate(0, ${height - margin.bottom})`) .call(xAxis); svg .append("g") .attr("class", "yAxis") .attr("transform", `translate(${margin.left}, 0)`) .call(yAxis); svg .selectAll("g.xAxis, g.yAxis") .selectAll("line, path") .attr("stroke", "black") .attr("opacity", 0.3); svg .append("text") .attr("x", margin.right + 3) .attr("y", margin.top - 5) .text("曲数") .attr("font-family", "sans-serif") .attr("font-size", 9) .attr("fill", "#000"); svg .append("text") .attr("x", 630) .attr("y", 30) .text("「年ごとのVOCALOID曲数」") .attr("font-family", "sans-serif") .attr("fill", "#000") .attr("opacity", 0.8) .attr("font-size", 9); // 「すべて」の選択時に色を固定 const colorMap = new Map(); const color = d3.scaleOrdinal(d3.schemeCategory10); // VOCALOIDごとにユニークな色を割り当てる Array.from(allVocaloids) .filter((vocal) => vocal !== "初音ミク") .forEach((vocal, index) => { colorMap.set(vocal, color(d3.schemeCategory10[index % 10])); }); const line = d3 .line() .x((d) => x(d.year)) .y((d) => y(d.count)); const groupedData = d3.group(dataset, (d) => d.vocal); svg .selectAll("path.line") .data(groupedData) .join("path") .attr("fill", "none") .attr("stroke", ([vocal]) => { // 「すべて」を選択している場合は色を設定、個別VOCALOIDを選択している場合はその色を設定 return selectedVocal === "すべて" || vocal === selectedVocal ? colorMap.get(vocal) // 個別VOCALOIDまたは「すべて」の場合、色を反映 : "none"; // 他のVOCALOIDは非表示 }) .attr("stroke-width", 2) .attr("d", ([, data]) => line(data)) .attr("class", "line") .each(function () { // Ensure the path length is calculated after it is rendered const pathLength = this.getTotalLength(); d3.select(this) .attr("stroke-dasharray", pathLength) .attr("stroke-dashoffset", pathLength) .transition() .duration(1600) // Set the duration of the animation (e.g., 1000ms) .ease(d3.easeLinear) // Apply a linear easing function for smooth animation .attr("stroke-dashoffset", 0); // Animate the stroke dashoffset to 0 (making the line visible) }); if (selectedVocal === "すべて") { const nameVocaloids = Array.from( new Set(dataset.filter((d) => d.count > 20).map((d) => d.vocal)) ); const years = [2013, 2020, 2013, 2008]; const c = [28, 25.5, 24, 24]; svg .selectAll("text.label") .data(nameVocaloids) .join("text") .attr("x", (d, i) => x(years[i])) .attr("y", (d, i) => y(c[i])) .text((d) => d) .attr("font-family", "sans-serif") .attr("text-anchor", "middle") .attr("font-weight", "bold") .attr("font-size", 12) .attr("fill", "dimgray") .attr("opacity", 0) // Start with opacity 0 (invisible) .transition() // Apply the transition .duration(2000) // Set the duration of the animation (e.g., 1000ms) .ease(d3.easeLinear) // Apply a linear easing function for smooth animation .attr("opacity", 1); } else { svg .selectAll("text.a") .data(dataset) .join("text") .attr("x", (d) => x(d.year)) .attr("y", (d) => y(d.count) - 10) .text((d) => d.count) .attr("font-family", "sans-serif") .attr("text-anchor", "middle") .attr("font-weight", "bold") .attr("font-size", 10) .attr("fill", (d) => colorMap.get(d.vocal)) .attr("opacity", 0) // Start with opacity 0 (invisible) .transition() // Apply the transition .duration(2000) // Set the duration of the animation (e.g., 1000ms) .ease(d3.easeLinear) // Apply a linear easing function for smooth animation .attr("opacity", 1); } return svg.node(); }51:T1414,async function compareChartvocal(selectedVocal) { const allYears = d3.range(2007, 2025, 1); // 2007年～2024年の全ての年 const allVocaloids = new Set(compare.flatMap((d) => d.VOCALOID.split(","))); const dataByYearAndVocaloid = compare.reduce((acc, d) => { const year = d.Year; const vocals = d.VOCALOID.split(","); acc.set(year, acc.get(year) || new Map()); vocals.reduce((map, vocal) => { map.set(vocal, (map.get(vocal) || 0) + 1); return map; }, acc.get(year)); return acc; }, new Map()); let dataset = Array.from(allVocaloids) .filter((vocal) => vocal !== "初音ミク") // 初音ミクを除外 .flatMap((vocal) => allYears.map((year) => ({ year, vocal, count: dataByYearAndVocaloid.get(year)?.get(vocal) ?? 0 })) ); // VOCALOID をフィルタリング if (selectedVocal !== "すべて") { dataset = dataset.filter((d) => d.vocal === selectedVocal); } const width = 800; const height = 400; const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .style("display", "block") .style("margin", "auto"); const margin = { top: 50, right: 50, bottom: 50, left: 50 }; const x = d3 .scaleLinear() .domain(d3.extent(dataset, (d) => d.year)) .range([margin.left, width - margin.right]); const y = d3 .scaleLinear() .domain([0, 30]) .range([height - margin.bottom, margin.top]); const xAxis = d3 .axisBottom() .scale(x) .tickValues(d3.range(2007, 2025, 1)) .tickFormat((d) => `${d}年`); const yAxis = d3 .axisLeft() .scale(y) .tickSize(-(width - margin.left - margin.right)); svg .append("rect") .attr("width", width) .attr("height", height) .attr("fill", "hsl(220,10%,95%)"); svg .append("g") .attr("class", "xAxis") .attr("transform", `translate(0, ${height - margin.bottom})`) .call(xAxis); svg .append("g") .attr("class", "yAxis") .attr("transform", `translate(${margin.left}, 0)`) .call(yAxis); svg .selectAll("g.xAxis, g.yAxis") .selectAll("line, path") .attr("stroke", "black") .attr("opacity", 0.3); if (selectedVocal == "GUMI") { const imageData = await FileAttachment("v6Gumi_nbg@1.png").image(); // 画像を SVG に追加 svg .append("image") .attr("href", imageData.src) // src を指定 .attr("x", width - 400) .attr("y", 50) .attr("width", 400) .attr("opacity", 0.3); } else if (selectedVocal == "flower") { const imageData = await FileAttachment("v4_flower_300ppi@1.png").image(); // 画像を SVG に追加 svg .append("image") .attr("href", imageData.src) // src を指定 .attr("x", width - 770) .attr("y", 30) .attr("width", 360) .attr("opacity", 0.3); } else if (selectedVocal == "重音テト") { const imageData = await FileAttachment( "official_illust_teto_sv.png" ).image(); // 画像を SVG に追加 svg .append("image") .attr("href", imageData.src) // src を指定 .attr("x", width - 770) .attr("y", 32) .attr("width", 360) .attr("opacity", 0.3); } svg .append("text") .attr("x", margin.right + 3) .attr("y", margin.top - 5) .text("曲数") .attr("font-family", "sans-serif") .attr("font-size", 9) .attr("fill", "#000"); svg .append("text") .attr("x", 700) .attr("y", 40) .text(selectedVocal) .attr("font-family", "sans-serif") .attr("fill", "#000") .attr("opacity", 0.8) .attr("font-size", 15); // 「すべて」の選択時に色を固定 const colorMap = new Map(); const color = d3.scaleOrdinal(d3.schemeCategory10); // VOCALOIDごとにユニークな色を割り当てる Array.from(allVocaloids) .filter((vocal) => vocal !== "初音ミク") .forEach((vocal, index) => { colorMap.set(vocal, color(d3.schemeCategory10[index % 10])); }); const line = d3 .line() .x((d) => x(d.year)) .y((d) => y(d.count)); const groupedData = d3.group(dataset, (d) => d.vocal); svg .selectAll("path.line") .data(groupedData) .join("path") .attr("fill", "none") .attr("stroke", ([vocal]) => { // 「すべて」を選択している場合は色を設定、個別VOCALOIDを選択している場合はその色を設定 return selectedVocal === "すべて" || vocal === selectedVocal ? colorMap.get(vocal) // 個別VOCALOIDまたは「すべて」の場合、色を反映 : "none"; // 他のVOCALOIDは非表示 }) .attr("stroke-width", 2) .attr("d", ([, data]) => line(data)) .attr("class", "line"); svg .selectAll("text.a") .data(dataset) .join("text") .attr("x", (d) => x(d.year)) .attr("y", (d) => y(d.count) - 10) .text((d) => d.count) .attr("font-family", "sans-serif") .attr("text-anchor", "middle") .attr("font-weight", "bold") .attr("font-size", 10) .attr("fill", (d) => colorMap.get(d.vocal)); return svg.node(); }52:[{"id":"c1de6cfce22dfd54978b53699866eaefe310bd4b16daab0f6b0eacb45c6446e81c64c025f0626e3461976f36591899baa765524bdcdd28f3eecc2ad736f7a635","href":"https://static.observableusercontent.com/files/c1de6cfce22dfd54978b53699866eaefe310bd4b16daab0f6b0eacb45c6446e81c64c025f0626e3461976f36591899baa765524bdcdd28f3eecc2ad736f7a635","name":"2024youtube@3.csv","type":"text/csv","lastModified":1737281297322.992,"size":3556},{"id":"6b07c7c5bd2c47587845f871c6c168e071fda1cac9aa4abea583c4ccceec6d4bac68d442a87143d69dab3f597dbfd9e703c67334f28e423e3c03f56ec1c6e718","href":"https://static.observableusercontent.com/files/6b07c7c5bd2c47587845f871c6c168e071fda1cac9aa4abea583c4ccceec6d4bac68d442a87143d69dab3f597dbfd9e703c67334f28e423e3c03f56ec1c6e718","name":"2024compare2@1.csv","type":"text/csv","lastModified":1738925712017.258,"size":4403},{"id":"c5780b3aa663d825ea26a60a40961c0cf12ba37604e1c73dcc0f3210b8468845be35575498756f6ea9f032898ebbe9712881d1e7891812562e46693eae74b5a3","href":"https://static.observableusercontent.com/files/c5780b3aa663d825ea26a60a40961c0cf12ba37604e1c73dcc0f3210b8468845be35575498756f6ea9f032898ebbe9712881d1e7891812562e46693eae74b5a3","name":"v6Gumi_nbg.png","type":"image/png","lastModified":1738928411938.667,"size":315291},{"id":"21fbcfa73c1eac217ab5cdd744e5e04c8f5f88257784dde0294ffb79669b7673c691567aab23ce6d25eb70888a87f8c488efab52230095034dc70c0f147c57c2","href":"https://static.observableusercontent.com/files/21fbcfa73c1eac217ab5cdd744e5e04c8f5f88257784dde0294ffb79669b7673c691567aab23ce6d25eb70888a87f8c488efab52230095034dc70c0f147c57c2","name":"v6Gumi_nbg@1.png","type":"image/png","lastModified":1738928468487.34,"size":226663},{"id":"879abd300ae3dc5629e7e5f2855f1a5e77105211bf13a5d99e85d96385f9a893d04ffc922dc3e370f38c7c4246a9ca3a6ca9f6a98fc20ddf7af74d973a97c2ef","href":"https://static.observableusercontent.com/files/879abd300ae3dc5629e7e5f2855f1a5e77105211bf13a5d99e85d96385f9a893d04ffc922dc3e370f38c7c4246a9ca3a6ca9f6a98fc20ddf7af74d973a97c2ef","name":"v4_flower_300ppi@1.png","type":"image/png","lastModified":1738929660426.072,"size":204583},{"id":"280ce1056c9493d269b5b6a025d7c1f575eb1ced500a7debe5a9d92c51e6ec067291cfc0250f6ab7fe695260e4f2bbb91c8ffa14b3e2099baf1db2a24071a41f","href":"https://static.observableusercontent.com/files/280ce1056c9493d269b5b6a025d7c1f575eb1ced500a7debe5a9d92c51e6ec067291cfc0250f6ab7fe695260e4f2bbb91c8ffa14b3e2099baf1db2a24071a41f","name":"official_illust_teto_sv.png","type":"image/png","lastModified":1738936848273.017,"size":199198},{"id":"17393ef81793cf40a1845f29a6175df733d84eefc1a87f64439f4261dacfed6be915a62901fdad4dac2a08d427201505f7d1cdd40ac2abadb45c56dca23d01d4","href":"https://static.observableusercontent.com/files/17393ef81793cf40a1845f29a6175df733d84eefc1a87f64439f4261dacfed6be915a62901fdad4dac2a08d427201505f7d1cdd40ac2abadb45c56dca23d01d4","name":"compare@2.csv","type":"text/csv","lastModified":1738492112754.712,"size":140663},{"id":"569edcd0ed682cfbf604b65d8c6494f6e2c38fe49ae81bc68fc401311d0cc2458d8d69bacae63d8f1fba199ad9b7ab9290c3a4e45d155e5a127c6a758377456a","href":"https://static.observableusercontent.com/files/569edcd0ed682cfbf604b65d8c6494f6e2c38fe49ae81bc68fc401311d0cc2458d8d69bacae63d8f1fba199ad9b7ab9290c3a4e45d155e5a127c6a758377456a","name":"v6Gumi_wbg-2.jpg","type":"image/jpeg","lastModified":1738529177960.524,"size":37055},{"id":"dea3fc23464208bfae87e3e410c237017173683b5f639e192eb11ce650b9a35332587ee1ef01b9ba47f6421ebffdb10faf1702ca79c5efdadeb74af7169dbf57","href":"https://static.observableusercontent.com/files/dea3fc23464208bfae87e3e410c237017173683b5f639e192eb11ce650b9a35332587ee1ef01b9ba47f6421ebffdb10faf1702ca79c5efdadeb74af7169dbf57","name":"official_illust_teto_sv.jpg","type":"image/jpeg","lastModified":1738530605847.31,"size":35695},{"id":"bd244609d7b5a06496392b342da64856c38adaaa53b4cec2d3dd4987d3829c713d4d14c95e62b1591593a611f860c317593f36e2e77f09781b05bb667470de32","href":"https://static.observableusercontent.com/files/bd244609d7b5a06496392b342da64856c38adaaa53b4cec2d3dd4987d3829c713d4d14c95e62b1591593a611f860c317593f36e2e77f09781b05bb667470de32","name":"v4_flower_300ppi.png","type":"image/png","lastModified":1738543004019.751,"size":70561},{"id":"3fc2517f4bf38e1dc7e8c3db3a8b7f31494bf920a5a82b75dfaabae2cd86a98d5db050ff10c47fc2636acdd711a976a3e1e4533a7591fd4c0586fe83939fa693","href":"https://static.observableusercontent.com/files/3fc2517f4bf38e1dc7e8c3db3a8b7f31494bf920a5a82b75dfaabae2cd86a98d5db050ff10c47fc2636acdd711a976a3e1e4533a7591fd4c0586fe83939fa693","name":"vocaloid.png","type":"image/png","lastModified":1738556142839.873,"size":89174},{"id":"605812ef099649139adf13b710b6e7b3f07a1fbc44b90c24b6625dbb8211f06a34891c9b0b061db4122e50f844604410b76b1d22f8d6844cc5f7f385e04cb3e9","href":"https://static.observableusercontent.com/files/605812ef099649139adf13b710b6e7b3f07a1fbc44b90c24b6625dbb8211f06a34891c9b0b061db4122e50f844604410b76b1d22f8d6844cc5f7f385e04cb3e9","name":"vocaloidtitle.png","type":"image/png","lastModified":1738556316594.265,"size":69741},{"id":"d78bfec7f52289813765e6efe93d0b02100ae785a2f06d913099c1b6d6c66b7a755868df279a873d79b5593b35d4f99cf11b0dbba11f344654efe220c86757e4","href":"https://static.observableusercontent.com/files/d78bfec7f52289813765e6efe93d0b02100ae785a2f06d913099c1b6d6c66b7a755868df279a873d79b5593b35d4f99cf11b0dbba11f344654efe220c86757e4","name":"2024compare@4.csv","type":"text/csv","lastModified":1737880257243.04,"size":2466},{"id":"44067c38b88d918ca99ac2f5498cec2072b95569968a12a6cd80181b398ec7239c56f60e0380e1ca0f91755e2a80d1df643df7147f3b45185600ce9f76d4d346","href":"https://static.observableusercontent.com/files/44067c38b88d918ca99ac2f5498cec2072b95569968a12a6cd80181b398ec7239c56f60e0380e1ca0f91755e2a80d1df643df7147f3b45185600ce9f76d4d346","name":"niconico2024@1.csv","type":"text/csv","lastModified":1737899828137.084,"size":3591},{"id":"37c2ad02645ed334f980449dece6a98de860b339f3a19b5cff8873013093c0be5edc53e4e4589926af021ce6adcd827184878740b65883d81a9d9b5e8876d72c","href":"https://static.observableusercontent.com/files/37c2ad02645ed334f980449dece6a98de860b339f3a19b5cff8873013093c0be5edc53e4e4589926af021ce6adcd827184878740b65883d81a9d9b5e8876d72c","name":"2024compare2.csv","type":"text/csv","lastModified":1737959089355.903,"size":4353},{"id":"be2e8142f040a7e80581c82eb864b5cd164d3758f1b37722f61986b579860552329321a2293c15856dc4fe3fff42f6a340467b4883e2ffc4fa1051cc289755a4","href":"https://static.observableusercontent.com/files/be2e8142f040a7e80581c82eb864b5cd164d3758f1b37722f61986b579860552329321a2293c15856dc4fe3fff42f6a340467b4883e2ffc4fa1051cc289755a4","name":"2024compare@6.csv","type":"text/csv","lastModified":1737965502061.717,"size":2385}] 47:{"id":"9e478a45b5723a62","slug":"vocaloid","title":"ボーカロイドの使用遍歴を辿る","thumbnail":"74999f00c32b823be58b05f2133746afbbabf550bca273ad63a8bb6901bfecf4","access_level":"public","create_time":"$D2024-12-02T05:52:05.630Z","update_time":"$D2025-02-07T14:26:34.884Z","view_time":null,"first_public_time":"$D2025-02-03T02:01:50.848Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"fdca81b2f5eb7de5","login":"tmu-dataviz-class","name":"TMU Dataviz Class","avatar_url":"https://avatars-next.observableusercontent.com/7549232d2187bf99f5cfbd7780436d4ce1cc4257fe3eae6585b5ff10b836499b","tier":"education_2026","bio":"The workspace is for a data visualization class at the Tokyo Metropolitan University.\nInstructor: @sugi2000lab @sugi2000","followed_by_you":false,"follows_you":false},"version":1642,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"d08613cec0813a16","login":"saya5119","name":"saya5119","avatar_url":"https://avatars-next.observableusercontent.com/7fb3fb4705f8132858216266756a2ca3ef447858f4d0a133d2a19c0eb286dce0","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"d08613cec0813a16","login":"saya5119","name":"saya5119","avatar_url":"https://avatars-next.observableusercontent.com/7fb3fb4705f8132858216266756a2ca3ef447858f4d0a133d2a19c0eb286dce0","tier":null,"role":"editor"},{"type":"team","id":"fdca81b2f5eb7de5","login":"tmu-dataviz-class","name":"TMU Dataviz Class","avatar_url":"https://avatars-next.observableusercontent.com/7549232d2187bf99f5cfbd7780436d4ce1cc4257fe3eae6585b5ff10b836499b","tier":"education_2026","role":"editor"}],"comments":[{"id":"cbd946779a9a2c74","reply_to_id":null,"content":"修正してください。\n言わざるおえない→言わざるをえない\n多種多様なの歌声→多種多様な歌声","create_time":"$D2025-02-03T04:56:05.787Z","update_time":"$D2025-02-03T04:56:54.294Z","resolved":true,"user":{"type":"individual","id":"99e57c8b5dcd5ca6","login":"sugi2000","name":"SUGIMOTO Tatsuo","avatar_url":"https://avatars-next.observableusercontent.com/aa2e590c6e4574dde26ce160f882c7074c3f190de1894c0dd147878beed52f39","tier":null}}],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"64342ad2a9267bf8","slug":"2024-final-project","title":"2024 Final Project","owner":{"id":"fdca81b2f5eb7de5","login":"tmu-dataviz-class","name":"TMU Dataviz Class"}},"type":"notebook","body":{"titling":"auto","title":"ボーカロイドの使用遍歴を辿る","cells":[{"id":213,"value":"

ボーカロイドの使用遍歴を辿る

Kuroda

\n ${await FileAttachment(\"vocaloidtitle.png\").image()}\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"

はじめに

昨今、米津玄師やAyase(YOASOBI)などボーカロイドソフト(音声合成ソフト)を使って楽曲を制作・発表するボカロPからアーティストとして活躍する人が多くなっている。それに伴いボーカロイドという言葉を聞くことも多くなってきた。(下図は左が米津玄師の別名義であるハチの、右がAyase(YOASOBI)のボーカロイド楽曲である)

そもそもVOCALOIDとはYAMAHA社が制作・発表した歌声合成技術である。そこからYAMAHA社がライセンスを売ったことにより初音ミクをはじめとする数多くのVOCALOIDが誕生した。これによりVOCALOIDで楽曲を制作する際それぞれ強みが異なる個性豊かなVOCALOIDの誰に歌わせるかが重要となり、VOCALOID楽曲の音楽性の幅を広げている。特に最近は重音テトが人気な曲に使われているイメージがあり、どのように使用率が変わっていったか気になった。

そのため今回は2024年に多く使われたVOCALOIDを見つつ過去を振りかえってVOCALOIDの使用遍歴がどのように推移しているのか確認し、考察していきたいと思う。

\n \n \n

2024年に投稿されたVOCALOID楽曲と再生回数
(Youtubeとニコニコ比較)

まずはYoutubeとニコニコのどちらで調査すればいいか確認するためにYoutubeとニコニコ動画の視聴回数順に1位から25位までを調査した。(片方のメディアでは25位以内だったが、もう一方のメディアではランキング外になったものも追加しているため、25曲以上の楽曲になっている)

*データに使用するのはMVだけでshout動画などは除いている。また、同じ楽曲で複数データに入った場合は再生数が多い方を採用し、転載されたものは除いている。

2025年1月27日時点のデータを使用している。

このように確認してみると1位から3位までYoutube、ニコニコどちらも同じ楽曲がランクインしていることがわかった。しかし、トップ層以外は見られているMVに差があることがわかった。これはYoutubeにはタグ機能がなくAPIを元にvocaloidとボーカロイドと検索し合算したデータを使っているためかもしれない。

ニコニコではボカコレ(ボーカロイド楽曲を投稿する祭典)があり、ボーカロイド楽曲を制作する人として活動してから2年以内の人のみのランキングで1位に選ばれると「プロジェクトセカイカラフルステージ！ feat. 初音ミク」というゲーム内の楽曲に採用されることになるなど初心者の人を後押しする取り組みが行われている。

\nボカコレ公式サイト\n

そのため、ニコニコでは作曲者がまだ有名でない作品がランキングに乗っていたり、YoutubeではYoutubeShortでよく使われる楽曲が上位に入っているなど見ている層の違いが感じられる結果となった。

(下記は左から順に1位から3位の動画)

\n ${youtube2024.slice(0, 3).map((video) => {\n if (video.error) {\n return html`

Error: ${video.error}

`;\n }\n return html`\n \n `;\n })}\n

\n `\n : html`

動画データがまだロードされていません。

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":501,"value":"

2024年に投稿されたVOCALOIDの使用ランキング

Youtubeとニコニコでは見られている動画が違うことがわかったところで本題のどのVOCALOIDのキャラクターが使われているか見てみる。

どちらの媒体も初音ミクが首位となり、その次に重音テトという結果になった。

つまり、Youtubeとニコニコでは人気な楽曲の差はあれど、キャラクターの使用度ではYoutubeとニコニコにあまり差がないことが分かった。強いて違いを言うのであれば、ニコニコの方が使われているVOCALOIDの種類が多いぐらいである。

あまり差がないことがわかったのでShort動画などの必要のないデータがないニコニコ動画に絞って調査することにした。

ニコニコに投稿されたVOCALOIDの使用曲数
(2007年から2024年)

先ほどまでは視聴回数1位から25位までだったが、1位から100位まで初音ミクが発売された2007年から2024年までの18年間を調べた。そして、X軸を年数、Y軸を曲数としてグラフ化させた。

相変わらず、首位は初音ミクだったが、その他のVOCALOIDには流行り廃りがありそうだと分かった。

初音ミクを抜いたニコニコに投稿されたVOCALOIDの使用曲数
(2007年から2024年)

初音ミクを抜いたものをグラフ化し、すべてまたはそれぞれのVOCALOIDでグラフを見れるようにした。今回は筆者が気になったGUMI、flower、重音テトに重点を置いてみていく。

GUMI、flowerの低迷

\n GUMI公式画像より参照
\n flower公式画像より参照\n

GUMIとは株式会社インターネットから販売された『Megpoid（メグッポイド）』のバーチャルボーカリストの総称であり、一方flowerはYAMAHA、株式会社ガイノイドから発売された中性的な声を持つVOCALOIDである。

どちらも人気だったが今はあまり多く使われなくなったという点で似てはいるが、使われている曲数の伸び方に注目してほしい。GUMIは急激に伸びるが、flowerは徐々に伸びている。これは販売頻度による差だと推測できる。GUMIは2009年にVOCALOID2 Megpoidが発売され、2011年にはVOCALOID3 Megpoidが発売、2015年にはVOCALOID4 Megpoidが発売されるといったエディターが変わるたびに発売されている。しかし、flowerはVOCALOIDとしては2014年、2015年に発売しそれからしばらく間があき2023年に発売している。

VOCALOIDは人気になった曲で使われているVOCALOIDがよく使われるようになるなど人気や興味にすごく作用されるものであるため発売などの大きいイベントがないと関心を集められずあまり使われなくなってしまう。そういった意味ではクリプトン6兄弟(初音ミク、鏡音リン、鏡音レン、巡音ルカ、MEIKO、KAITO)は毎年イベントがあるほかゲームにも登場するため興味を持ってもらいやすく、楽曲を作る際に筆頭候補として上がるのだろう。

\n \n \n

\n \n\n

重音テトの急激な広がり

\n 重音テト公式画像より参照\n

重音テトとは2008年3月に匿名掲示板２ちゃんねる内にある『ニュー速VIP板』で有志の手によりエイプリルフールのジョークとして制作され『架空のVOCALOID（ボーカロイド）』としてニコニコ動画にデビューしたバーチャルシンガーである。

グラフを見ると2023年から急激に増え2024年には初音ミクを次いで2位になっている。筆者の感じた重音テトの急速な広がりは正しかったのだとわかった。急激に増えた理由としては2023年に15周年記念にSynthesizer V AI版が発売されたからだと考えられる。発売以前はUTAUというフリーソフトウェアで制作するしかなかったが、Synthesizer V AI版ではAIなどの最新技術によってより人間らしい歌唱が可能となり急激に増えたのだと考えられる。この人気はGUMI、flowerの人気維持からみて2025年も続きそうである。

\n\n\n

総評

初音ミクの首位独走はさすがだと言わざるをえないと感じた。発売から人気を高く持ち続け一度も1位を譲らずVOCALOIDの代名詞である続けるその姿はこれから先も変わることがなさそうだ。ただ、そうした人気があり続ける中GUMI、flowerがあまり使われなくなるなど盛者必衰を表す現状も感じられた。また2020年ごろからVOCALOID開発が活発化し、可不などいわゆるVtuberと呼ばれるバーチャルシンガーがVOCALOIDになるなど今までにはない動きが起き、多種多様なの歌声を楽しむことができるようになった。

初音ミクが生まれて18年ほどとまだVOCALOID市場は始まってまだ間もないが、データの可視化をしたことで人気に波があることが分かった。今後もどのようなVOCALOIDが人気となるのか注目していきたい。

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":174,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":251,"value":"youtube2024 = d3.csvParse(\n await FileAttachment(\"2024youtube@3.csv\").text(),\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"niconico2024 = d3.csvParse(\n await FileAttachment(\"niconico2024@1.csv\").text(),\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":476,"value":"compare2024 = d3.csvParse(\n await FileAttachment(\"2024compare@4.csv\").text(),\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":734,"value":"compare = d3.csvParse(\n await FileAttachment(\"compare@2.csv\").text(),\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":785,"value":"compare2024view = d3.csvParse(\n await FileAttachment(\"2024compare@6.csv\").text(),\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":802,"value":"compare2024_2 = d3.csvParse(\n await FileAttachment(\"2024compare2@1.csv\").text(),\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":385,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":873,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1095,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1009,"value":"$50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1488,"value":"$51","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W52","stdlib":"1"}} 24:null