31:T4b3,{ const width = 900; const height = 30; const margin = { top: 0, right: 10, bottom: 0, left: 300 }; const data = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23 ]; const xScale = d3 .scaleBand() .domain(data) .range([margin.left, width - margin.right]); const xAxis = d3.axisBottom().scale(xScale).tickSize(5).ticks(23); const svg = d3.create("svg").attr("width", width).attr("height", height); svg .append("g") .attr("class", "xAxis") .attr("transform", `translate(0, ${height / 2})`) .call(xAxis) .selectAll("text"); const color = d3 .scaleLinear() .domain([1, 6, 12, 18, 23]) .range(["#233344", "#E6E6E6", "#CFCFCF", "#D64E5C", "#D64E5C"]); const rects = svg.append("g").selectAll("rect").data(data).join("rect"); rects .attr("x", xScale) .attr("width", xScale.bandwidth() - 2) .attr("height", 13) .attr("fill", (d) => color(d)); svg .selectAll("g.xAxis, g.yAxis") .selectAll("line, path") .attr("stroke", "white") .attr("opacity", 0.5); return svg.node(); }32:Ted5,{ // サイズと余白 const width = 900; const height = 800; const margin = { top: 80, right: 30, bottom: 30, left: 50 }; // スケール関数（x, y） const xScale = d3 .scaleBand() .domain([ "interhigh2010", "wintercup2010", "interhigh2011", "wintercup2011", "interhigh2012", "wintercup2012", "interhigh2013", "wintercup2013", "interhigh2014", "wintercup2014", "interhigh2015", "wintercup2015", "interhigh2016", "wintercup2016", "interhigh2017", "wintercup2017", "interhigh2018", "wintercup2018", "interhigh2019", "wintercup2019", "wintercup2020", "interhigh2021", "wintercup2021" ]) .range([margin.left, width - margin.right]); const yScale = d3 .scaleBand() .domain(Prefs) .range([margin.top, height - margin.bottom]); // 軸関数 const xAxis = d3.axisBottom().scale(xScale).tickSize(-5); const yAxis = d3.axisLeft().scale(yScale); // SVGの生成 const svg = d3.create("svg").attr("width", width).attr("height", height); // 背景 svg .append("rect") .attr("width", width) .attr("height", height) .attr("fill", "white") .attr("opacity", 0.1); // X,Y軸の生成 svg .append("g") .attr("class", "xAxis") .attr("transform", `translate(0, ${margin.top})`) .call(xAxis) .selectAll("text") // スケールに表示された文字を選択する .attr("x", 5) // X座標を指定する .attr("y", -15) // Y座標を指定する .attr("transform", "rotate(-45)") // 文字を時計回りに90度回転させる .style("text-anchor", "start"); //　文字の表示開始位置を指定にする svg .append("g") .attr("class", "yAxis") .attr("transform", `translate(${margin.left} , 0)`) .call(yAxis) .selectAll("text"); //背景のrectと分ける const rects = svg .append("g") // インスペクタを見やすくするためにグループ追加【杉本】 .selectAll("rect.dot") .data(AllData) .join("rect") .attr("class", "dot"); // 色分け const color = d3 .scaleLinear() .domain([1, 6, 12, 18, 23]) .range(["#233344", "#E6E6E6", "#CFCFCF", "#D64E5C", "#D64E5C"]); const dot = svg .append("g") .selectAll("g") .data(AllData) .join("g") .attr("class", "row") .attr("transform", function (d, i) { return ( "translate(" + xScale(d.season + d.era) + "," + yScale(d.Prefecture) + ")" ); }) .append("rect") .attr("class", "cell") .attr("width", xScale.bandwidth() - 2) .attr("height", yScale.bandwidth() - 2) .attr("rx", 2) .attr("ry", 2) .attr("opacity", 1) .attr("fill", function (d) { return color(d.count); }) .on("mouseover", function (e, d, i) { tooltip .html( `` ) .style("visibility", "visible"); d3.select(this).attr("opacity", 0.3); }) .on("mousemove", function (e) { if (e.pageX >= 850) { tooltip .style("top", e.pageY + 10 + "px") .style("left", e.pageX - (e.pageX - 800) + "px"); } if (e.pageX < 850) { tooltip .style("top", e.pageY + 10 + "px") .style("left", e.pageX + 10 + "px"); } }) .on("mouseout", function () { tooltip.html(``).style("visibility", "hidden"); d3.select(this).transition().attr("opacity", 1); }); svg .selectAll("g.xAxis, g.yAxis") .selectAll("line, path") .attr("opacity", 0.5); return svg.node(); }33:T3874,{ width; const height = 500; const svg = d3.create("svg").attr("width", width).attr("height", height); const margin = { top: 30, right: 30, bottom: 30, left: 50 }; const xjiku = d3 .scaleBand() .domain([ "interhigh2010", "wintercup2010", "interhigh2011", "wintercup2011", "interhigh2012", "wintercup2012", "interhigh2013", "wintercup2013", "interhigh2014", "wintercup2014", "interhigh2015", "wintercup2015", "interhigh2016", "wintercup2016", "interhigh2017", "wintercup2017", "interhigh2018", "wintercup2018", "interhigh2019", "wintercup2019", "wintercup2020", "interhigh2021", "wintercup2021" ]) .range([margin.left, width - margin.right]); const yScale_a = d3 .scaleBand() .domain([ "1位", "2位", "3位", "4位", " ", "4回戦", "3回戦", "2回戦", "1回戦", "　", "予選" ]) .range([margin.top, height - margin.bottom]); const yScale = d3 .scaleBand() .domain([1, 2, 3, 4, 6, 8, 16, 32, 64, 80, 100]) .range([margin.top, height - margin.bottom]); const xAxis = d3.axisBottom().scale(xjiku).tickSize(-5); const yAxis = d3.axisLeft().scale(yScale_a).ticks(10); svg .append("g") .attr("transform", `translate(0, ${height / 2 - margin.bottom + 130} )`) .call(xAxis) .selectAll("text") // スケールに表示された文字を選択する .attr("x", 20) // X座標を指定する .attr("y", -5) // Y座標を指定する .attr("transform", "rotate(90)") // 文字を時計回りに90度回転させる .style("text-anchor", "start"); //　文字の表示開始位置を指定にする; svg .append("g") .attr("transform", `translate(${margin.left}, -20)`) .call(yAxis); const strokeWidth = 0.7; const strokeLinecap = "round"; const strokeLinejoin = "round"; const zure = 24; const line2 = d3 .line() .curve(d3.curveBumpX) .x((d) => xjiku(d.season + d.era) + zure) .y((d) => yScale(d.rank)); for (let i = 0; i <= 17; i++) { const color = "#233344"; const Op = 1.0; if (eighteenschoolsArr[i] == eighteenschools) { const color = "#D64E5C"; const Op = 1.0; const data = StrongHighSchool.get(eighteenschoolsArr[i]); svg .append("path") .datum(data) .attr("fill", "none") .attr("stroke", color) .attr("stroke-width", strokeWidth) .attr("stroke-linecap", strokeLinecap) .attr("stroke-linejoin", strokeLinejoin) .attr("stroke-opacity", Op) .attr("d", line2); svg .append("g") .selectAll("circle") .data(StrongHighSchool.get(eighteenschoolsArr[i])) .enter() .append("circle") .attr("cx", function (d) { return xjiku(d.season + d.era) + zure; }) .attr("cy", function (d) { return yScale(d.rank); }) .attr("fill", color) .attr("opacity", Op) .attr("r", 3) .on("mouseover", function (e, d, i) { tooltip .html( `` ) .style("visibility", "visible"); d3.select(this).attr("opacity", 0.3); }) .on("mousemove", function (e) { if (e.pageX >= 850) { tooltip .style("top", e.pageY + 10 + "px") .style("left", e.pageX - (e.pageX - 800) + "px"); } if (e.pageX < 850) { tooltip .style("top", e.pageY + 10 + "px") .style("left", e.pageX + 10 + "px"); } }) .on("mouseout", function () { tooltip.html(``).style("visibility", "hidden"); d3.select(this).transition().attr("opacity", 1); }); } else { const color = "gray"; const Op = 0.3; const data = StrongHighSchool.get(eighteenschoolsArr[i]); svg .append("path") .datum(data) .attr("fill", "none") .attr("stroke", color) .attr("stroke-width", strokeWidth) .attr("stroke-linecap", strokeLinecap) .attr("stroke-linejoin", strokeLinejoin) .attr("stroke-opacity", Op) .attr("d", line2); svg .append("g") .selectAll("circle") .data(StrongHighSchool.get(eighteenschoolsArr[i])) .enter() .append("circle") .attr("cx", function (d) { return xjiku(d.season + d.era) + zure; }) .attr("cy", function (d) { return yScale(d.rank); }) .attr("fill", color) .attr("opacity", Op) .attr("r", 2); } } if (eighteenschools == " ") { const data1 = StrongHighSchool.get("札幌山の手"); const data2 = StrongHighSchool.get("聖カタリナ学園"); const data3 = StrongHighSchool.get("大阪薫英女学院"); const data4 = StrongHighSchool.get("昭和学院"); const data5 = StrongHighSchool.get("岐阜女子"); const data6 = StrongHighSchool.get("桜花学園"); svg .append("path") .datum(data1) .attr("fill", "none") .attr("stroke", "#75B066") .attr("stroke-width", strokeWidth) .attr("stroke-linecap", strokeLinecap) .attr("stroke-linejoin", strokeLinejoin) .attr("stroke-opacity", 1) .attr("d", line2); svg .append("g") .selectAll("circle") .data(data1) .enter() .append("circle") .attr("cx", function (d) { return xjiku(d.season + d.era) + zure; }) .attr("cy", function (d) { return yScale(d.rank); }) .attr("fill", "#75B066") .attr("opacity", 1) .attr("r", 3) .on("mouseover", function (e, d, i) { tooltip .html( `` ) .style("visibility", "visible"); d3.select(this).attr("opacity", 0.3); }) .on("mousemove", function (e) { if (e.pageX >= 850) { tooltip .style("top", e.pageY + 10 + "px") .style("left", e.pageX - (e.pageX - 800) + "px"); } if (e.pageX < 850) { tooltip .style("top", e.pageY + 10 + "px") .style("left", e.pageX + 10 + "px"); } }) .on("mouseout", function () { tooltip.html(``).style("visibility", "hidden"); d3.select(this).transition().attr("opacity", 1); }); svg .append("path") .datum(data2) .attr("fill", "none") .attr("stroke", "#9AC267") .attr("stroke-width", strokeWidth) .attr("stroke-linecap", strokeLinecap) .attr("stroke-linejoin", strokeLinejoin) .attr("stroke-opacity", 1) .attr("d", line2); svg .append("g") .selectAll("circle") .data(data2) .enter() .append("circle") .attr("cx", function (d) { return xjiku(d.season + d.era) + zure; }) .attr("cy", function (d) { return yScale(d.rank); }) .attr("fill", "#9AC267") .attr("opacity", 1) .attr("r", 3) .on("mouseover", function (e, d, i) { tooltip .html( `` ) .style("visibility", "visible"); d3.select(this).attr("opacity", 0.3); }) .on("mousemove", function (e) { if (e.pageX >= 850) { tooltip .style("top", e.pageY + 10 + "px") .style("left", e.pageX - (e.pageX - 800) + "px"); } if (e.pageX < 850) { tooltip .style("top", e.pageY + 10 + "px") .style("left", e.pageX + 10 + "px"); } }) .on("mouseout", function () { tooltip.html(``).style("visibility", "hidden"); d3.select(this).transition().attr("opacity", 1); }); svg .append("path") .datum(data3) .attr("fill", "none") .attr("stroke", "#ffe070") .attr("stroke-width", strokeWidth) .attr("stroke-linecap", strokeLinecap) .attr("stroke-linejoin", strokeLinejoin) .attr("stroke-opacity", 1) .attr("d", line2); svg .append("g") .selectAll("circle") .data(data3) .enter() .append("circle") .attr("cx", function (d) { return xjiku(d.season + d.era) + zure; }) .attr("cy", function (d) { return yScale(d.rank); }) .attr("fill", "#ffe070") .attr("opacity", 1) .attr("r", 3) .on("mouseover", function (e, d, i) { tooltip .html( `` ) .style("visibility", "visible"); d3.select(this).attr("opacity", 0.3); }) .on("mousemove", function (e) { if (e.pageX >= 850) { tooltip .style("top", e.pageY + 10 + "px") .style("left", e.pageX - (e.pageX - 800) + "px"); } if (e.pageX < 850) { tooltip .style("top", e.pageY + 10 + "px") .style("left", e.pageX + 10 + "px"); } }) .on("mouseout", function () { tooltip.html(``).style("visibility", "hidden"); d3.select(this).transition().attr("opacity", 1); }); svg .append("path") .datum(data4) .attr("fill", "none") .attr("stroke", "#ffba6b") .attr("stroke-width", strokeWidth) .attr("stroke-linecap", strokeLinecap) .attr("stroke-linejoin", strokeLinejoin) .attr("stroke-opacity", 1) .attr("d", line2); svg .append("g") .selectAll("circle") .data(data4) .enter() .append("circle") .attr("cx", function (d) { return xjiku(d.season + d.era) + zure; }) .attr("cy", function (d) { return yScale(d.rank); }) .attr("fill", "#ffba6b") .attr("opacity", 1) .attr("r", 3) .on("mouseover", function (e, d, i) { tooltip .html( `` ) .style("visibility", "visible"); d3.select(this).attr("opacity", 0.3); }) .on("mousemove", function (e) { if (e.pageX >= 850) { tooltip .style("top", e.pageY + 10 + "px") .style("left", e.pageX - (e.pageX - 800) + "px"); } if (e.pageX < 850) { tooltip .style("top", e.pageY + 10 + "px") .style("left", e.pageX + 10 + "px"); } }) .on("mouseout", function () { tooltip.html(``).style("visibility", "hidden"); d3.select(this).transition().attr("opacity", 1); }); svg .append("path") .datum(data5) .attr("fill", "none") .attr("stroke", "#d96678") .attr("stroke-width", strokeWidth) .attr("stroke-linecap", strokeLinecap) .attr("stroke-linejoin", strokeLinejoin) .attr("stroke-opacity", 1) .attr("d", line2); svg .append("g") .selectAll("circle") .data(data5) .enter() .append("circle") .attr("cx", function (d) { return xjiku(d.season + d.era) + zure; }) .attr("cy", function (d) { return yScale(d.rank); }) .attr("fill", "#d96678") .attr("opacity", 1) .attr("r", 3) .on("mouseover", function (e, d, i) { tooltip .html( `` ) .style("visibility", "visible"); d3.select(this).attr("opacity", 0.3); }) .on("mousemove", function (e) { if (e.pageX >= 850) { tooltip .style("top", e.pageY + 10 + "px") .style("left", e.pageX - (e.pageX - 800) + "px"); } if (e.pageX < 850) { tooltip .style("top", e.pageY + 10 + "px") .style("left", e.pageX + 10 + "px"); } }) .on("mouseout", function () { tooltip.html(``).style("visibility", "hidden"); d3.select(this).transition().attr("opacity", 1); }); svg .append("path") .datum(data6) .attr("fill", "none") .attr("stroke", "#9e5574") .attr("stroke-width", strokeWidth) .attr("stroke-linecap", strokeLinecap) .attr("stroke-linejoin", strokeLinejoin) .attr("stroke-opacity", 1) .attr("d", line2); svg .append("g") .selectAll("circle") .data(data6) .enter() .append("circle") .attr("cx", function (d) { return xjiku(d.season + d.era) + zure; }) .attr("cy", function (d) { return yScale(d.rank); }) .attr("fill", "#9e5574") .attr("opacity", 1) .attr("r", 3) .on("mouseover", function (e, d, i) { tooltip .html( `` ) .style("visibility", "visible"); d3.select(this).attr("opacity", 0.3); }) .on("mousemove", function (e) { if (e.pageX >= 850) { tooltip .style("top", e.pageY + 10 + "px") .style("left", e.pageX - (e.pageX - 800) + "px"); } if (e.pageX < 850) { tooltip .style("top", e.pageY + 10 + "px") .style("left", e.pageX + 10 + "px"); } }) .on("mouseout", function () { tooltip.html(``).style("visibility", "hidden"); d3.select(this).transition().attr("opacity", 1); }); } return svg.node(); }34:T1e3a,{ width; const height = 680; const svg = d3.create("svg").attr("width", width).attr("height", height); const margin = { top: 60, right: 30, bottom: 100, left: 100 }; const jikuzure = 23; const zure = 22; const opacity = 0.7; const strokeWidth = 1.5; const strokeLinecap = "round"; const strokeLinejoin = "round"; const stroleOp = 0.5; const cl1 = "#75b066"; const cl2 = "#ffba6b"; const cl3 = "#D64E5C"; const cl = "gray"; const r = 3; const yScale = d3 .scaleBand() .domain([1, 2, 3, 4, 6, 8, 16, 32, 64, 80, 100]) .range([margin.top, height - margin.bottom]); const xjiku = d3 .scaleBand() .domain([ "interhigh2010", "wintercup2010", "interhigh2011", "wintercup2011", "interhigh2012", "wintercup2012" ]) .range([margin.left, (width - margin.right) / 3]); const xjiku2 = d3 .scaleBand() .domain([ "interhigh2018", "wintercup2018", "interhigh2019", "wintercup2019", "wintercup2020" ]) .range([ (width - margin.right) / 3 + 50, (width - margin.right) / 3 + 50 + (width - margin.right) / 3.4 - margin.left ]); // x軸（順位） const yRankjiku = d3 .scaleBand() .domain([ "1位", "2位", "3位", "4位", " ", "4回戦", "3回戦", "2回戦", "1回戦", "　", "予選" ]) .range([margin.top, height - margin.bottom]); //y軸 const yjiku = d3 .scaleBand() .domain([4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18]) .range([200, height - margin.bottom]); const xAxis = d3.axisBottom().scale(xjiku).tickSize(5); const xAxis2 = d3.axisBottom().scale(xjiku2).tickSize(5); const rankAxis = d3.axisLeft().scale(yRankjiku); const yAxis = d3.axisLeft().scale(yjiku).tickSize(5).ticks(14); svg .append("g") .attr("transform", `translate(0, ${height - margin.bottom - jikuzure})`) .call(xAxis) .selectAll("text") .attr("transform", "rotate(90)") .attr("x", 50) .attr("y", -5); svg .append("g") .attr("transform", `translate(0, ${height - margin.bottom - jikuzure})`) .call(xAxis2) .selectAll("text") .attr("transform", "rotate(90)") .attr("x", 50) .attr("y", -5); svg .append("g") .attr("transform", `translate(${margin.left / 2}, ${-jikuzure})`) .call(rankAxis) .selectAll("text") .attr("y", 0); svg .append("g") .attr("transform", `translate(${margin.left + zure}, ${-jikuzure})`) .call(yAxis) .selectAll("text") .attr("y", 0); svg .append("g") .attr( "transform", `translate(${(width - margin.right) / 3 + 50 + zure} , ${-jikuzure})` ) .call(yAxis) .selectAll("text") .attr("y", 0); svg .append("text") .attr("x", 180) .attr("y", 30) .style("font-size", "0.6rem") .style("font-family", "sans-serif") .text("札幌山の手(2010 ~ 2012)"); // プレーンテキスト svg .append("text") .attr("x", 480) .attr("y", 30) .style("font-size", "0.6rem") .style("font-family", "sans-serif") .text("札幌山の手(2018 ~ 2020)"); const playerline = d3 .line() .curve(d3.curveBumpX) .x((d) => xjiku(d.season + d.era) + zure) .y((d) => yjiku(d.number) - 11); //.curve(d3.curveCatmullRom(0.1)); const line1 = d3 .line() .curve(d3.curveBumpX) .x((d) => xjiku(d.season + d.era) + zure) .y((d) => yScale(d.rank)); const line2 = d3 .line() .curve(d3.curveBumpX) .x((d) => xjiku2(d.season + d.era) + zure) .y((d) => yScale(d.rank)); const data1 = StrongHighSchool.get("札幌山の手"); const data2 = StrongHighSchool.get("聖カタリナ学園"); const data3 = StrongHighSchool.get("大阪薫英女学院"); const data4 = StrongHighSchool.get("昭和学院"); const data5 = StrongHighSchool.get("岐阜女子"); const data6 = StrongHighSchool.get("桜花学園"); const namevalue1 = sapporoNameValue; const namevalue2 = katarinaNameValue; const namevalue3 = kuneiNameValue; const namevalue4 = shouwaNameValue; const namevalue5 = gifujosiNameValue; const namevalue6 = oukaNameValue; svg .append("path") .datum(data1) .attr("fill", "none") .attr("stroke", cl) .attr("stroke-width", strokeWidth) .attr("stroke-linecap", strokeLinecap) .attr("stroke-linejoin", strokeLinejoin) .attr("stroke-opacity", stroleOp) .attr("d", line1); var data_set = [ { season: "interhigh", era: 2018, rank: 16 }, { season: "wintercup", era: 2018, rank: 100 }, { season: "interhigh", era: 2019, rank: 8 }, { season: "wintercup", era: 2019, rank: 64 }, { season: "wintercup", era: 2020, rank: 4 } ]; svg .append("path") .datum(data_set) .attr("fill", "none") .attr("stroke", cl) .attr("stroke-width", strokeWidth) .attr("stroke-linecap", strokeLinecap) .attr("stroke-linejoin", strokeLinejoin) .attr("stroke-opacity", stroleOp) .attr("d", line2); // 選手グループ const playerG1 = svg .append("g") .selectAll("g") .data(namevalue1) .join("g") .attr("class", "player"); // 選手世代による色 const playerColor = function (d) { const admissionYear = d.era - d.grade - 1; // 入学年 const color = d3.scaleOrdinal().domain([0, 1, 2]).range([cl1, cl2, cl3]); return color(admissionYear % 3); // 3年サイクルで3色に変換する }; // 選手パス・点の透明度 const playerOpacity = function (d) { if (d.nameValue == 13) { // 13はデータなしなので表示しない return 0; } else { return opacity; } }; // 選手パス上の点 playerG1 .selectAll("circle.player-dot") .data((d) => d[1]) .join("circle") .attr("class", "player-dot") .attr("cx", (d) => xjiku(d.season + d.era) + zure) .attr("cy", (d) => yjiku(d.number) - 11) .attr("r", r) .attr("opacity", function (d) { if (d.era == "2010" || d.era == "2011" || d.era == "2012") { return playerOpacity(d); } else { return 0; } }) .attr("fill", playerColor); // 選手パス playerG1 .append("path") .datum((d) => d[1]) .attr("fill", "none") .attr("stroke", function (d) { return playerColor(d[0]); }) .attr("stroke-width", strokeWidth) .attr("stroke-linecap", strokeLinecap) .attr("stroke-linejoin", strokeLinejoin) .attr("stroke-opacity", function (d) { return playerOpacity(d[0]); }) .attr("d", playerline); // 選手パス上の点 playerG1 .selectAll("circle.player-dot2") .data((d) => d[1]) .join("circle") .attr("class", "player-dot2") .attr("cx", (d) => xjiku2(d.season + d.era) + zure) .attr("cy", (d) => yjiku(d.number) - 11) .attr("r", r) .attr("opacity", function (d) { if (d.era == "2018" || d.era == "2019" || d.era == "2020") { return playerOpacity(d); } else { return 0; } }) .attr("fill", playerColor); // 選手パス const playerline2 = d3 .line() .curve(d3.curveBumpX) .x((d) => xjiku2(d.season + d.era) + zure) .y((d) => yjiku(d.number) - 11); playerG1 .append("path") .datum((d) => d[1]) .attr("fill", "none") .attr("stroke", function (d) { return playerColor(d[0]); }) .attr("stroke-width", strokeWidth) .attr("stroke-linecap", strokeLinecap) .attr("stroke-linejoin", strokeLinejoin) .attr("stroke-opacity", function (d) { return playerOpacity(d[0]); }) .attr("d", playerline2); return svg.node(); }35:T1da5,{ width; const height = 680; const svg = d3.create("svg").attr("width", width).attr("height", height); const margin = { top: 60, right: 30, bottom: 100, left: 100 }; const jikuzure = 23; const zure = 22; const opacity = 0.7; const strokeWidth = 1.5; const strokeLinecap = "round"; const strokeLinejoin = "round"; const stroleOp = 0.5; const cl1 = "#75b066"; const cl2 = "#ffba6b"; const cl3 = "#D64E5C"; const cl = "gray"; const r = 3; const yScale = d3 .scaleBand() .domain([1, 2, 3, 4, 6, 8, 16, 32, 64, 80, 100]) .range([margin.top, height - margin.bottom]); const xjiku = d3 .scaleBand() .domain([ "interhigh2010", "wintercup2010", "interhigh2011", "wintercup2011", "interhigh2012", "wintercup2012", "interhigh2013", "wintercup2013" ]) .range([margin.left, (width - margin.right) / 2.4]); const xjiku2 = d3 .scaleBand() .domain([ "interhigh2018", "wintercup2018", "interhigh2019", "wintercup2019", "wintercup2020", "interhigh2021", "wintercup2021" ]) .range([ (width - margin.right) / 2.4 + 50, (width - margin.right) / 2.4 + 50 + (width - margin.right) / 2.7 - margin.left ]); // x軸（順位） const yRankjiku = d3 .scaleBand() .domain([ "1位", "2位", "3位", "4位", " ", "4回戦", "3回戦", "2回戦", "1回戦", "　", "予選" ]) .range([margin.top, height - margin.bottom]); //y軸 const yjiku = d3 .scaleBand() .domain([4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18]) .range([200, height - margin.bottom]); const xAxis = d3.axisBottom().scale(xjiku).tickSize(5); const xAxis2 = d3.axisBottom().scale(xjiku2).tickSize(5); const rankAxis = d3.axisLeft().scale(yRankjiku); const yAxis = d3.axisLeft().scale(yjiku).tickSize(5).ticks(14); svg .append("g") .attr("transform", `translate(0, ${height - margin.bottom - jikuzure})`) .call(xAxis) .selectAll("text") .attr("transform", "rotate(90)") .attr("x", 50) .attr("y", -5); svg .append("g") .attr("transform", `translate(0, ${height - margin.bottom - jikuzure})`) .call(xAxis2) .selectAll("text") .attr("transform", "rotate(90)") .attr("x", 50) .attr("y", -5); svg .append("g") .attr("transform", `translate(${margin.left / 2}, ${-jikuzure})`) .call(rankAxis) .selectAll("text") .attr("y", 0); svg .append("g") .attr("transform", `translate(${margin.left + zure}, ${-jikuzure})`) .call(yAxis) .selectAll("text") .attr("y", 0); svg .append("g") .attr( "transform", `translate(${(width - margin.right) / 2.4 + 50 + zure} , ${-jikuzure})` ) .call(yAxis) .selectAll("text") .attr("y", 0); svg .append("text") .attr("x", 220) .attr("y", 30) .style("font-size", "0.6rem") .style("font-family", "sans-serif") .text("大阪薫英女学院(2010 ~ 2013)"); // プレーンテキスト svg .append("text") .attr("x", 600) .attr("y", 30) .style("font-size", "0.6rem") .style("font-family", "sans-serif") .text("大阪薫英女学院(2018 ~ 2021)"); const playerline = d3 .line() .curve(d3.curveBumpX) .x((d) => xjiku(d.season + d.era) + zure) .y((d) => yjiku(d.number) - 11); //.curve(d3.curveCatmullRom(0.1)); const line1 = d3 .line() .curve(d3.curveBumpX) .x((d) => xjiku(d.season + d.era) + zure) .y((d) => yScale(d.rank)); const line2 = d3 .line() .curve(d3.curveBumpX) .x((d) => xjiku2(d.season + d.era) + zure) .y((d) => yScale(d.rank)); const data1 = StrongHighSchool.get("大阪薫英女学院"); const namevalue1 = kuneiNameValue; svg .append("path") .datum(data1) .attr("fill", "none") .attr("stroke", cl) .attr("stroke-width", strokeWidth) .attr("stroke-linecap", strokeLinecap) .attr("stroke-linejoin", strokeLinejoin) .attr("stroke-opacity", stroleOp) .attr("d", line1); var data_set = [ { season: "interhigh", era: 2018, rank: 16 }, { season: "wintercup", era: 2018, rank: 2 }, { season: "interhigh", era: 2019, rank: 4 }, { season: "wintercup", era: 2019, rank: 4 }, { season: "wintercup", era: 2020, rank: 16 }, { season: "interhigh", era: 2021, rank: 2 }, { season: "wintercup", era: 2021, rank: 4 } ]; svg .append("path") .datum(data_set) .attr("fill", "none") .attr("stroke", cl) .attr("stroke-width", strokeWidth) .attr("stroke-linecap", strokeLinecap) .attr("stroke-linejoin", strokeLinejoin) .attr("stroke-opacity", stroleOp) .attr("d", line2); // 選手グループ const playerG1 = svg .append("g") .selectAll("g") .data(namevalue1) .join("g") .attr("class", "player"); // 選手世代による色 const playerColor = function (d) { const admissionYear = d.era - d.grade - 1; // 入学年 const color = d3.scaleOrdinal().domain([0, 1, 2]).range([cl1, cl2, cl3]); return color(admissionYear % 3); // 3年サイクルで3色に変換する }; // 選手パス・点の透明度 const playerOpacity = function (d) { if (d.nameValue == 13) { // 13はデータなしなので表示しない return 0; } else { return opacity; } }; // 選手パス上の点 playerG1 .selectAll("circle.player-dot") .data((d) => d[1]) .join("circle") .attr("class", "player-dot") .attr("cx", (d) => xjiku(d.season + d.era) + zure) .attr("cy", (d) => yjiku(d.number) - 11) .attr("r", r) .attr("opacity", function (d) { if ( d.era == "2010" || d.era == "2011" || d.era == "2012" || d.era == "2013" ) { return playerOpacity(d); } else { return 0; } }) .attr("fill", playerColor); // 選手パス playerG1 .append("path") .datum((d) => d[1]) .attr("fill", "none") .attr("stroke", function (d) { return playerColor(d[0]); }) .attr("stroke-width", strokeWidth) .attr("stroke-linecap", strokeLinecap) .attr("stroke-linejoin", strokeLinejoin) .attr("stroke-opacity", function (d) { return playerOpacity(d[0]); }) .attr("d", playerline); // 選手パス上の点 playerG1 .selectAll("circle.player-dot2") .data((d) => d[1]) .join("circle") .attr("class", "player-dot2") .attr("cx", (d) => xjiku2(d.season + d.era) + zure) .attr("cy", (d) => yjiku(d.number) - 11) .attr("r", r) .attr("opacity", function (d) { if ( d.era == "2018" || d.era == "2019" || d.era == "2020" || d.era == "2021" ) { return playerOpacity(d); } else { return 0; } }) .attr("fill", playerColor); // 選手パス const playerline2 = d3 .line() .curve(d3.curveBumpX) .x((d) => xjiku2(d.season + d.era) + zure) .y((d) => yjiku(d.number) - 11); playerG1 .append("path") .datum((d) => d[1]) .attr("fill", "none") .attr("stroke", function (d) { return playerColor(d[0]); }) .attr("stroke-width", strokeWidth) .attr("stroke-linecap", strokeLinecap) .attr("stroke-linejoin", strokeLinejoin) .attr("stroke-opacity", function (d) { return playerOpacity(d[0]); }) .attr("d", playerline2); return svg.node(); }36:T1ff3,{ width; const height = 680; const svg = d3.create("svg").attr("width", width).attr("height", height); const margin = { top: 60, right: 30, bottom: 100, left: 100 }; const jikuzure = 23; const zure = 22; const opacity = 0.7; const strokeWidth = 1.5; const strokeLinecap = "round"; const strokeLinejoin = "round"; const stroleOp = 0.5; const cl1 = "#75b066"; const cl2 = "#ffba6b"; const cl3 = "#D64E5C"; const cl = "gray"; const r = 3; const yScale = d3 .scaleBand() .domain([1, 2, 3, 4, 6, 8, 16, 32, 64, 80, 100]) .range([margin.top, height - margin.bottom]); const xjiku = d3 .scaleBand() .domain([ "interhigh2013", "wintercup2013", "interhigh2014", "wintercup2014", "interhigh2015", "wintercup2015", "interhigh2016", "wintercup2016" ]) .range([margin.left, (width - margin.right) / 2.4]); const xjiku2 = d3 .scaleBand() .domain([ "interhigh2013", "wintercup2013", "interhigh2014", "wintercup2014", "interhigh2015", "wintercup2015", "interhigh2016", "wintercup2016" ]) .range([ (width - margin.right) / 2.4 + 50, (width - margin.right) / 2.4 + 50 + (width - margin.right) / 2.4 - margin.left ]); // x軸（順位） const yRankjiku = d3 .scaleBand() .domain([ "1位", "2位", "3位", "4位", " ", "4回戦", "3回戦", "2回戦", "1回戦", "　", "予選" ]) .range([margin.top, height - margin.bottom]); //y軸 const yjiku = d3 .scaleBand() .domain([4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18]) .range([200, height - margin.bottom]); const xAxis = d3.axisBottom().scale(xjiku).tickSize(5); const xAxis2 = d3.axisBottom().scale(xjiku2).tickSize(5); const rankAxis = d3.axisLeft().scale(yRankjiku); const yAxis = d3.axisLeft().scale(yjiku).tickSize(5).ticks(14); svg .append("g") .attr("transform", `translate(0, ${height - margin.bottom - jikuzure})`) .call(xAxis) .selectAll("text") .attr("transform", "rotate(90)") .attr("x", 50) .attr("y", -5); svg .append("g") .attr("transform", `translate(0, ${height - margin.bottom - jikuzure})`) .call(xAxis2) .selectAll("text") .attr("transform", "rotate(90)") .attr("x", 50) .attr("y", -5); svg .append("g") .attr("transform", `translate(${margin.left / 2}, ${-jikuzure})`) .call(rankAxis) .selectAll("text") .attr("y", 0); svg .append("g") .attr("transform", `translate(${margin.left + zure}, ${-jikuzure})`) .call(yAxis) .selectAll("text") .attr("y", 0); svg .append("g") .attr( "transform", `translate(${(width - margin.right) / 2.4 + 50 + zure} , ${-jikuzure})` ) .call(yAxis) .selectAll("text") .attr("y", 0); svg .append("text") .attr("x", 220) .attr("y", 30) .style("font-size", "0.6rem") .style("font-family", "sans-serif") .text("桜花学園(2013 ~ 2016)"); // プレーンテキスト svg .append("text") .attr("x", 630) .attr("y", 30) .style("font-size", "0.6rem") .style("font-family", "sans-serif") .text("聖カタリナ学園(2013 ~ 2016)"); const playerline = d3 .line() .curve(d3.curveBumpX) .x((d) => xjiku(d.season + d.era) + zure) .y((d) => yjiku(d.number) - 11); //.curve(d3.curveCatmullRom(0.1)); const line1 = d3 .line() .curve(d3.curveBumpX) .x((d) => xjiku(d.season + d.era) + zure) .y((d) => yScale(d.rank)); const line2 = d3 .line() .curve(d3.curveBumpX) .x((d) => xjiku2(d.season + d.era) + zure) .y((d) => yScale(d.rank)); const namevalue1 = oukaNameValue; const namevalue2 = katarinaNameValue; var data_set1 = [ { season: "interhigh", era: 2013, rank: 1 }, { season: "wintercup", era: 2013, rank: 1 }, { season: "interhigh", era: 2014, rank: 1 }, { season: "wintercup", era: 2014, rank: 1 }, { season: "interhigh", era: 2015, rank: 1 }, { season: "wintercup", era: 2015, rank: 2 }, { season: "interhigh", era: 2016, rank: 1 }, { season: "wintercup", era: 2016, rank: 1 } ]; svg .append("path") .datum(data_set1) .attr("fill", "none") .attr("stroke", cl) .attr("stroke-width", strokeWidth) .attr("stroke-linecap", strokeLinecap) .attr("stroke-linejoin", strokeLinejoin) .attr("stroke-opacity", stroleOp) .attr("d", line1); var data_set2 = [ { season: "interhigh", era: 2013, rank: 4 }, { season: "wintercup", era: 2013, rank: 3 }, { season: "interhigh", era: 2014, rank: 4 }, { season: "wintercup", era: 2014, rank: 4 }, { season: "interhigh", era: 2015, rank: 8 }, { season: "wintercup", era: 2015, rank: 4 }, { season: "interhigh", era: 2016, rank: 16 }, { season: "wintercup", era: 2016, rank: 32 } ]; svg .append("path") .datum(data_set2) .attr("fill", "none") .attr("stroke", cl) .attr("stroke-width", strokeWidth) .attr("stroke-linecap", strokeLinecap) .attr("stroke-linejoin", strokeLinejoin) .attr("stroke-opacity", stroleOp) .attr("d", line2); // 選手グループ const playerG1 = svg .append("g") .selectAll("g") .data(namevalue1) .join("g") .attr("class", "player"); // 選手世代による色 const playerColor = function (d) { const admissionYear = d.era - d.grade - 1; // 入学年 const color = d3.scaleOrdinal().domain([0, 1, 2]).range([cl1, cl2, cl3]); return color(admissionYear % 3); // 3年サイクルで3色に変換する }; // 選手パス・点の透明度 const playerOpacity = function (d) { if (d.nameValue == 13) { // 13はデータなしなので表示しない return 0; } else { return opacity; } }; // 選手パス上の点 playerG1 .selectAll("circle.player-dot") .data((d) => d[1]) .join("circle") .attr("class", "player-dot") .attr("cx", (d) => xjiku(d.season + d.era) + zure) .attr("cy", (d) => yjiku(d.number) - 11) .attr("r", r) .attr("opacity", function (d) { if ( d.era == "2013" || d.era == "2014" || d.era == "2015" || d.era == "2016" ) { return playerOpacity(d); } else { return 0; } }) .attr("fill", playerColor); // 選手パス playerG1 .append("path") .datum((d) => d[1]) .attr("fill", "none") .attr("stroke", function (d) { return playerColor(d[0]); }) .attr("stroke-width", strokeWidth) .attr("stroke-linecap", strokeLinecap) .attr("stroke-linejoin", strokeLinejoin) .attr("stroke-opacity", function (d) { return playerOpacity(d[0]); }) .attr("d", playerline); const playerG2 = svg .append("g") .selectAll("g") .data(namevalue2) .join("g") .attr("class", "player"); // 選手パス上の点 playerG2 .selectAll("circle.player-dot2") .data((d) => d[1]) .join("circle") .attr("class", "player-dot2") .attr("cx", (d) => xjiku2(d.season + d.era) + zure) .attr("cy", (d) => yjiku(d.number) - 11) .attr("r", r) .attr("opacity", function (d) { if ( d.era == "2013" || d.era == "2014" || d.era == "2015" || d.era == "2016" ) { return playerOpacity(d); } else { return 0; } }) .attr("fill", playerColor); // 選手パス const playerline2 = d3 .line() .curve(d3.curveBumpX) .x((d) => xjiku2(d.season + d.era) + zure) .y((d) => yjiku(d.number) - 11); playerG2 .append("path") .datum((d) => d[1]) .attr("fill", "none") .attr("stroke", function (d) { return playerColor(d[0]); }) .attr("stroke-width", strokeWidth) .attr("stroke-linecap", strokeLinecap) .attr("stroke-linejoin", strokeLinejoin) .attr("stroke-opacity", function (d) { return playerOpacity(d[0]); }) .attr("d", playerline2); return svg.node(); }37:T199f,{ width; const height = 650; const svg = d3.create("svg").attr("width", width).attr("height", height); const margin = { top: 30, right: 30, bottom: 100, left: 100 }; const jikuzure = 23; const zure = 22; const opacity = 0.7; const strokeWidth = 1.5; const strokeLinecap = "round"; const strokeLinejoin = "round"; const stroleOp = 0.5; const cl1 = "#75b066"; const cl2 = "#ffba6b"; const cl3 = "#D64E5C"; const cl = "gray"; const r = 3; const yScale = d3 .scaleBand() .domain([1, 2, 3, 4, 6, 8, 16, 32, 64, 80, 100]) .range([margin.top, height - margin.bottom]); const xjiku = d3 .scaleBand() .domain([ "interhigh2010", "wintercup2010", "interhigh2011", "wintercup2011", "interhigh2012", "wintercup2012", "interhigh2013", "wintercup2013", "interhigh2014", "wintercup2014", "interhigh2015", "wintercup2015", "interhigh2016", "wintercup2016", "interhigh2017", "wintercup2017", "interhigh2018", "wintercup2018", "interhigh2019", "wintercup2019", "wintercup2020", "interhigh2021", "wintercup2021" ]) .range([margin.left, width - margin.right]); // x軸（順位） const yRankjiku = d3 .scaleBand() .domain([ "1位", "2位", "3位", "4位", " ", "4回戦", "3回戦", "2回戦", "1回戦", "　", "予選" ]) .range([margin.top, height - margin.bottom]); //y軸 const yjiku = d3 .scaleBand() .domain([4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18]) .range([200, height - margin.bottom]); const xAxis = d3.axisBottom().scale(xjiku).tickSize(5); const rankAxis = d3.axisLeft().scale(yRankjiku); const yAxis = d3.axisLeft().scale(yjiku).tickSize(5).ticks(14); svg .append("g") .attr("transform", `translate(0, ${height - margin.bottom - jikuzure})`) .call(xAxis) .selectAll("text") .attr("transform", "rotate(90)") .attr("x", 50) .attr("y", -5); svg .append("g") .attr("transform", `translate(${margin.left / 2}, ${-jikuzure})`) .call(rankAxis) .selectAll("text") .attr("y", 0); svg .append("g") .attr("transform", `translate(${margin.left + zure}, ${-jikuzure})`) .call(yAxis) .selectAll("text") .attr("y", 0); const line1 = d3 .line() .curve(d3.curveBumpX) .x((d) => xjiku(d.season + d.era) + zure) .y((d) => yjiku(d.number) - 11); //.curve(d3.curveCatmullRom(0.1)); const line2 = d3 .line() .curve(d3.curveBumpX) .x((d) => xjiku(d.season + d.era) + zure) .y((d) => yScale(d.rank)); if (name == "札幌山の手") { const data = StrongHighSchool.get("札幌山の手"); svg .append("path") .datum(data) .attr("fill", "none") .attr("stroke", cl) .attr("stroke-width", strokeWidth) .attr("stroke-linecap", strokeLinecap) .attr("stroke-linejoin", strokeLinejoin) .attr("stroke-opacity", stroleOp) .attr("d", line2); } if (name == "聖カタリナ学園") { const data = StrongHighSchool.get("聖カタリナ学園"); svg .append("path") .datum(data) .attr("fill", "none") .attr("stroke", cl) .attr("stroke-width", strokeWidth) .attr("stroke-linecap", strokeLinecap) .attr("stroke-linejoin", strokeLinejoin) .attr("stroke-opacity", stroleOp) .attr("d", line2); } if (name == "大阪薫英女学院") { const data = StrongHighSchool.get("大阪薫英女学院"); svg .append("path") .datum(data) .attr("fill", "none") .attr("stroke", cl) .attr("stroke-width", strokeWidth) .attr("stroke-linecap", strokeLinecap) .attr("stroke-linejoin", strokeLinejoin) .attr("stroke-opacity", stroleOp) .attr("d", line2); } if (name == "昭和学院") { const data = StrongHighSchool.get("昭和学院"); svg .append("path") .datum(data) .attr("fill", "none") .attr("stroke", cl) .attr("stroke-width", strokeWidth) .attr("stroke-linecap", strokeLinecap) .attr("stroke-linejoin", strokeLinejoin) .attr("stroke-opacity", stroleOp) .attr("d", line2); } if (name == "岐阜女子") { const data = StrongHighSchool.get("岐阜女子"); svg .append("path") .datum(data) .attr("fill", "none") .attr("stroke", cl) .attr("stroke-width", strokeWidth) .attr("stroke-linecap", strokeLinecap) .attr("stroke-linejoin", strokeLinejoin) .attr("stroke-opacity", stroleOp) .attr("d", line2); } if (name == "桜花学園") { const data = StrongHighSchool.get("桜花学園"); svg .append("path") .datum(data) .attr("fill", "none") .attr("stroke", cl) .attr("stroke-width", strokeWidth) .attr("stroke-linecap", strokeLinecap) .attr("stroke-linejoin", strokeLinejoin) .attr("stroke-opacity", stroleOp) .attr("d", line2); } // 選手世代による色 const playerColor = function (d) { const admissionYear = d.era - d.grade - 1; // 入学年 const color = d3.scaleOrdinal().domain([0, 1, 2]).range([cl1, cl2, cl3]); return color(admissionYear % 3); // 3年サイクルで3色に変換する }; // 選手パス・点の透明度 const playerOpacity = function (d) { if (d.nameValue == 13) { // 13はデータなしなので表示しない return 0; } else { return opacity; } }; // 選手グループ const playerG = svg .append("g") .selectAll("g") .data(nameValueMap) .join("g") .attr("class", "player"); // 選手パス上の点 playerG .selectAll("circle.player-dot") .data((d) => d[1]) .join("circle") .attr("class", "player-dot") .attr("cx", (d) => xjiku(d.season + d.era) + zure) .attr("cy", (d) => yjiku(d.number) - 11) .attr("r", r) .attr("opacity", playerOpacity) .attr("fill", playerColor); // 選手パス playerG .append("path") .datum((d) => d[1]) .attr("fill", "none") .attr("stroke", function (d) { return playerColor(d[0]); }) .attr("stroke-width", strokeWidth) .attr("stroke-linecap", strokeLinecap) .attr("stroke-linejoin", strokeLinejoin) .attr("stroke-opacity", function (d) { return playerOpacity(d[0]); }) .attr("d", line1); return svg.node(); }38:[] 2f:{"title":"Why are the strongest schools always the strongest?　-女子高校バスケ強豪校の強さの秘訣は何なのか？-","cells":[{"id":138,"value":"# Why are the strongest schools always the strongest?　-女子高校バスケ強豪校の強さの秘訣は何なのか？-","pinned":false,"hidden":false,"mode":"md"},{"id":0,"value":"html`

Why are

the strongest schools

always the strongest?

女子高校バスケ強豪校の強さの秘訣は何なのか？

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2201,"value":"html`

『SLUM DUNK』、『黒子のバスケ』などバスケットボールを題材にした人気漫画は多く、読んだことがある人も多いだろう。しかし、メジャーなスポーツであるにも関わらず実際のバスケはメディアにあまり取り上げられない。バスケットボールは5対5で行い、他のスポーツに比べてコートが狭いため一試合に100点を超えることも多く、毎秒白熱と緊張を味わえるスポーツ。息をつく暇もない点取り合戦は、ルールがよくわからない人でも退屈することなく楽しめ、スポーツ観戦初心者にぴったりのスポーツだろう。この記事を読んでバスケットボールに興味をもつきっかけになればと思う。

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2087,"value":"***\n## 『WINTER CUP 2021』\n***","pinned":false,"hidden":false,"mode":"md"},{"id":2163,"value":"html`2021年12月23日から、2021年12月29日で開催された、高校バスケの最高峰「WINTER CUP 2021」。女子の結果は、愛知県の桜花学園が優勝。『WINTER CUP 2019』、『WINTER CUP 2020』と続き3連覇を達成した。
\n当たり前だが、高校バスケは毎年チームの選手が入れ替わる。にも関わらず、なぜ強豪校は常に強さを維持できるのだろうか。`","pinned":false,"hidden":false,"mode":"ojs"},{"id":477,"value":"***\n## そもそも強豪校ってどのくらいあるの？\n***","pinned":false,"hidden":false,"mode":"md"},{"id":2275,"value":"html`インターハイ、ウィンターカップ共に４７都道府県からそれぞれ予選を通過した高校（１～３校）が全国大会に出場する。ほぼ毎年出場するお馴染みの高校から、初出場を果たす高校までさまざまである。実際、全出場校のうちどのくらいが強豪校なのだろうか。また、あなたの出身都道府県はどの高校が全国大会に出場しているのだろう。\n

\n以下は2010年のインターハイから2021年のウィンターカップまでの各都道府県の出場校と、その出場回数を示したものである。`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2573,"value":"html`

縦軸：都道府県名
横軸：大会名と西暦
色：出場回数

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1939,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2245,"value":"html`

開催地、インターハイ１位、２位枠は考慮せずすべて都道府県別。出場校が複数ある場合の出場回数は、最多の高校の回数で表示。
期間内に高校名の改称があった場合は現在（2022年1月）時点の名称で表記。

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2189,"value":"html`インターハイ2010からウィンターカップ2021まで、公式大会は23回開催されている。\n
\nこうして見てみると、12回以上同じ高校が大会に出場している都道府県がほとんどであり、昭和学院(千葉県)、岐阜女子(岐阜県)、桜花学園(愛知県)、和歌山信愛(和歌山県)は23大会すべてに出場している。`","pinned":false,"hidden":false,"mode":"ojs"},{"id":495,"value":"***\n## 強豪校の順位の移り変わりは？\n***","pinned":false,"hidden":false,"mode":"md"},{"id":559,"value":"html`全国大会に出場し結果を残す高校の順位はどのように移り変わりっているのだろうか？\n

\n以下は期間内に3位又は4位以上^*の結果を残した18校の順位の移り変わりを示した図である。`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2242,"value":"html`

*3位決定戦が行われた大会は3位以上の高校、3位決定戦が無い大会は準決勝出場校以上を参照し、準決勝出場校の順位は同率4位とする。

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2582,"value":"html`

縦軸：順位
横軸：大会名と西暦

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":879,"value":"viewof eighteenschools = Inputs.radio(\n [\n \" \",\n \"札幌山の手\",\n \"聖カタリナ学園\",\n \"大阪薫英女学院\",\n \"昭和学院\",\n \"岐阜女子\",\n \"桜花学園\",\n \"中村学園女子\",\n \"明成\",\n \"県立金沢総合\",\n \"東京成徳大学\",\n \"明星学園\",\n \"山形市立商業\",\n \"山村学園\",\n \"安城学園\",\n \"大阪桐蔭\",\n \"四日市商業\",\n \"京都精華学園\",\n \"高知中央\"\n ],\n {\n label: \"高校\",\n value: \" \"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":800,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":2225,"value":"html`2010年の大会では、札幌山の手(北海道)、中村学園女子(福岡県)が1位2位だが、2012年以降は桜花学園(愛知県)が15回優勝を飾り、岐阜女子(岐阜県)、昭和学院(千葉県)、大阪薫英女学院(大阪府)などが優勝争いに加わるというような構図が出来上がっている。`","pinned":false,"hidden":false,"mode":"ojs"},{"id":535,"value":"***\n## 強豪校の順位変動の要因は？\n***","pinned":false,"hidden":false,"mode":"md"},{"id":2256,"value":"html`15回の優勝を飾り、12月に開催された『WINRWE CUP 2021』でも優勝の座を勝ち取った桜花学園を筆頭に、厳しい予選を何度も通過し全国大会で結果を残す高校の、継続的な強さの秘訣は何なのだろうか？\n

\nここでは選手の移り変わりに着目する。\n

\n以下は期間内に6回以上3位又は4位以上^*\nの成績を残した6校^**\nの選手の移り変わりと順位変動を示した図である。`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2251,"value":"html`

*3位決定戦が行われた大会は3位以上の高校、3位決定戦が無い大会は準決勝出場校以上を参照し、準決勝出場校の順位は同率4位とする。\n
\n**札幌山の手、聖カタリナ学園、大阪薫英女学院、昭和学院、岐阜女子、桜花学園の6校

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2561,"value":"

","pinned":false,"hidden":false,"mode":"md"},{"id":2566,"value":"html`下の2つの図は札幌山の手高校の2010年から2012年、2018年から2020年の図である。
\ninterhigh2010の背番号「11」「12」「13」「14」はwintercup2012まで在籍していることから、2010年時点で高校1年生の選手だと読み取れる。`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2586,"value":"html`

縦軸1：順位
縦軸2：背番号
横軸：大会名と西暦
色：学年

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2362,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":2598,"value":"html`2011年から2012年の順位と選手入れ替わりを見てみると、2011年を境に下降傾向にありwintercup2011でキャプテン（背番号「4」）を含む3年生が7人引退し、次の代で2年生、3年生の少ない1年生主体の経験の浅い若いチームであることが分かる。

\n2018年から2020年の順位と選手の入れ替わりを見てみると、interhigh2018の時点で1年生と3年生のみでチームが構成されている。またwintercup2020でベンチ入りしている3年生6人のうち4人がinterhigh2018の時点でベンチ入りしている。`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2613,"value":"***","pinned":false,"hidden":false,"mode":"md"},{"id":2638,"value":"html`下の2つの図は大阪薫英女学院高校の2010年から2013年、2018年から2021年の図である。`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2619,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":2641,"value":"html`2010年から2013年の選手の入れ替わりの傾向として、上級生が引退した分だけ新入生が入るというような傾向がみられる。対して2018年から2021年では、線が複雑に入り組んでいることから、学年関係なく、より実力主義になっているといえる。順位を見てみると、2010年から2013年に開催された8大会のうち4位以上になった回数が2回であるのに対して、2018年から2021年に開催された7大会では5回である。`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2653,"value":"***","pinned":false,"hidden":false,"mode":"md"},{"id":2806,"value":"html`下の2つの図は桜花学園高校と、聖カタリナ学園高校の2013年から2016年の図である。`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2798,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":2813,"value":"html`どちらの高校もinterhigh2013で1年生が背番号「4」を与えられている。そしてどちらの高校もwintercup2015でinterhigh2013の時背番号「4」だった選手が再び「4」を与えられ、その選手の引退後桜花学園は順位をキープしているのに対し、聖カタリナ学園の順位は2015年を境に下降傾向にある。`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2809,"value":"***","pinned":false,"hidden":false,"mode":"md"},{"id":2745,"value":"html`上記のような読み取り方を参考に、6校の順位と選手の入れ替わりからさらに読み取れることがあるかもしれない。一気に3年生が卒業している年、進級とともに順位を上げている代、下級生ながら先輩を追い抜いた背番号を背負っている選手のいる代、その入れ替わりによって順位はどのように変化しているだろうか。`","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"viewof name = Inputs.select(names, { label: \"高校\", value: \"桜花学園\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1654,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":2816,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":2824,"value":"html`以上から、常に上位をキープし続ける強豪校の強さの秘訣は、絶対的エースや上級生に依存していない事、次の代の育成がしっかりなされている事との関係が大きいのではないかと私は考える。`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2790,"value":"***\n## スポーツは色んな視点から楽しめる\n***","pinned":false,"hidden":false,"mode":"md"},{"id":546,"value":"html`順位の変動と選手の入れ替わりの関係という点から女子高校バスケについて取り上げた。『WINTER CUP 2021』では、2位の京都精華学園が決勝戦初出場ながら、桜花学園に対し61-57と大健闘を果たした。今年の夏のインターハイが待ち遠しい。どの高校が優勝するのか、2021年の選手の情報をもとに予想してみると面白いかもしれない。`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2831,"value":"***","pinned":false,"hidden":false,"mode":"md"},{"id":1918,"value":"

\n","pinned":false,"hidden":false,"mode":"md"},{"id":2313,"value":"***","pinned":false,"hidden":false,"mode":"md"},{"id":2660,"value":"html`

データソース

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2301,"value":"Inputs.table(dataSorce)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2307,"value":"***","pinned":false,"hidden":false,"mode":"md"},{"id":2665,"value":"
","pinned":false,"hidden":false,"mode":"md"},{"id":2669,"value":"html`

以下コード

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":957,"value":"nameArr = Array.from(nameValueMap)","pinned":false,"hidden":false,"mode":"ojs"},{"id":232,"value":"//47都道府県\nPrefs = AllData\n .flat()\n .map((d) => d.Prefecture)\n .filter((d, i, arr) => arr.indexOf(d) === i)","pinned":false,"hidden":false,"mode":"ojs"},{"id":372,"value":"//都道府県ごとに分けたもの\nPrefGroup = d3.group(AllData, (d) => d.Prefecture)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1123,"value":"AllSchools = d3.group(AllData, (d) => d.highschool)","pinned":false,"hidden":false,"mode":"ojs"},{"id":861,"value":"StrongHighSchool = d3.group(StrongData, (d) => d.highschool)","pinned":false,"hidden":false,"mode":"ojs"},{"id":909,"value":"player = getData(name)","pinned":false,"hidden":false,"mode":"ojs"},{"id":924,"value":"nameValueMap = d3.group(player, (d) => d.nameValue)","pinned":false,"hidden":false,"mode":"ojs"},{"id":852,"value":"shs = new Array(\n \"札幌山の手\",\n \"中村学園女子\",\n \"明成\",\n \"県立金沢総合\",\n \"東京成徳大学\",\n \"大阪薫英女学院\",\n \"明星学園\",\n \"山形市立商業\",\n \"桜花学園\",\n \"聖カタリナ学園\",\n \"昭和学院\",\n \"山村学園\",\n \"安城学園\",\n \"岐阜女子\",\n \"大阪桐蔭\",\n \"四日市商業\",\n \"京都精華学園\",\n \"高知中央\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1043,"value":"strongArr = Array.from(strongschools)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1033,"value":"strongschools = new Map(\n [...d3.group(AllData, (d) => d.Prefecture)].map(([pref, values]) => [\n pref,\n [\n ...d3.rollup(\n values,\n (v) => v.length,\n (d) => d.highschool\n )\n ].sort((a, b) => d3.descending(a[1], b[1]))\n ])\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1583,"value":"eighteenschoolsArr = new Array(\n \"札幌山の手\",\n \"中村学園女子\",\n \"明成\",\n \"県立金沢総合\",\n \"東京成徳大学\",\n \"大阪薫英女学院\",\n \"明星学園\",\n \"山形市立商業\",\n \"桜花学園\",\n \"聖カタリナ学園\",\n \"昭和学院\",\n \"山村学園\",\n \"安城学園\",\n \"岐阜女子\",\n \"大阪桐蔭\",\n \"四日市商業\",\n \"京都精華学園\",\n \"高知中央\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2366,"value":"sapporoData = getData(\"札幌山の手\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2386,"value":"sapporoNameValue = d3.group(sapporoData, (d) => d.nameValue)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2369,"value":"katarinaData = getData(\"聖カタリナ学園\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2389,"value":"katarinaNameValue = d3.group(katarinaData, (d) => d.nameValue)\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":2372,"value":"kuneiData = getData(\"大阪薫英女学院\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2392,"value":"kuneiNameValue = d3.group(kuneiData, (d) => d.nameValue)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2375,"value":"shouwaData = getData(\"昭和学院\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2395,"value":"shouwaNameValue = d3.group(shouwaData, (d) => d.nameValue)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2378,"value":"gifujosiData = getData(\"岐阜女子\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2398,"value":"gifujosiNameValue = d3.group(gifujosiData, (d) => d.nameValue)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2382,"value":"oukaData = getData(\"桜花学園\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2401,"value":"oukaNameValue = d3.group(oukaData, (d) => d.nameValue)","pinned":false,"hidden":false,"mode":"ojs"},{"id":398,"value":"getSchoolsOfPref = i => [...d3.group(PrefGroup.get(Prefs[i]), d => d.highschool).keys()]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1333,"value":"tooltip = d3\n .select(\"body\")\n .append(\"div\")\n .style(\"position\", \"absolute\")\n .style(\"z-index\", \"1\")\n .style(\"visibility\", \"hidden\")\n .style(\"padding\", \"5px\")\n .style(\"background\", \"rgba(255,255,255,0.7)\")\n .style(\"border-radius\", \"4px\")\n .style(\"color\", \"black\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"import {\n names,\n AllData,\n getData,\n winterData,\n inhighData,\n StrongData\n} from \"@sakamana/basketball-tsv\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2294,"value":"dataSorce= d3.tsv(\n 'https://docs.google.com/spreadsheets/d/e/2PACX-1vSKEsZC9KUv9YhkrXupFWd1onLBZSiph_q-GsWY-fv0v1M41FsMI4pBnOfuOuHIUNBJZQNKlrrMCKWV/pub?output=tsv',\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}