31:T1ebf,scatter_plot2 = { const width = 1050; const height = 600; const margin = { top: 50, right: 50, bottom: 50, left: 50 }; const xScale_sub = d3 .scaleLinear() .domain([0, d3.max(dataset_sorted, (d) => d.subscriber)]) .nice() .range([margin.left, width - margin.right]); const xScale_com = d3 .scaleLinear() .domain([0, d3.max(dataset_sorted, (d) => d.comment)]) .nice() .range([margin.left, width - margin.right]); const xScale_like = d3 .scaleLinear() .domain([0, d3.max(dataset_sorted, (d) => d.like)]) .nice() .range([margin.left, width - margin.right]); const xScale_half = d3 .scaleLinear() .domain([0, d3.max(dataset_sorted, (d) => d.half_million)]) .nice() .range([margin.left, width - margin.right]); const yScale = d3 .scaleLinear() .domain([0, d3.max(dataset_sorted, (d) => d.view)]) .nice() .range([height - margin.bottom, margin.top]); const xAxis_sub = d3 .axisBottom() .scale(xScale_sub) .tickFormat((d) => d / 10000) .tickSize(-(height - margin.top - margin.bottom)); const xAxis_com = d3 .axisBottom() .scale(xScale_com) .tickSize(-(height - margin.top - margin.bottom)); const xAxis_like = d3 .axisBottom() .scale(xScale_like) .tickFormat((d) => d / 10000) .tickSize(-(height - margin.top - margin.bottom)); const xAxis_half = d3 .axisBottom() .scale(xScale_half) .tickSize(-(height - margin.top - margin.bottom)); const yAxis = d3 .axisLeft() .scale(yScale) .tickFormat((d) => d / 10000) .tickSize(-(width - margin.left - margin.right)); const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .style("overflow", "visible"); svg //背景 .append("g") .append("rect") .attr("width", width) .attr("height", height) // .attr("opacity", 0.03); .attr("fill", "aliceblue"); svg //横軸単位 .append("text") .attr("x", 1020) .attr("y", 559) .attr("font-size", "10px") .attr("fill", "black") .text((d) => { if (factor == 0) { return "(万人)"; } else if (factor == 2) { return "(万個)"; } else { return "(個)"; } }); svg //万回 .append("text") .attr("x", 23) .attr("y", 35) .attr("font-size", "10px") .attr("fill", "black") .text("(万回)"); function xAxisPick(_factor) { if (_factor == 0) { return xAxis_sub; } else if (_factor == 1) { return xAxis_com; } else if (_factor == 2) { return xAxis_like; } else if (_factor == 3) { return xAxis_half; } } svg .append("g") .attr("class", "xAxis") .attr("transform", `translate(0, ${height - margin.bottom})`) .call(xAxisPick(factor)); svg .append("g") .attr("class", "yAxis") .attr("transform", `translate(${margin.left}, 0)`) .call(yAxis); svg //円 .selectAll("circle") .data(dataset) .join("circle") .attr("cx", (d) => { if (factor == 0) { return xScale_sub(d.subscriber); } else if (factor == 1) { return xScale_com(d.comment); } else if (factor == 2) { return xScale_like(d.like); } else if (factor == 3) { return xScale_half(d.half_million); } }) .attr("cy", (d) => yScale(d.view)) .attr("r", 20) .attr("fill", "none") .attr("stroke", (d) => { if (d.affiliation == "にじさんじ") { return "#33CC00"; } else { return "#0099FF"; } }) .attr("stroke-width", "4") .attr("opacity", 0.5); const circle = svg //画像 .append("g") .attr("class", "image") .selectAll("a") .data(dataset_sorted) .join("a") .attr("xlink:href", (d) => d.song_url) .attr("target", "_blank") .append("image") .attr("x", (d) => { if (factor == 0) { return xScale_sub(d.subscriber) - 20; } else if (factor == 1) { return xScale_com(d.comment) - 20; } else if (factor == 2) { return xScale_like(d.like) - 20; } else if (factor == 3) { return xScale_half(d.half_million) - 20; } }) .attr("y", (d) => yScale(d.view) - 20) .attr("width", 40) .attr("height", 40) .attr("clip-path", "circle(20px)") .attr("opacity", 0.8) .classed("cirStyle", true) .attr("xlink:href", (d) => d.img_url) .on("click", function () { var target = d3.select(this); target.attr("opacity", "0.1"); }); svg .selectAll("g.xAxis, g.yAxis") .selectAll("line, path") .attr("stroke", "white") .attr("opacity", 0.5); // ------------------------------------------------------- const tooltip = svg .append("g") .attr("class", "tooltip") .style("pointer-events", "none") .style("visibility", "hidden"); tooltip .append("rect") .attr("fill", "white") .attr("stroke", "gray") .attr("width", 134) .attr("height", 90) .attr("opacity", 0.9); const showMyTooltip = (event) => { const mouseX = d3.pointer(event)[0] + 10; const mouseY = d3.pointer(event)[1] + 10; const datum = d3.select(event.target).datum(); tooltip.attr("transform", `translate(${mouseX},${mouseY})`); tooltip .selectAll("text") .data((d) => { if (factor == 0) { return [ { label: "name", value: datum.name }, { label: "belong", value: datum.affiliation }, { label: "view", value: datum.view }, { label: "subscriber", value: datum.subscriber } ]; } else if (factor == 1) { return [ { label: "name", value: datum.name }, { label: "belong", value: datum.affiliation }, { label: "view", value: datum.view }, { label: "comment", value: datum.comment } ]; } else if (factor == 2) { return [ { label: "name", value: datum.name }, { label: "belong", value: datum.affiliation }, { label: "view", value: datum.view }, { label: "like", value: datum.like } ]; } else if (factor == 3) { return [ { label: "name", value: datum.name }, { label: "belong", value: datum.affiliation }, { label: "view", value: datum.view }, { label: "half_million", value: datum.half_million } ]; } }) .join("text") .text((d, i) => { if (i == 0) { return `${d.value}`; } else { return `${d.label}: ${d.value}`; } }) .attr("x", (d) => { if (datum.name.length > 9) { return "5px"; } else { return "7px"; } }) .attr("y", (d, i) => 20 + 20 * i) .attr("fill", (d, i) => (i === 0 ? "black" : "gray")) .attr("letter-spacing", (d, i) => { if (i === 0) { if (datum.name.length > 6) { return "-0.5px"; } else { return "0.5px"; } } else { return "0.5px"; } }) .attr("font-size", (d) => { if (datum.name.length > 6) { return "11px"; } else { return "12px"; } }) .attr("font-weight", (d, i) => (i === 0 ? "bold" : "normal")); tooltip.style("visibility", "visible"); d3.select(event.currentTarget).attr("opacity", 1); d3.select(event.currentTarget.parentNode).raise(); }; const hideMyTooltip = (event) => { tooltip.style("visibility", "hidden"); d3.select(event.currentTarget).attr("opacity", 0.8); d3.select(event.currentTarget.parentNode).lower(); }; circle .on("pointerenter pointermove", showMyTooltip) .on("pointerleave", hideMyTooltip); return svg.node(); }32:T1a19,scatter_plot4 = { const width = 1050; const height = 600; const margin = { top: 40, right: 50, bottom: 40, left: 50 }; const xScale = d3 .scaleLinear() .domain([0, d3.max(dataset2_sorted, (d) => d.subscriber)]) .nice() .range([margin.left, width - margin.right]); const yScale = d3 .scaleLinear() .domain([0, d3.max(dataset2_sorted, (d) => d.view)]) .nice() .range([height - margin.bottom, margin.top]); const comScale = d3 .scaleSqrt() .domain([0, d3.max(data4Song_sorted, (d) => d.comment)]) .nice() .range([0, 40]); //35 const likeScale = d3 .scaleSqrt() .domain([0, d3.max(data4Song_sorted, (d) => d.like)]) .nice() .range([0, 40]); const halfScale = d3 .scaleSqrt() .domain([0, d3.max(data4Song_sorted, (d) => d.half_million)]) .nice() .range([0, 40]); const threeScale = d3 .scaleSqrt() .domain([0, d3.max(data4Song_sorted, (d) => d.three_million)]) .nice() .range([0, 40]); const rScale = d3 .scaleSqrt() // 平方根（ルート2）スケール　データ値を面積にマッピングしたいときに便利なスケール関数 .domain([ d3.min(dataset2_sorted, (d) => d.view / d.subscriber), d3.max(dataset2_sorted, (d) => d.view / d.subscriber) ]) .nice() .range([0, 35]); const xAxis = d3 .axisBottom() .scale(xScale) .tickFormat((d) => d / 10000) .tickSize(-(height - margin.top - margin.bottom)); const yAxis = d3 .axisLeft() .scale(yScale) .tickFormat((d) => d / 10000) .tickSize(-(width - margin.left - margin.right)); const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .style("overflow", "visible"); svg //背景 .append("g") .append("rect") .attr("width", width) .attr("height", height) .attr("fill", "aliceblue"); // .attr("fill", "ghostwhite"); // .attr("opacity", 0.05); //ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー svg //万人 .append("text") .attr("x", 1014) .attr("y", 569) .attr("font-size", "10px") .attr("fill", "black") .text("(万人)"); svg //万回 .append("text") .attr("x", 23) .attr("y", 25) .attr("font-size", "10px") .attr("fill", "black") .text("(万回)"); 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); //ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー // const ColArray01 = [ // "#ae8ca3", // "#d5d6aa", // "#9dbbae", // "#769fb6", // "#475b63", // "#40476d" // ]; // const ColArray02 = [ // "#EAC435", // "#721121", // "#F46036", // "#0E7C7B", // "#EF27A6", // "#56CBF9" // ]; const triangle = svg .append("g") .attr("class", "tri") .selectAll("a") .data(dataset2_sorted) .join("a") .attr("xlink:href", (d) => d.song_url) .attr("target", "_blank") .selectAll("path.ougi") .attr("class", "ougi") .data((d) => tricreate( //4等分　speed/subscriberなし xScale(d.subscriber), //x座標 yScale(d.view), //y座標 comScale(d.comment), likeScale(d.like), halfScale(d.half_million), threeScale(d.three_million) ) ) .join("path") .attr("d", (d) => d) .attr("fill", (d, i) => ColArray[i]); const targetTri = svg.selectAll("g.tri"); svg .selectAll("g.xAxis, g.yAxis") .selectAll("line, path") .attr("stroke", "white") .attr("opacity", 0.5); // ------------------------------------------------------- const tooltip = svg .append("g") .attr("class", "tooltip") .style("pointer-events", "none") .style("visibility", "hidden"); tooltip .append("rect") .attr("fill", "white") .attr("stroke", "#DDDDDD") .attr("width", 140) .attr("height", 120) .attr("opacity", 0.8); const showMyTooltip = (event) => { const mouseX = d3.pointer(event)[0] + 10; const mouseY = d3.pointer(event)[1] - 60; const datum = d3.select(event.target.parentNode).datum(); tooltip.attr("transform", `translate(${mouseX},${mouseY})`); tooltip .selectAll("text") .data([ { label: "name", value: datum.name }, { label: "comment", value: datum.comment }, { label: "like", value: datum.like }, { label: "half_million", value: datum.half_million }, { label: "three_million", value: datum.three_million } ]) .join("text") .text((d, i) => { if (i == 0) { return `${d.value}`; } else { return `${d.label}: ${d.value}`; } }) .attr("x", (d) => { if (datum.name.length > 6) { return "3px"; } else { return "10px"; } }) .attr("y", (d, i) => { if (i === 0) { return 26; } else { return 30 + 20 * i; } }) .attr("fill", (d, i) => { if (i === 0) { if (datum.affiliation == "にじさんじ") { return "#00AA00"; } else { return "#005FFF"; } } else { return "gray"; } }) .attr("letter-spacing", (d, i) => { if (i === 0) { if (datum.name.length > 6) { return "-1.4px"; } else { return "0.5px"; } } else { return "0.5px"; } }) .attr("font-size", (d, i) => { if (i === 0) { if (datum.name.length > 6 && datum.name.length < 11) { return "11px"; } else if (datum.name.length > 10) { return "10px"; } else { return "12px"; } } else { return "12px"; } }) .attr("font-weight", (d, i) => (i === 0 ? "bold" : "normal")); tooltip .append("image") .attr("x", 140 - 40) .attr("y", 0) .attr("width", 40) .attr("height", 40) .attr("opacity", 0.8) .attr("xlink:href", (d) => datum.img_url); tooltip.style("visibility", "visible"); }; const hideMyTooltip = (event) => { tooltip.style("visibility", "hidden"); }; targetTri .on("pointerenter pointermove", showMyTooltip) .on("pointerleave", hideMyTooltip); return svg.node(); }33:T84e,{ const svg = d3.create("svg").attr("width", 1050).attr("height", 55); svg //背景 .append("g") .append("rect") .attr("width", 1050) .attr("height", 55) .attr("fill", "aliceblue"); const tri_com_ex = svg .selectAll("g.com_ex") .attr("class", "com_ex") .data(tricreate(185, 35, 30, 0, 0, 0)) .join("path") .attr("d", (d) => d) .attr("fill", (d, i) => ColArray[i]); const tri_like_ex = svg .selectAll("g.like_ex") .attr("class", "like_ex") .data(tricreate(285, 5, 0, 30, 0, 0)) .join("path") .attr("d", (d) => d) .attr("fill", (d, i) => ColArray[i]); const tri_half_ex = svg .selectAll("g.half_ex") .attr("class", "half_ex") .data(tricreate(415, 5, 0, 0, 30, 0)) .join("path") .attr("d", (d) => d) .attr("fill", (d, i) => ColArray[i]); const tri_three_ex = svg .selectAll("g.three_ex") .attr("class", "three_ex") .data(tricreate(515, 35, 0, 0, 0, 30)) .join("path") .attr("d", (d) => d) .attr("fill", (d, i) => ColArray[i]); const ex_text = ["comment", "like", "half_million", "three_million"]; const tri_text_ex = svg .selectAll("text.ex_text") .attr("class", "ex_text") .data(ex_text) .join("text") .text((d) => d) .attr("text-anchor", "middle") .attr("y", 50) .attr("x", (d, i) => 200 + i * 100) .attr("font-size", "12px") .attr("fill", "black"); const name_ex = svg .append("text") .text("Name Color : ") .attr("text-anchor", "middle") .attr("y", 32) .attr("x", 707) .attr("font-size", "12px") .attr("fill", "black"); const holo_ex = svg .append("text") .text("ホロライブ") .attr("text-anchor", "middle") .attr("y", 22) .attr("x", 790) .attr("font-size", "15px") .attr("font-weight", 1000) .attr("fill", "#005FFF"); const niji_ex = svg .append("text") .text("にじさんじ") .attr("text-anchor", "middle") .attr("y", 45) .attr("x", 790) .attr("font-size", "15px") .attr("font-weight", 1000) .attr("fill", "#00AA00"); return svg.node(); }34:T31fe,bar_graph2 = { const width = 1000; const height = 1400; const margin = { top: 60, right: 60, bottom: 60, left: 60 }; const center = { ver: width / 2, hor: height / 2 }; const xScale_King = d3 .scaleLinear() .domain([0, d3.max(dataKing_sorted, (d) => d.view)]) .nice() .range([0, center.ver - margin.left - margin.right]); const xScale_Vam = d3 .scaleLinear() .domain([0, d3.max(dataVam_sorted, (d) => d.view)]) .nice() .range([0, center.ver - margin.left - margin.right]); const xScale_Pho = d3 .scaleLinear() .domain([0, d3.max(dataPho_sorted, (d) => d.view)]) .nice() .range([0, center.ver - margin.left - margin.right]); const xScale_God = d3 .scaleLinear() .domain([0, d3.max(dataGod_sorted, (d) => d.view)]) .nice() .range([0, center.ver - margin.left - margin.right]); const yScale_King = d3 .scaleBand() .domain(dataKing_sorted) .range([margin.top, center.hor - margin.bottom]) .padding(0.2); const yScale_Vam = d3 .scaleBand() .domain(dataVam_sorted) .range([margin.top, center.hor - margin.bottom]) .padding(0.2); const yScale_Pho = d3 .scaleBand() .domain(dataPho_sorted) .range([center.hor + margin.top, height - margin.bottom]) .padding(0.2); const yScale_God = d3 .scaleBand() .domain(dataGod_sorted) .range([center.hor + margin.top, height - margin.bottom]) .padding(0.2); const xAxis_King = d3 .axisBottom() .scale(xScale_King) .ticks(4) .tickFormat((d) => d / 10000) .tickSize(-(height / 2 - margin.top - margin.bottom)); const xAxis_Vam = d3 .axisBottom() .scale(xScale_Vam) .ticks(4) .tickFormat((d) => d / 10000) .tickSize(-(height / 2 - margin.top - margin.bottom)); const xAxis_Pho = d3 .axisBottom() .scale(xScale_Pho) .ticks(4) .tickFormat((d) => d / 10000) .tickSize(-(height / 2 - margin.top - margin.bottom)); const xAxis_God = d3 .axisBottom() .scale(xScale_God) .ticks(4) .tickFormat((d) => d / 10000) .tickSize(-(height / 2 - margin.top - margin.bottom)); const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .style("overflow", "visible"); svg //背景 .append("g") .append("rect") .attr("width", width) .attr("height", height) .attr("fill", "aliceblue"); // .attr("opacity", 0.05); svg //タイトル .append("text") .attr("text-anchor", "middle") .attr("x", center.ver / 2) .attr("y", margin.top - 10) .attr("font-size", "20px") .attr("fill", "black") .text("KING"); svg .append("g") .attr("class", "xAxis") .attr( "transform", `translate(${margin.left},${center.hor - margin.bottom} )` ) .call(xAxis_King); svg //日 .append("text") .attr("text-anchor", "middle") .attr("x", margin.left - 15) .attr("y", margin.top - 10) .attr("font-size", "10px") .attr("fill", "black") .text("(日)"); svg //万回 .append("text") .attr("x", center.ver - 33) .attr("y", center.hor - 51) .attr("font-size", "10px") .attr("fill", "black") .text("(万回)"); svg //タイトル .append("text") .attr("text-anchor", "middle") .attr("x", center.ver + center.ver / 2) .attr("y", margin.top - 10) .attr("font-size", "20px") .attr("fill", "black") .text("ヴァンパイア"); svg .append("g") .attr("class", "xAxis") .attr( "transform", `translate(${center.ver + margin.left},${center.hor - margin.bottom} )` ) .call(xAxis_Vam); svg //日 .append("text") .attr("text-anchor", "middle") .attr("x", center.ver + margin.left - 15) .attr("y", margin.top - 10) .attr("font-size", "10px") .attr("fill", "black") .text("(日)"); svg //万回 .append("text") .attr("x", center.ver + center.ver - 33) .attr("y", center.hor - 51) .attr("font-size", "10px") .attr("fill", "black") .text("(万回)"); svg //タイトル .append("text") .attr("text-anchor", "middle") .attr("x", center.ver / 2) .attr("y", center.hor + margin.top - 10) .attr("font-size", "20px") .attr("fill", "black") .text("フォニイ"); svg .append("g") .attr("class", "xAxis") .attr("transform", `translate(${margin.left},${height - margin.bottom} )`) .call(xAxis_Pho); svg //日 .append("text") .attr("text-anchor", "middle") .attr("x", margin.left - 20) .attr("y", center.hor + margin.top - 10) .attr("font-size", "10px") .attr("fill", "black") .text("(日)"); svg //万回 .append("text") .attr("x", center.ver - 73) .attr("y", center.hor + center.hor - 51) .attr("font-size", "10px") .attr("fill", "black") .text("(万回)"); svg //タイトル .append("text") .attr("text-anchor", "middle") .attr("x", center.ver + center.ver / 2) .attr("y", center.hor + margin.top - 10) .attr("font-size", "20px") .attr("fill", "black") .text("神っぽいな"); svg .append("g") .attr("class", "xAxis") .attr( "transform", `translate(${center.ver + margin.left},${height - margin.bottom} )` ) .call(xAxis_God); svg //日 .append("text") .attr("text-anchor", "middle") .attr("x", center.ver + margin.left - 20) .attr("y", center.hor + margin.top - 10) .attr("font-size", "10px") .attr("fill", "black") .text("(日)"); svg //万回 .append("text") .attr("x", center.ver + center.ver - 33) .attr("y", center.hor + center.hor - 51) .attr("font-size", "10px") .attr("fill", "black") .text("(万回)"); const opacity_Scale_King = d3 .scaleLinear() .domain([ d3.min(dataKing_sorted, (d) => d.view_aday), d3.max(dataKing_sorted, (d) => d.view_aday) ]) .range([0.1, 0.7]); const King_bars = svg .append("g") .attr("class", "King") .selectAll("a") .data(dataKing_sorted) .join("a") .attr("xlink:href", (d) => d.song_url) .attr("target", "_blank") .append("rect") .attr("x", margin.left) .attr("y", yScale_King) .attr("width", (d) => xScale_King(d.view)) .attr("height", yScale_King.bandwidth()) .attr("fill", "green") .attr("opacity", (d) => { return opacity_Scale_King(d.view_aday); }); const opacity_Scale_Vam = d3 .scaleLinear() .domain([ d3.min(dataVam_sorted, (d) => d.view_aday), d3.max(dataVam_sorted, (d) => d.view_aday) ]) .range([0.1, 0.7]); const Vam_bars = svg .append("g") .attr("class", "Vam") .selectAll("a") .data(dataVam_sorted) .join("a") .attr("xlink:href", (d) => d.song_url) .attr("target", "_blank") .append("rect") .attr("x", center.ver + margin.left) .attr("y", yScale_Vam) .attr("width", (d) => xScale_Vam(d.view)) .attr("height", yScale_Vam.bandwidth()) .attr("fill", "blue") .attr("opacity", (d) => { return opacity_Scale_Vam(d.view_aday); }); const opacity_Scale_Pho = d3 .scaleLinear() .domain([ d3.min(dataPho_sorted, (d) => d.view_aday), d3.max(dataPho_sorted, (d) => d.view_aday) ]) .range([0.1, 0.7]); const Pho_bars = svg .append("g") .attr("class", "Pho") .selectAll("a") .data(dataPho_sorted) .join("a") .attr("xlink:href", (d) => d.song_url) .attr("target", "_blank") .append("rect") .attr("x", margin.left) .attr("y", yScale_Pho) .attr("width", (d) => xScale_Pho(d.view)) .attr("height", yScale_Pho.bandwidth()) .attr("fill", "chocolate") .attr("opacity", (d) => { return opacity_Scale_Pho(d.view_aday); }); const opacity_Scale_God = d3 .scaleLinear() .domain([ d3.min(dataGod_sorted, (d) => d.view_aday), d3.max(dataGod_sorted, (d) => d.view_aday) ]) .range([0.1, 0.7]); const God_bars = svg .append("g") .attr("class", "God") .selectAll("a") .data(dataGod_sorted) .join("a") .attr("xlink:href", (d) => d.song_url) .attr("target", "_blank") .append("rect") .attr("x", center.ver + margin.left) .attr("y", yScale_God) .attr("width", (d) => xScale_God(d.view)) .attr("height", yScale_God.bandwidth()) .attr("fill", "darkorchid") .attr("opacity", (d) => { return opacity_Scale_God(d.view_aday); }); svg //テキストラベル .selectAll("text.label") .attr("class", "label") .data(dataKing_sorted) .join("text") .attr("text-anchor", "middle") .attr("x", margin.left - 15) .attr("y", (d) => yScale_King(d) + 10) .attr("font-size", "10px") .text((d) => d.speed); svg .selectAll("text.label") .attr("class", "label") .data(dataVam_sorted) .join("text") .attr("text-anchor", "middle") .attr("x", center.ver + margin.left - 15) .attr("y", (d) => yScale_Vam(d) + 13) .attr("font-size", "10px") .text((d) => d.speed); svg .selectAll("text.label") .attr("class", "label") .data(dataPho_sorted) .join("text") .attr("text-anchor", "middle") .attr("x", margin.left - 20) .attr("y", (d) => yScale_Pho(d) + 25) .attr("font-size", "15px") .text((d) => d.speed); svg .selectAll("text.label") .attr("class", "label") .data(dataGod_sorted) .join("text") .attr("text-anchor", "middle") .attr("x", center.ver + margin.left - 20) .attr("y", (d) => yScale_God(d) + 37) .attr("font-size", "15px") .text((d) => d.speed); const tooltip = svg .append("g") .attr("class", "tooltip") .style("pointer-events", "none") .style("visibility", "hidden"); tooltip .append("rect") .attr("fill", "white") .attr("stroke", "#DDDDDD") .attr("width", 145) .attr("height", 105) .attr("opacity", 0.8); const showMyTooltip = (event) => { const mouseX = d3.pointer(event)[0] + 10; const mouseY = d3.pointer(event)[1] + 10; const datum = d3.select(event.target).datum(); tooltip.attr("transform", `translate(${mouseX},${mouseY})`); tooltip .selectAll("text") .data([ { label: "name", value: datum.name }, { label: "affiliation", value: datum.affiliation }, { label: "view", value: datum.view }, { label: "aday_view", value: datum.view_aday } ]) .join("text") .text((d, i) => { if (i == 0) { return `${d.value}`; } else { return `${d.label}: ${d.value}`; } }) .attr("x", (d) => { if (datum.name.length > 6) { return "3px"; } else { return "10px"; } }) .attr("y", (d, i) => { if (i === 0) { return 26; } else { return 34 + 20 * i; } }) .attr("fill", (d, i) => { if (i === 0) { if (datum.affiliation == "にじさんじ") { return "#00AA00"; } else { return "#005FFF"; } } else { return "gray"; } }) .attr("letter-spacing", (d, i) => { if (i === 0) { if (datum.name.length > 6) { return "-1.4px"; } else { return "0.5px"; } } else { return "0.5px"; } }) .attr("font-size", (d, i) => { if (i === 0) { if (datum.name.length > 6 && datum.name.length < 11) { return "11px"; } else if (datum.name.length > 10) { return "10px"; } else { return "12px"; } } else { return "12px"; } }) .attr("font-weight", (d, i) => (i === 0 ? "bold" : "normal")); tooltip .append("image") .attr("x", 145 - 40) .attr("y", 0) .attr("width", 40) .attr("height", 40) .attr("opacity", 0.8) .attr("xlink:href", (d) => datum.img_url); tooltip.style("visibility", "visible"); // d3.select(event.currentTarget).attr("opacity", 1); }; const hideMyTooltip = (event) => { tooltip.style("visibility", "hidden"); }; King_bars.on("pointerenter pointermove", showMyTooltip).on( "pointerleave", hideMyTooltip ); Vam_bars.on("pointerenter pointermove", showMyTooltip).on( "pointerleave", hideMyTooltip ); Pho_bars.on("pointerenter pointermove", showMyTooltip).on( "pointerleave", hideMyTooltip ); God_bars.on("pointerenter pointermove", showMyTooltip).on( "pointerleave", hideMyTooltip ); svg .selectAll("g.xAxis, g.yAxis") .selectAll("line, path") .attr("stroke", "white") .attr("opacity", 1); return svg.node(); }35:[] 2f:{"title":"VTuber_Music","cells":[{"id":2468,"value":"# VTuber_Music","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"# 推しの再生回数はなぜ伸びないのか？\n2Dや3Dのキャラクターを用いて配信するYouTuber、バーチャルYouTuber（以下 VTuber）は今では16000人を超えている。Vtuberは各々の強みを生かすためゲーム・雑談・歌・演技など様々な配信をしている。
\n既存の曲をカバーした動画を投稿する**「歌ってみた」**において再生回数を増やすことは歌唱を売りとするVTuberにとって重要だといえる。
\nしかし、人数が多いため曲が被ることが多々あり埋もれてしまうVTuberがいるのも事実である。","pinned":false,"hidden":false,"mode":"md"},{"id":2516,"value":"### VTuberとしての人気　→　再生回数？","pinned":false,"hidden":false,"mode":"md"},{"id":2525,"value":"再生回数が増えるのはどのような動画・VTuberだろうか？
\nYouTubeを日常的に閲覧している人なら「チャンネル登録者数」と思うかもしれない。しかしYouTubeにとって登録者数は人気度・認知度といえるため
**有名・人気にならなければ再生回数は増えない**　ということになってしまう。
","pinned":false,"hidden":false,"mode":"md"},{"id":2548,"value":"そこで「歌ってみた」の再生回数に関するデータを可視化・考察することによって再生回数につながる要因または戦略のヒントが明らかになるのではないかと考えた。
\n推しの再生回数を増やすべく、応援の仕方にも生かすことができるかもしれない。\n","pinned":false,"hidden":false,"mode":"md"},{"id":584,"value":"### 再生回数につながる要素","pinned":false,"hidden":false,"mode":"md"},{"id":589,"value":"再生が増える要因として","pinned":false,"hidden":false,"mode":"md"},{"id":2585,"value":" - VTuber自身の熱心なファンによるリピート再生\n - 原曲のファン/音楽を趣味とする人（以下一般層）の再生
","pinned":false,"hidden":false,"mode":"md"},{"id":2590,"value":"に大きく分けられると考えた。","pinned":false,"hidden":false,"mode":"md"},{"id":2598,"value":"**熱心なファンの指標として**\n- チャンネル登録者数(VTuberとしての人気)\n- コメント数\n- 高評価(like)数","pinned":false,"hidden":false,"mode":"md"},{"id":2643,"value":"**一般層に歌が良い・上手いVTuberとして認知または検索にかかりやすい指標として**\n- これまでの歌ってみた動画におけるハーフミリオン（50万回以上再生）の個数\n- これまでの歌ってみた動画におけるトリプルミリオン（300万回以上再生）の個数","pinned":false,"hidden":false,"mode":"md"},{"id":2649,"value":" を選び、VTuber界での二大事務所である「ホロライブ」「にじさんじ」に所属するVtuberについて調査した。
\n 対象曲は、対象VTuberが多くカバーしている「KING」「ヴァンパイア」「フォニイ」「神っぽいな」の4曲である。","pinned":false,"hidden":false,"mode":"md"},{"id":2896,"value":"データの収集方法の詳細は記事の下部に記載
\n※1.葛葉の[KING](https://youtu.be/oPAcjv__fbc)については再生回数が3000万回を超えているため、可視化の縮尺上割愛させていただきました。
\n※2.緑仙の[ヴァンパイア](https://youtu.be/0nqghnTCbvE)についてはハーフミリオン数が57個のため、可視化の縮尺上割愛させていただきました。

","pinned":false,"hidden":false,"mode":"md"},{"id":2742,"value":"# 動画人気のための要素と再生回数","pinned":false,"hidden":false,"mode":"md"},{"id":2739,"value":"- 縦軸：再生回数
\n- 横軸：「登録者」「コメント」「高評価」「ハーフミリオン」を変更可能
\n- アイコン縁の色：　ホロライブ→青　にじさんじ→緑　
\n- アイコンにカーソルを合わせると値や名前/所属が確認でき、\nクリックをすると動画を別タブで開くことができます。","pinned":false,"hidden":false,"mode":"md"},{"id":192,"value":"viewof song = Inputs.select(songs, { value: \"KING\", label: \"Song\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2004,"value":"viewof factor_nam = Inputs.select(factors, {\n value: \"登録者\",\n label: \"Factor\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":306,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2809,"value":"- 登録者数と再生回数に正の相関はあるものの予想していたよりも強くはなかった。これは登録者が多くないVTuberにとってチャンスであるかもしれない。

\n- 一方で、コメント数と高評価数についてはとても強い正の相関が見られた。感銘を受けた視聴者が評価をしているとすれば、歌唱（動画）自体の評価が再生回数につながっていると考えられる。

\n- ハーフミリオン数と再生回数の相関はあまり見られなかった。","pinned":false,"hidden":false,"mode":"md"},{"id":2844,"value":"歌唱が強みのVTuberや初めての歌ってみた動画投稿など、人気もしくは話題になった「歌ってみた」はどの要素についても全体の傾向から大きく外れていた。しかし、VTuber界に普段から触れている人しか読み取ることができない。

\n**そこで、これらの要素を1つのグラフに集約することで要素同士の関係・全体の傾向を可視化してみる。**

","pinned":false,"hidden":false,"mode":"md"},{"id":2866,"value":"# 再生回数と要素同士の関連","pinned":false,"hidden":false,"mode":"md"},{"id":2873,"value":"- 縦軸：再生回数　
\n- 横軸：登録者数
\n- 三角形の大きさ：各要素(コメント・高評価・ハーフミリオン・トリプルミリオン)の大きさや量
\n- 図形にカーソルを合わせると各要素の値やVTuber名が確認でき、クリックをすると動画を別タブで開くことができます。","pinned":false,"hidden":false,"mode":"md"},{"id":2167,"value":"viewof song2 = Inputs.select(songs, { value: \"KING\", label: \"Song\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1478,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2365,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":2956,"value":"- 再生回数がとても多く、傾向から大きく外れた歌ってみた動画は、コメントと高評価が他動画に比べかなり多い。 → 高評価は1つのアカウントにつき1回しかできないため多くの人に支持されていると考えられる。

\n- 300万再生などの大台を突破しているVTuberは複数個のヒットした「歌ってみた動画」を持っていることが多い。\n → 1つの「歌ってみた」が大きくヒットするとその後の曲もヒットする可能性

\n- 登録者数が20万人台でもミリオンを超えるヒットは存在する。

\n- 同程度の再生回数のVTuberで比較するとホロライブ所属のVTuberがコメント・高評価ともに多い。

","pinned":false,"hidden":false,"mode":"md"},{"id":3112,"value":"これら以外にも、着目する要素の組み合わせによって多くの事実を発見・考察できるかもしれない。

","pinned":false,"hidden":false,"mode":"md"},{"id":3043,"value":"### 投稿タイミングの戦略について","pinned":false,"hidden":false,"mode":"md"},{"id":805,"value":" 次に再生回数に影響する戦略の一つとして動画を投稿するタイミングがあると考えた。\n
オリジナルの曲（原曲）が投稿されてから、すぐに「歌ってみた動画」を投稿することにはメリット・デメリットが存在する。","pinned":false,"hidden":false,"mode":"md"},{"id":825,"value":"**メリット**\n - 他のVTuberに埋もれることがない\n - 音楽に関心の高い一般層の検索で見つかる可能性が高い → 評価されれば新規ファンの獲得につながる","pinned":false,"hidden":false,"mode":"md"},{"id":834,"value":"**デメリット**\n - 曲が流行するか読むことが難しい\n - カバーの参考が少ないので歌唱力が問われる\n - 収録、音源作成/mix、イラスト/動画の依頼などを短期間で行うため、行動力と経済的余裕が求められる","pinned":false,"hidden":false,"mode":"md"},{"id":849,"value":" 歌唱を売りとする/したいVTuberは「歌ってみた動画」を人より速く投稿する、瞬発力を重視する傾向がある。

\n ** そこで、投稿タイミングと再生回数がどのように関係しているのかを可視化をした。**

","pinned":false,"hidden":false,"mode":"md"},{"id":3065,"value":"# 投稿タイミングと再生回数","pinned":false,"hidden":false,"mode":"md"},{"id":862,"value":"- 縦軸：原曲が投稿されてから歌ってみた動画投稿日までの経過日数
\n- 横軸：再生回数
\n- 色の透明度：1日あたりの再生回数　＝（再生回数 /「歌ってみた動画」が投稿されてからの経過日数）が多いほど色が濃くなる\n- 図形にカーソルを合わせると値や名前/所属が確認でき、クリックをすると動画を別タブで開くことができます。","pinned":false,"hidden":false,"mode":"md"},{"id":1663,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":3134,"value":"- 4曲を比較して、投稿タイミングと再生回数の関連性はあまり見つけられなかった。

\n- 1日あたりの再生回数においても投稿タイミングとの関連性は見つけられなかった。

\n- 再生回数の多い「歌ってみた動画」は投稿日時のタイミングに関係なく再生が増え続けていることがわかる。

","pinned":false,"hidden":false,"mode":"md"},{"id":3149,"value":"今回は調査日の再生回数のみであったため、\n再生回数増加の経過や原曲の流行など要素を追加し、長期間のデータを集めることによって新たな事実が発見できるかもしれない。

","pinned":false,"hidden":false,"mode":"md"},{"id":3175,"value":"### まとめ","pinned":false,"hidden":false,"mode":"md"},{"id":3178,"value":" VTuberが既存の曲をカバーし、動画を投稿する「歌ってみた」についての可視化を行った。
\n ","pinned":false,"hidden":false,"mode":"md"},{"id":3206,"value":"再生回数と様々な要素の可視化では、必ずしも「VTuberとしての人気＝チャンネル登録者数」　が曲のヒットに必須条件ではないことや、動画自体の評価と再生回数は大きく関連していることがわかった。これから歌を強みとして再生回数を増やし、人気を得ていきたいVTuberにとっては嬉しい事実になるのではないだろうか。","pinned":false,"hidden":false,"mode":"md"},{"id":3211,"value":"また、今回は戦略の一つとして動画の投稿タイミングについて調査したが、他にも「動画のタイトル」「動画のサムネイル画像」「選曲」など様々な要素が考えられる。再生回数は増加していくため、ある一点の調査ではなく長いスパンのデータを集めることによって時間の経過が加わり、より興味深いデータ可視化や「歌ってみた」の分析ができるだろう。","pinned":false,"hidden":false,"mode":"md"},{"id":3227,"value":"この記事をきっかけとしてVTuber文化や「歌ってみた」について少しでも興味が深まっていたら嬉しい。

\n","pinned":false,"hidden":false,"mode":"md"},{"id":3273,"value":"
","pinned":false,"hidden":false,"mode":"md"},{"id":3235,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":2717,"value":"### データ調査方法\n- 調査方法： [YouTube](https://www.youtube.com/)で対象動画を検索しデータを調査、Googleスプレッドシートに記入\n- 対象VTuber：対象楽曲の歌ってみた動画を2022/1/4時点で投稿している「[ホロライブ](https://hololive.hololivepro.com/talents?gp=hololive)」「[にじさんじ](https://www.nijisanji.jp/members?filter=%E3%81%AB%E3%81%98%E3%81%95%E3%82%93%E3%81%98&order=subscribe_orders&asc=true)」所属の日本のVTuber\n- 対象楽曲：「[KING](https://youtu.be/cm-l2h6GB8Q)」「[ヴァンパイア](https://youtu.be/e1xCOsgWG0M)」「[フォニイ](https://youtu.be/9QLT1Aw_45s)」「[神っぽいな](https://youtu.be/EHBFKhLUVig)」\n- 対象動画：VTuber本人のチャンネルに投稿された本人（ソロ）の歌ってみた動画\n - shortバージョン、替え歌、明らかに話題性を狙ったアレンジなどは対象外\n - 踊って・歌ってみた（VTuber自身が3Dで踊りながら歌う）動画は対象外（ただし3Dモデルを使用したアニメーション（MMD）が映像として使用されているものは含む）\n- 調査日：2022/1/4　(ハーフミリオン数・トリプルミリオン数のみ2022/1/21)\n- 調査データ\n - 名前\n - 所属事務所（ホロライブ or にじさんじ）\n - 再生回数\n - チャンネル登録者数(YouTubeの仕様により省略された値)\n - 動画投稿日時\n - コメント数\n - 高評価(like)数(YouTubeの仕様により省略された値)\n - 歌ってみた動画におけるハーフミリオン数\n - 歌ってみた動画におけるトリプルミリオン数","pinned":false,"hidden":false,"mode":"md"},{"id":3292,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":3284,"value":"**発表用工夫点**","pinned":false,"hidden":false,"mode":"md"},{"id":2247,"value":"{\n const svg = d3.create(\"svg\").attr(\"width\", 400).attr(\"height\", 200);\n\n const tri = svg\n .selectAll(\"g\")\n .data(tricreate(70, 100, 100, 80, 60, 40))\n .join(\"path\")\n .attr(\"d\", (d) => d)\n .attr(\"fill\", (d, i) => `hsl(${i * 50 + 10},100%,50%)`);\n\n const ougi = svg\n .selectAll(\"g\")\n .data(ougicreate(250, 100, 100, 50, 60, 40))\n .join(\"path\")\n .attr(\"d\", (d) => d)\n .attr(\"fill\", (d, i) => `hsl(${i * 50 + 10},100%,50%)`);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":785,"value":"---\n以下　データ整理用","pinned":false,"hidden":false,"mode":"md"},{"id":27,"value":"https://docs.google.com/spreadsheets/d/1QuDs-GSokbv2hmICKhXc3Uj8UXovfLIhM1tgH8iAJmU/edit#gid=0","pinned":false,"hidden":false,"mode":"md"},{"id":1442,"value":"function xCl(cx, r, angle) {\n return cx + r * Math.cos((Math.PI / 180) * angle);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1446,"value":"function yCl(cy, r, angle) {\n return cy + r * Math.sin((Math.PI / 180) * angle);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1449,"value":"function path(cx, cy, r, angleS, angleE) {\n const x1 = xCl(cx, r, angleS);\n const y1 = yCl(cy, r, angleS);\n const x2 = xCl(cx, r, angleE);\n const y2 = yCl(cy, r, angleE);\n const dx = x2 - x1;\n const dy = y2 - y1;\n return `M ${cx},${cy} L ${x1},${y1} a ${r} ${r} ${angleS} 0 1 ${dx},${dy} z`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2261,"value":"function pathtri(cx, cy, r, angleS, angleE) {\n const x1 = xCl(cx, r, angleS);\n const y1 = yCl(cy, r, angleS);\n const x2 = xCl(cx, r, angleE);\n const y2 = yCl(cy, r, angleE);\n const dx = x2 - x1;\n const dy = y2 - y1;\n return `M ${cx},${cy} L ${x1},${y1} L ${x2},${y2} z`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2259,"value":"function tricreate(cx, cy, r0, r1, r2, r3) {\n //4等分\n const rSize = [r0, r1, r2, r3];\n const pathArray = [];\n const angleS = [-90, 0, 90, 180, 270];\n for (var i = 0; i < angleS.length; i++) {\n pathArray.push(pathtri(cx, cy, rSize[i], angleS[i], angleS[i] + 90));\n }\n return pathArray;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1467,"value":"// function ougicreate(cx, cy, r0, r1, r2, r3, r4, r5) {//６等分\n// const rSize = [r0, r1, r2, r3, r4, r5];\n// const pathArray = [];\n// const angleS = [-30, 30, 90, 150, 210, 270];\n// for (var i = 0; i < angleS.length; i++) {\n// pathArray.push(path(cx, cy, rSize[i], angleS[i], angleS[i] + 60));\n// }\n// return pathArray;\n// }\n// function ougicreate(cx, cy, r0, r1, r2, r3, r4) {\n// //５等分\n// const rSize = [r0, r1, r2, r3, r4];\n// const pathArray = [];\n// const angleS = [-90, -18, 54, 126, 198];\n// for (var i = 0; i < angleS.length; i++) {\n// pathArray.push(path(cx, cy, rSize[i], angleS[i], angleS[i] + 72));\n// }\n// return pathArray;\n// }\nfunction ougicreate(cx, cy, r0, r1, r2, r3, r4) {\n //4等分\n const rSize = [r0, r1, r2, r3];\n const pathArray = [];\n const angleS = [-90, 0, 90, 180, 270];\n for (var i = 0; i < angleS.length; i++) {\n pathArray.push(path(cx, cy, rSize[i], angleS[i], angleS[i] + 90));\n }\n return pathArray;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2021,"value":"function factorPick(_factor) {\n if (_factor == \"登録者\") {\n return 0;\n } else if (_factor == \"コメント\") {\n return 1;\n } else if (_factor == \"高評価\") {\n return 2;\n } else if (_factor == \"ハーフミリオン\") {\n return 3;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1007,"value":"function compareSpeed(a, b) {\n return a.speed - b.speed;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1323,"value":"function compareView(a, b) {\n return a.view - b.view;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"songs = resources.map((d) => d.song)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2009,"value":"factors = [\"登録者\", \"コメント\", \"高評価\", \"ハーフミリオン\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"resources = d3.csvParse(resourcesStr)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2215,"value":"factor = factorPick(factor_nam)","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"uri = resources.find((d) => d.song === song).url","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"dataset = d3.tsv(uri, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1326,"value":"dataset_sorted = dataset.sort(compareView)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2169,"value":"uri2 = resources.find((d) => d.song === song2).url","pinned":false,"hidden":false,"mode":"ojs"},{"id":2171,"value":"dataset2 = d3.tsv(uri2, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2173,"value":"dataset2_sorted = dataset2.sort(compareView)","pinned":false,"hidden":false,"mode":"ojs"},{"id":578,"value":"urlKing = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vS0UcXm8VevQD4ZnBCon73wBcHfEgDj3COIr7LEoZL4SAMPLsPVMM48dI4mKfKj77Ts3FNTKaCJHStr/pub?gid=1721387055&single=true&output=tsv\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":888,"value":"urlVam = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vS0UcXm8VevQD4ZnBCon73wBcHfEgDj3COIr7LEoZL4SAMPLsPVMM48dI4mKfKj77Ts3FNTKaCJHStr/pub?gid=0&single=true&output=tsv\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":897,"value":"urlPho=\"https://docs.google.com/spreadsheets/d/e/2PACX-1vS0UcXm8VevQD4ZnBCon73wBcHfEgDj3COIr7LEoZL4SAMPLsPVMM48dI4mKfKj77Ts3FNTKaCJHStr/pub?gid=1893536763&single=true&output=tsv\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":905,"value":"urlGod = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vS0UcXm8VevQD4ZnBCon73wBcHfEgDj3COIr7LEoZL4SAMPLsPVMM48dI4mKfKj77Ts3FNTKaCJHStr/pub?gid=1015095506&single=true&output=tsv\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":575,"value":"dataKing = d3.tsv(urlKing, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1661,"value":"dataKing_sorted = dataKing.sort(compareSpeed)","pinned":false,"hidden":false,"mode":"ojs"},{"id":893,"value":"dataVam = d3.tsv(urlVam, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1659,"value":"dataVam_sorted = dataVam.sort(compareSpeed)","pinned":false,"hidden":false,"mode":"ojs"},{"id":900,"value":"dataPho = d3.tsv(urlPho, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1657,"value":"dataPho_sorted = dataPho.sort(compareSpeed)","pinned":false,"hidden":false,"mode":"ojs"},{"id":904,"value":"dataGod = d3.tsv(urlGod, d3.autoType)\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1652,"value":"dataGod_sorted = dataGod.sort(compareSpeed)","pinned":false,"hidden":false,"mode":"ojs"},{"id":913,"value":"// data4Song = dataKing.concat(dataVam).concat(dataPho).concat(dataGod)\n// data4Song = dataKing.concat(dataVam)\ndata4Song = dataPho.concat(dataGod).concat(dataVam).concat(dataKing)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1013,"value":"data4Song_sorted = data4Song.sort(compareView)","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"resourcesStr = `song,url\nKING,https://docs.google.com/spreadsheets/d/e/2PACX-1vS0UcXm8VevQD4ZnBCon73wBcHfEgDj3COIr7LEoZL4SAMPLsPVMM48dI4mKfKj77Ts3FNTKaCJHStr/pub?gid=1721387055&single=true&output=tsv\nヴァンパイア,https://docs.google.com/spreadsheets/d/e/2PACX-1vS0UcXm8VevQD4ZnBCon73wBcHfEgDj3COIr7LEoZL4SAMPLsPVMM48dI4mKfKj77Ts3FNTKaCJHStr/pub?gid=0&single=true&output=tsv\nフォニイ,https://docs.google.com/spreadsheets/d/e/2PACX-1vS0UcXm8VevQD4ZnBCon73wBcHfEgDj3COIr7LEoZL4SAMPLsPVMM48dI4mKfKj77Ts3FNTKaCJHStr/pub?gid=1893536763&single=true&output=tsv\n神っぽいな,https://docs.google.com/spreadsheets/d/e/2PACX-1vS0UcXm8VevQD4ZnBCon73wBcHfEgDj3COIr7LEoZL4SAMPLsPVMM48dI4mKfKj77Ts3FNTKaCJHStr/pub?gid=1015095506&single=true&output=tsv`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2369,"value":"ColArray = [\"#F5B346\", \"#69DDFF\", \"#FFAAD2\", \"#3DDC97\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2476,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}