29:null 2a:["$","title",null,{"children":"デジタルメディア芸術分野における地域格差とは？ | yuka1105 | Observable"}] 2f:T194a,{ const width = 900; const height = 500; const margin = { top: 50, right: 20, bottom: 100, left: 60 }; const svg = d3.create("svg").attr("width", width).attr("height", height); //背景 svg .append("g") .append("rect") .attr("width", width) .attr("height", height) .attr("fill", "hsl(10, 20%, 95%)"); if (r1 == "university") { //大学 //スケール関数（X軸） const xScale = d3 .scaleBand() .domain(data1.map((d) => d.prefectures)) .range([margin.left, width - margin.right]) .padding(0.1); //スケール関数（Y軸） const yScale = d3 .scaleLinear() .domain([0, 150]) .range([height - margin.bottom, margin.top]); //軸関数(Y軸) const yAxis = d3.axisLeft(yScale).ticks(15); //棒グラフ //大学数 const rect = svg .append("g") .selectAll("rect") .data(data1) .join("rect") .attr("x", (d) => xScale(d.prefectures)) .attr("y", (d) => yScale(d.university)) .attr("width", xScale.bandwidth()) .attr("height", (d) => yScale(0) - yScale(d.university)) .attr("fill", "#ffdc00"); //メディア芸術を学べる大学数 const rect2 = svg .append("g") .selectAll("rect") .data(data1) .join("rect") .attr("x", (d) => xScale(d.prefectures)) .attr("y", (d) => yScale(d.media_university)) .attr("width", xScale.bandwidth()) .attr("height", (d) => yScale(0) - yScale(d.media_university)) .attr("fill", "#ec6d71"); // x軸の追加 // 線をひく svg .append("rect") .attr("width", width - margin.left - margin.right) .attr("height", 1) .attr("x", margin.left) .attr("y", height - margin.bottom); //テキスト svg .selectAll("text") .data(data1) .join("text") .attr("class", "label") .attr("x", (d, i) => i * (xScale.bandwidth() + 1.75) + 10 + margin.left) .attr("y", height - margin.bottom + 4) .attr("font-family", "sans-serif") .attr("font-size", 11) .attr("font-weight", "bold") .attr("fill", function (d) { if (d.area == "tokyo") { return "#ce5242"; //赤 } else if (d.area == "nagoya") { return "#007b43"; //緑 } else if (d.area == "osaka") { return "#007bbb"; //青 } else { return "#595857"; } }) .text((d) => d.prefectures); //y軸の追加 svg .append("g") .attr("transform", `translate(${margin.left},0)`) .call(yAxis); } else { //大学 //スケール関数（X軸） const xScale = d3 .scaleBand() .domain(data2.map((d) => d.prefectures)) .range([margin.left, width - margin.right]) .padding(0.1); //スケール関数（Y軸） const yScale = d3 .scaleLinear() .domain([0, 150]) .range([height - margin.bottom, margin.top]); //軸関数(Y軸) const yAxis = d3.axisLeft(yScale).ticks(15); //棒グラフ //大学数 const rect = svg .append("g") .selectAll("rect") .data(data2) .join("rect") .attr("x", (d) => xScale(d.prefectures)) .attr("y", (d) => yScale(d.university)) .attr("width", xScale.bandwidth()) .attr("height", (d) => yScale(0) - yScale(d.university)) .attr("fill", "#ffdc00"); //メディア芸術を学べる大学数 const rect2 = svg .append("g") .selectAll("rect") .data(data2) .join("rect") .attr("x", (d) => xScale(d.prefectures)) .attr("y", (d) => yScale(d.media_university)) .attr("width", xScale.bandwidth()) .attr("height", (d) => yScale(0) - yScale(d.media_university)) .attr("fill", "#ec6d71"); // x軸の追加 // 線をひく svg .append("rect") .attr("width", width - margin.left - margin.right) .attr("height", 1) .attr("x", margin.left) .attr("y", height - margin.bottom); //テキスト svg .selectAll("text") .data(data2) .join("text") .attr("class", "label") .attr("x", (d, i) => i * (xScale.bandwidth() + 1.75) + 10 + margin.left) .attr("y", height - margin.bottom + 4) .attr("font-family", "sans-serif") .attr("font-size", 11) .attr("font-weight", "bold") .attr("fill", function (d) { if (d.area == "tokyo") { return "#ce5242"; //赤 } else if (d.area == "nagoya") { return "#007b43"; //緑 } else if (d.area == "osaka") { return "#007bbb"; //青 } else { return "#595857"; //黒 } }) .text((d) => d.prefectures); //y軸の追加 svg .append("g") .attr("transform", `translate(${margin.left},0)`) .call(yAxis); } svg .append("g") .selectAll("text") .data(["赤：東京圏", "緑：名古屋圏", "青：大阪圏", "黒：非三大都市圏"]) .join("text") .attr("x", (d, i) => i * 90 + 5 + margin.left) .attr("y", 480) .attr("font-family", "sans-serif") .attr("font-size", 11) .attr("font-weight", "bold") .attr("fill", function (d) { if (d == "赤：東京圏") { return "#ce5242"; //赤 } else if (d == "緑：名古屋圏") { return "#007b43"; //緑 } else if (d == "青：大阪圏") { return "#007bbb"; //青 } else if (d == "黒：非三大都市圏") { return "#595857"; //黒 } }) .text((d) => d); svg .append("g") .append("text") .attr("x", 33) .attr("y", 33) .attr("font-family", "sans-serif") .attr("font-size", 12) .text("(校)"); //凡例 svg .append("g") .selectAll("rect") .data([1, 2]) .join("rect") .attr("x", (d, i) => 200 + 100 * i) .attr("y", margin.top) .attr("width", 10) .attr("height", 10) .attr("fill", function (d, i) { if (i == 0) { return "#ffdc00"; } else { return "#ec6d71"; } }); svg .append("g") .selectAll("text") .data(["全大学数", "デジタルメディア芸術を学べる大学数"]) .join("text") .attr("x", (d, i) => 220 + 100 * i) .attr("y", margin.top + 10) .attr("font-family", "sans-serif") .attr("font-size", 11) .attr("font-weight", "bold") .attr("fill", "#595857") .text((d) => d); return svg.node(); }30:T36ca,svg = { //ツールチップ用データ let data3ForToolTip = d3.range(1, 48).map((d) => [d]); for (let j = 0; j < 47; j++) { data3ForToolTip[j].push( data3ById.get(data3ForToolTip[j][0])[0].prefectures + "(" + data3ById.get(data3ForToolTip[j][0])[0].rank + "位)" ); data3ForToolTip[j].push(data3ById.get(data3ForToolTip[j][0])[0].num + "校"); for (let i = 0; i < data3ById.get(data3ForToolTip[j][0]).length; i++) { if (data3ById.get(data3ForToolTip[j][0])[0].num > 0) { data3ForToolTip[j].push( data3ById.get(data3ForToolTip[j][0])[i].university + "(" + data3ById.get(data3ForToolTip[j][0])[i].department + ")" ); } } } const exe = [0]; //削除したい位置（先頭が0であることに注意） for (let i = 0; i < data3ForToolTip.length; i++) { //このfor文で行を回す for (let j = 0; j < exe.length; j++) { data3ForToolTip[i].splice(exe[j] - j, 1); } } console.log(data3ForToolTip); let data4ForToolTip = d3.range(1, 48).map((d) => [d]); for (let j = 0; j < 47; j++) { data4ForToolTip[j].push( data4ById.get(data4ForToolTip[j][0])[0].prefectures + "(" + data4ById.get(data4ForToolTip[j][0])[0].rank + "位)" ); data4ForToolTip[j].push(data4ById.get(data4ForToolTip[j][0])[0].num + "校"); for (let i = 0; i < data4ById.get(data4ForToolTip[j][0]).length; i++) { if (data4ById.get(data4ForToolTip[j][0])[0].num > 0) { data4ForToolTip[j].push( data4ById.get(data4ForToolTip[j][0])[i].university + "(" + data4ById.get(data4ForToolTip[j][0])[i].department + ")" ); } } } for (let i = 0; i < data4ForToolTip.length; i++) { //このfor文で行を回す for (let j = 0; j < exe.length; j++) { data4ForToolTip[i].splice(exe[j] - j, 1); } } console.log(data4ForToolTip); let data5ForToolTip = d3.range(1, 48).map((d) => [d]); for (let j = 0; j < 47; j++) { data5ForToolTip[j].push( data5ById.get(data5ForToolTip[j][0])[0].prefectures + "(" + data5ById.get(data5ForToolTip[j][0])[0].rank + "位)" ); data5ForToolTip[j].push(data5ById.get(data5ForToolTip[j][0])[0].num + "校"); for (let i = 0; i < data5ById.get(data5ForToolTip[j][0]).length; i++) { if (data5ById.get(data5ForToolTip[j][0])[0].num > 0) { data5ForToolTip[j].push( data5ById.get(data5ForToolTip[j][0])[i].university + "(" + data5ById.get(data5ForToolTip[j][0])[i].department + ")" ); } } } for (let i = 0; i < data5ForToolTip.length; i++) { //このfor文で行を回す for (let j = 0; j < exe.length; j++) { data5ForToolTip[i].splice(exe[j] - j, 1); } } console.log(data5ForToolTip); const svg = d3 .create("svg") .attr("viewBox", [0, 0, 850, 680]) .style("overflow", "visible"); //背景 svg .append("g") .append("rect") .attr("width", 850) .attr("height", 680) .attr("fill", "#eaf4fc") .attr("stroke", "rgba(0,0,0,0)"); const path = d3.geoPath(); if (r2 == "animation") { const color = d3 .scaleLinear() .domain(d3.extent(data3, (d) => d["num"])) .range(["hsl(0, 100%, 100%)", "hsl(0, 100%, 50%)"]); //凡例の軸のためのスケール関数 const colorAxisScale = d3.scaleLinear().domain([0, 17]).range([200, 350]); //凡例の軸 const yAxis = d3.axisRight(colorAxisScale).ticks(3); svg .attr("fill", "none") .attr("stroke", "#595857") .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round"); const p = svg .selectAll(".prefecture") .data(topojson.feature(japan, japan.objects.prefectures).features) .join("path") .classed("prefecture", true) .attr("stroke-width", 0.3) .attr("d", path) .attr( "fill", (d, i) => // color(data3ById.values().find((dd) => dd.id === +d.id)["num"]) color(data3.find((dd) => dd.id === +d.id)["num"]) //地図内の情報のID（d.id）を文字列から数値に変換して、同じidを持つオブジェクトを探して、そのlength(=num)を参照している ); //凡例 svg .append("g") .selectAll("rect") .data(d3.range(11)) .join("rect") .attr("fill", (d, i) => color(d * 1.7)) .attr("stroke", "none") .attr("x", 650) .attr("y", (d, i) => 200 + d * 15) .attr("width", 15) .attr("height", 15); //y軸の追加 svg .append("g") .attr("transform", "translate(675,5)") .attr("fill", "black") .attr("stroke", "none") .call(yAxis); svg .append("g") .append("text") .attr("x", 675) .attr("y", 195) .attr("font-family", "sans-serif") .attr("font-size", 12) .attr("fill", "black") .attr("stroke", "none") .text("(校)"); //ツールチップ const tooltip = svg .append("g") .attr("class", "tooltip") .style("pointer-events", "none") .style("visibility", "hidden"); tooltip .append("rect") .attr("rx", 10) // 横の角丸半径を指定 .attr("ry", 10) // 縦の角丸半径を指定 .attr("fill", "white") .attr("stroke", "#595857") .attr("stroke-weight", 2) .attr("width", 200) .attr("height", 150) .attr("opacity", 0); const showMyTooltip = (event) => { const mouseX = 10; const mouseY = 10; const datum = d3.select(event.target).datum(); tooltip.attr("transform", `translate(${mouseX},${mouseY})`); tooltip .selectAll("text") .data(data3ForToolTip[+datum.id - 1]) .join("text") .text((d) => d) .attr("x", 10) .attr("y", (d, i) => 20 + 15 * i) .attr("fill", function (d, i) { if (i == 0) { return "#800"; } else if (i == 1) { return "#ee7948"; } else { return "#595857"; } }) .attr("font-family", "sans-serif") .attr("stroke", "none") .attr("font-size", function (d, i) { if (i == 0) { return 15; } else if (i == 1) { return 13; } else { return 8; } }) .attr("font-weight", "bold"); tooltip.style("visibility", "visible"); d3.select(event.currentTarget).attr("fill-opacity", 0.5); }; const hideMyTooltip = (event) => { tooltip.style("visibility", "hidden"); d3.select(event.currentTarget).attr("fill-opacity", 1); }; p.on("pointerenter pointermove", showMyTooltip).on( "pointerleave", hideMyTooltip ); } else if (r2 == "video_game") { const color = d3 .scaleLinear() .domain(d3.extent(data4, (d) => d["num"])) .range(["hsl(0, 100%, 100%)", "hsl(0, 100%, 50%)"]); //凡例の軸のためのスケール関数 const colorAxisScale = d3.scaleLinear().domain([0, 33]).range([200, 350]); //凡例の軸 const yAxis = d3.axisRight(colorAxisScale).ticks(5); svg .attr("fill", "none") .attr("stroke", "#595857") .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round"); const p = svg .selectAll(".prefecture") .data(topojson.feature(japan, japan.objects.prefectures).features) .join("path") .classed("prefecture", true) .attr("stroke-width", 0.3) .attr("d", path) // .attr("fill", (d, i) => `hsla(0, 100%, 50%, ${i * 2}%)`); .attr("fill", (d, i) => color(data4.find((dd) => dd.id === +d.id)["num"]) ); //凡例 svg .append("g") .selectAll("rect") .data(d3.range(11)) .join("rect") .attr("fill", (d, i) => color(d * 3.3)) .attr("stroke", "none") .attr("x", 650) .attr("y", (d, i) => 200 + d * 15) .attr("width", 15) .attr("height", 15); //y軸の追加 svg .append("g") .attr("transform", "translate(675,2.5)") .attr("fill", "black") .attr("stroke", "none") .call(yAxis); svg .append("g") .append("text") .attr("x", 675) .attr("y", 195) .attr("font-family", "sans-serif") .attr("font-size", 12) .attr("fill", "black") .attr("stroke", "none") .text("(校)"); //ツールチップ const tooltip = svg .append("g") .attr("class", "tooltip") .style("pointer-events", "none") .style("visibility", "hidden"); tooltip .append("rect") .attr("rx", 10) // 横の角丸半径を指定 .attr("ry", 10) // 縦の角丸半径を指定 .attr("fill", "white") .attr("stroke", "#595857") .attr("stroke-weight", 2) .attr("width", 200) .attr("height", 150) .attr("opacity", 0); const showMyTooltip = (event) => { const mouseX = 10; const mouseY = 10; const datum = d3.select(event.target).datum(); tooltip.attr("transform", `translate(${mouseX},${mouseY})`); tooltip .selectAll("text") .data(data4ForToolTip[+datum.id - 1]) .join("text") .text((d) => d) .attr("x", 10) .attr("y", (d, i) => 20 + 15 * i) .attr("fill", function (d, i) { if (i == 0) { return "#800"; } else if (i == 1) { return "#ee7948"; } else { return "#595857"; } }) .attr("font-family", "sans-serif") .attr("stroke", "none") .attr("font-size", function (d, i) { if (i == 0) { return 15; } else if (i == 1) { return 13; } else { return 8; } }) .attr("font-weight", "bold"); tooltip.style("visibility", "visible"); d3.select(event.currentTarget).attr("fill-opacity", 0.5); }; const hideMyTooltip = (event) => { tooltip.style("visibility", "hidden"); d3.select(event.currentTarget).attr("fill-opacity", 1); }; p.on("pointerenter pointermove", showMyTooltip).on( "pointerleave", hideMyTooltip ); } else if (r2 == "media_art") { const color = d3 .scaleLinear() .domain(d3.extent(data5, (d) => d["num"])) .range(["hsl(0, 100%, 100%)", "hsl(0, 100%, 50%)"]); //凡例の軸のためのスケール関数 const colorAxisScale = d3.scaleLinear().domain([0, 20]).range([200, 350]); //凡例の軸 const yAxis = d3.axisRight(colorAxisScale).ticks(5); svg .attr("fill", "none") .attr("stroke", "#595857") .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round"); const p = svg .selectAll(".prefecture") .data(topojson.feature(japan, japan.objects.prefectures).features) .join("path") .classed("prefecture", true) .attr("stroke-width", 0.3) .attr("d", path) // .attr("fill", (d, i) => `hsla(0, 100%, 50%, ${i * 2}%)`); .attr("fill", (d, i) => color(data5.find((dd) => dd.id === +d.id)["num"]) ); //凡例 svg .append("g") .selectAll("rect") .data(d3.range(11)) .join("rect") .attr("fill", (d, i) => color(d * 2)) .attr("stroke", "none") .attr("x", 650) .attr("y", (d, i) => 200 + d * 15) .attr("width", 15) .attr("height", 15); //y軸の追加 svg .append("g") .attr("transform", "translate(675,4.25)") .attr("fill", "black") .attr("stroke", "none") .call(yAxis); svg .append("g") .append("text") .attr("x", 675) .attr("y", 195) .attr("font-family", "sans-serif") .attr("font-size", 12) .attr("fill", "black") .attr("stroke", "none") .text("(校)"); //ツールチップ const tooltip = svg .append("g") .attr("class", "tooltip") .style("pointer-events", "none") .style("visibility", "hidden"); tooltip .append("rect") .attr("rx", 10) // 横の角丸半径を指定 .attr("ry", 10) // 縦の角丸半径を指定 .attr("fill", "white") .attr("stroke", "#595857") .attr("stroke-weight", 2) .attr("width", 200) .attr("height", 150) .attr("opacity", 0); const showMyTooltip = (event) => { const mouseX = 10; const mouseY = 10; const datum = d3.select(event.target).datum(); tooltip.attr("transform", `translate(${mouseX},${mouseY})`); tooltip .selectAll("text") .data(data5ForToolTip[+datum.id - 1]) .join("text") .text((d) => d) .attr("x", 10) .attr("y", (d, i) => 20 + 15 * i) .attr("fill", function (d, i) { if (i == 0) { return "#800"; } else if (i == 1) { return "#ee7948"; } else { return "#595857"; } }) .attr("font-family", "sans-serif") .attr("stroke", "none") .attr("font-size", function (d, i) { if (i == 0) { return 15; } else if (i == 1) { return 13; } else { return 8; } }) .attr("font-weight", "bold"); tooltip.style("visibility", "visible"); d3.select(event.currentTarget).attr("fill-opacity", 0.5); }; const hideMyTooltip = (event) => { tooltip.style("visibility", "hidden"); d3.select(event.currentTarget).attr("fill-opacity", 1); }; p.on("pointerenter pointermove", showMyTooltip).on( "pointerleave", hideMyTooltip ); } svg .append("path") .attr("stroke-width", 0.8) .attr("d", path(topojson.feature(japan, japan.objects.country))); return svg.node(); }31:T1d85,{ let width = 1200; let height = 230; const margin = { top: 80, right: 20, bottom: 20, left: 50 }; let dataset = ""; let rScale; //各データに対応したrScale const rScale6 = d3 .scaleSqrt() // 平方根（ルート2）スケール　データ値を面積にマッピングしたいときに便利なスケール関数 .domain([0, 1700]) .nice() .range([0, 30]); const rScale7 = d3 .scaleSqrt() // 平方根（ルート2）スケール　データ値を面積にマッピングしたいときに便利なスケール関数 .domain([0, 5100]) .nice() .range([0, 30]); if (r3 == "homepage") { dataset = data6; rScale = rScale6; } else if (r3 == "video_game") { dataset = data7; rScale = rScale7; } const svg = d3.create("svg").attr("width", width).attr("height", height); //背景 svg .append("g") .append("rect") .attr("width", width) .attr("height", height) .attr("fill", "hsl(80, 30%, 95%)"); // 円の生成 const circle = svg .append("g") .selectAll("circle") .data(dataset) .join("circle") .attr("cx", function (d, i) { if (i == 0) { return margin.left + rScale(d.scale); } else { const Newdataset = dataset.slice(1, i); return ( margin.left + 2 * rScale(dataset[0].scale) + 1.5 * d3.sum(Newdataset, (d) => rScale(d.scale)) + 0.5 * rScale(d.scale) ); } }) .attr("cy", (d, i) => margin.top) .attr("r", (d) => rScale(d.scale)) .attr("fill", function (d) { if (d.area == "tokyo") { return "#ce5242"; } else if (d.area == "nagoya") { return "#007b43"; } else if (d.area == "osaka") { return "#007bbb"; } else { return "595857"; } }) .attr("opacity", 0.7); //凡例（エリア） svg .append("g") .selectAll("text") .data(["東京圏", "名古屋圏", "大阪圏", "非三大都市圏"]) .join("text") .attr("x", (d, i) => i * 90 + 33 + margin.left) .attr("y", 155) .attr("font-family", "sans-serif") .attr("font-size", 11) .attr("font-weight", "bold") .attr("fill", "#595857") .text((d) => d); svg .append("g") .selectAll("circle") .data([1, 2, 3, 4]) .join("circle") .attr("cx", (d, i) => i * 90 + 20 + margin.left) .attr("cy", 150) .attr("r", 8) .attr("fill", function (d) { if (d == 1) { return "#ce5242"; //赤 } else if (d == 2) { return "#007b43"; //緑 } else if (d == 3) { return "#007bbb"; //青 } else if (d == 4) { return "#595857"; //黒 } }) .attr("opacity", 0.7); //凡例(一事業所あたりの年間売上高) svg .append("g") .selectAll("circle") .data(function () { if (r3 == "homepage") { return [0, 22, 44]; } else if (r3 == "video_game") { return [0, 1, 6]; } }) .join("circle") .attr("cx", 550 - 20) .attr("cy", (d) => height - 20 - rScale(dataset[d].scale)) .attr("r", (d) => rScale(dataset[d].scale)) .attr("fill", "#ce5242") .attr("opacity", 0.5); svg .append("g") .selectAll("text") .data(function () { if (r3 == "homepage") { return [0, 22, 44]; } else if (r3 == "video_game") { return [0, 1, 6]; } }) .join("text") .attr("x", 515 - 20) .attr("y", (d) => 12 + height - 20 - 2 * rScale(dataset[d].scale)) .attr("fill", "#595857") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("font-weight", "bold") .attr("text-anchor", "end") .text((d) => dataset[d].scale); svg .append("g") .append("text") .attr("x", 663 - 20) .attr("y", 140) .attr("fill", "#595857") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("font-weight", "bold") .attr("text-anchor", "end") .text("1事業所あたりの年間売上高（百万円）"); //注意書き svg .append("g") .selectAll("text") .data([0, 1]) .join("text") .attr("x", function () { if (r3 == "video_game") { return 530; } else { return 700; } }) .attr("y", (d) => 30 + d * 12) .attr("fill", "#595857") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("font-weight", "bold") .attr("text-anchor", "start") .text(function (d) { if (r3 == "homepage") { if (d == 0) { return "福島県、鳥取県については、データがなかったため図示していません。"; } else { return "また、上記２県以外で図示されていない都道府県については値が0だったため図示していません。"; } } else if (r3 == "video_game") { if (d == 0) { return "宮城県、山梨県、岐阜県、愛知県、兵庫県、和歌山県、岡山県、福岡県、熊本県については、データがなかったため図示していません。"; } else { return "また、上記9県以外で図示されていない都道府県については値が0だったため図示していません。"; } } }); // ツールチップ const tooltip = svg .append("g") .attr("class", "tooltip") .style("pointer-events", "none") .style("visibility", "hidden"); tooltip .append("rect") .attr("rx", 10) // 横の角丸半径を指定 .attr("ry", 10) // 縦の角丸半径を指定 .attr("fill", "white") .attr("stroke", "#595857") .attr("width", 190) .attr("height", 78) .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([ { value: datum.prefectures }, { value: `事業所数：${datum.numCom}` }, { value: "1事業所あたりの年間売上高（百万円）" }, { value: datum.scale } ]) .join("text") .text((d) => d.value) .attr("x", 10) .attr("y", function (d, i) { if (i == 0) { return 20; } else if (i == 1) { return 39; } else if (i == 2) { return 52; } else { return 70; } }) .attr("fill", function (d, i) { if (i == 0) { return "#800"; } else if (i == 1) { return "#ee7948"; } else { return "#595857"; } }) .attr("font-family", "sans-serif") .attr("stroke", "none") .attr("font-size", function (d, i) { if (i == 0) { return 15; } else if (i == 1) { return 10; } else if (i == 2) { return 10; } else { return 18; } }) .attr("font-weight", "bold"); tooltip.style("visibility", "visible"); // console.log(event.currentTarget); d3.select(event.currentTarget).attr("fill-opacity", 0.5); }; const hideMyTooltip = (event) => { tooltip.style("visibility", "hidden"); // console.log(event.currentTarget); d3.select(event.currentTarget).attr("fill-opacity", 1); }; circle .on("pointerenter pointermove", showMyTooltip) .on("pointerleave", hideMyTooltip); return svg.node(); }32:T3d7e,{ const margin = { top: 10, right: 280, bottom: 40, left: 10 }; const width2 = 900 - margin.left - margin.right; const height2 = 650 - margin.top - margin.bottom; const svg = d3 .create("svg") .attr("width", width2 + margin.left + margin.right) .attr("height", height2 + margin.top + margin.bottom); //背景 svg .append("rect") .attr("width", width2 + margin.left + margin.right) .attr("height", height2 + margin.top + margin.bottom) .attr("fill", "#fff4f4"); svg .append("circle") .attr("cx", width2 / 2 + margin.left) .attr("cy", height2 / 2 + margin.top) .attr("r", 130) .attr("fill", "white"); const svg2 = svg .append("g") .attr( "transform", `translate(${width2 / 2 + margin.left}, ${height2 / 2 + margin.top})` ); //円周の関数 const x = d3 .scaleBand() .domain(data9.map((d) => d.prefectures)) .range([0, 2 * Math.PI]) // X軸は0から2piまで＝円周のすべてを回る。1Piで止めると半円の周りになる .align(0); //研究員の色の関数(ピンク) const color = d3 .scaleLinear() .domain([0, 10]) .range(["hsl(310, 100%, 100%)", "hsl(310, 100%, 50%)"]); //研究員の図示 const tool_researcher = svg2 .append("g") .selectAll("path") .data(data9) .join("path") .attr("fill", (d) => color(d.researcher_ratio)) .attr( "d", d3 .arc() .innerRadius(130) .outerRadius(160) .startAngle((d) => x(d.prefectures)) .endAngle((d) => x(d.prefectures) + x.bandwidth()) ); //企画者の色の関数(緑) const color2 = d3 .scaleLinear() .domain([0, 50]) .range(["hsl(150, 100%, 100%)", "hsl(150, 100%, 50%)"]); //企画者の図示 const tool_plan = svg2 .append("g") .selectAll("path") .data(data9) .join("path") .attr("fill", (d) => color2(d.plan_ratio)) .attr( "d", d3 .arc() .innerRadius(160) .outerRadius(190) .startAngle((d) => x(d.prefectures)) .endAngle((d) => x(d.prefectures) + x.bandwidth()) ); //プログラマの色の関数(赤) const color3 = d3 .scaleLinear() .domain([0, 410]) .range(["hsl(10, 100%, 100%)", "hsl(10, 100%, 50%)"]); //プログラマの図示 const tool_pg = svg2 .append("g") .selectAll("path") .data(data9) .join("path") .attr("fill", (d) => color3(d.pg_ratio)) .attr( "d", d3 .arc() .innerRadius(190) .outerRadius(220) .startAngle((d) => x(d.prefectures)) .endAngle((d) => x(d.prefectures) + x.bandwidth()) ); //システムエンジニアの色の関数(紫) const color4 = d3 .scaleLinear() .domain([0, 1130]) .range(["hsl(280, 100%, 100%)", "hsl(280, 100%, 50%)"]); //システムエンジニアの図示 const tool_se = svg2 .append("g") .selectAll("path") .data(data9) .join("path") .attr("fill", (d) => color4(d.se_ratio)) .attr( "d", d3 .arc() .innerRadius(220) .outerRadius(250) .startAngle((d) => x(d.prefectures)) .endAngle((d) => x(d.prefectures) + x.bandwidth()) ); // 文字 svg2 .append("g") .selectAll("g") .data(data9) .join("g") .attr("text-anchor", "middle") .attr("transform", function (d) { return ( "rotate(" + (((x(d.prefectures) + x.bandwidth() / 2) * 180) / Math.PI - 90) + ")" + "translate(105,0)" ); }) .append("text") .text(function (d) { return d.prefectures; }) .attr("transform", function (d) { return (x(d.prefectures) + x.bandwidth() / 2 + Math.PI) % (2 * Math.PI) < Math.PI ? "rotate(180)" : "rotate(0)"; }) .attr("fill", function (d) { if (d.area == "tokyo") { return "#ce5242"; //赤 } else if (d.area == "nagoya") { return "#007b43"; //緑 } else if (d.area == "osaka") { return "#007bbb"; //青 } else { return "#595857"; //黒 } }) .attr("font-family", "sans-serif") .attr("stroke", "none") .attr("font-size", 10) .attr("font-weight", "bold") .attr("alignment-baseline", "middle"); //三大都市圏と非三大都市圏 svg .append("g") .selectAll("text") .data(["赤：東京圏", "緑：名古屋圏", "青：大阪圏", "黒：非三大都市圏"]) .join("text") .attr("x", (d, i) => i * 90 + 110 + margin.left) .attr("y", 610) .attr("font-family", "sans-serif") .attr("font-size", 11) .attr("font-weight", "bold") .attr("fill", function (d) { if (d == "赤：東京圏") { return "#ce5242"; //赤 } else if (d == "緑：名古屋圏") { return "#007b43"; //緑 } else if (d == "青：大阪圏") { return "#007bbb"; //青 } else if (d == "黒：非三大都市圏") { return "#595857"; //黒 } }) .text((d) => d); //タイトル svg .append("g") .selectAll("text") .data([0, 1]) .join("text") .attr("x", 670) .attr("y", (d) => 220 + d * 12) .attr("fill", "#595857") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("font-weight", "bold") .attr("text-anchor", "start") .text(function (d) { if (d == 0) { return "都道府県別人口10万人あたりの"; } else { return "ソフトウェア業務の部門別事業従事者数 (人)"; } }); //研究者の凡例 svg .append("g") .selectAll("rect") .data(d3.range(11)) .join("rect") .attr("fill", (d, i) => color(d)) .attr("stroke", "none") .attr("x", (d, i) => 700 + d * 15) .attr("y", 260) .attr("width", 15) .attr("height", 15); //企画者の凡例 svg .append("g") .selectAll("rect") .data(d3.range(11)) .join("rect") .attr("fill", (d, i) => color2(d * 5)) .attr("stroke", "none") .attr("x", (d, i) => 700 + d * 15) .attr("y", 310) .attr("width", 15) .attr("height", 15); //プログラマの凡例 svg .append("g") .selectAll("rect") .data(d3.range(11)) .join("rect") .attr("fill", (d, i) => color3(d * 41)) .attr("stroke", "none") .attr("x", (d, i) => 700 + d * 15) .attr("y", 360) .attr("width", 15) .attr("height", 15); //システムエンジニアの凡例 svg .append("g") .selectAll("rect") .data(d3.range(11)) .join("rect") .attr("fill", (d, i) => color4(d * 113)) .attr("stroke", "none") .attr("x", (d, i) => 700 + d * 15) .attr("y", 410) .attr("width", 15) .attr("height", 15); //研究者の凡例のラベル svg .append("g") .selectAll("text") .data([0, 10]) .join("text") .attr("x", function (d, i) { if (i == 0) { return 700 + 3; } else { return 850 + 3; } }) .attr("y", 260 - 2) .attr("fill", "#595857") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("font-weight", "bold") .attr("text-anchor", "start") .text((d) => d); //企画者の凡例のラベル svg .append("g") .selectAll("text") .data([0, 50]) .join("text") .attr("x", function (d, i) { if (i == 0) { return 700 + 3; } else { return 850 + 3; } }) .attr("y", 310 - 2) .attr("fill", "#595857") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("font-weight", "bold") .attr("text-anchor", "start") .text((d) => d); //プログラマの凡例のラベル svg .append("g") .selectAll("text") .data([0, 410]) .join("text") .attr("x", function (d, i) { if (i == 0) { return 700 + 3; } else { return 850 - 1; } }) .attr("y", 360 - 2) .attr("fill", "#595857") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("font-weight", "bold") .attr("text-anchor", "start") .text((d) => d); //システムエンジニアの凡例のラベル svg .append("g") .selectAll("text") .data([0, 1130]) .join("text") .attr("x", function (d, i) { if (i == 0) { return 700 + 3; } else { return 850 - 6; } }) .attr("y", 410 - 2) .attr("fill", "#595857") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("font-weight", "bold") .attr("text-anchor", "start") .text((d) => d); //三大都市圏と非三大都市圏 svg .append("g") .selectAll("text") .data(["研究者", "企画者", "プログラマ", "システムエンジニア"]) .join("text") .attr("x", 690) .attr("y", (d, i) => 275 + i * 50) .attr("font-family", "sans-serif") .attr("font-size", 11) .attr("font-weight", "bold") .attr("fill", "#595857") .attr("text-anchor", "end") .text((d) => d); // ツールチップ const tooltip_r_pl = svg .append("g") .attr("class", "tooltip") .style("pointer-events", "none") .style("visibility", "hidden"); tooltip_r_pl .append("rect") .attr("rx", 10) // 横の角丸半径を指定 .attr("ry", 10) // 縦の角丸半径を指定 .attr("fill", "white") .attr("stroke", "#595857") .attr("width", 120) .attr("height", 50) .attr("opacity", 0.8); const tooltip_pg = svg .append("g") .attr("class", "tooltip") .style("pointer-events", "none") .style("visibility", "hidden"); tooltip_pg .append("rect") .attr("rx", 10) // 横の角丸半径を指定 .attr("ry", 10) // 縦の角丸半径を指定 .attr("fill", "white") .attr("stroke", "#595857") .attr("width", 160) .attr("height", 50) .attr("opacity", 0.8); const tooltip_se = svg .append("g") .attr("class", "tooltip") .style("pointer-events", "none") .style("visibility", "hidden"); tooltip_se .append("rect") .attr("rx", 10) // 横の角丸半径を指定 .attr("ry", 10) // 縦の角丸半径を指定 .attr("fill", "white") .attr("stroke", "#595857") .attr("width", 220) .attr("height", 50) .attr("opacity", 0.8); const showMyTooltip_researcher = (event) => { const mouseX = d3.pointer(event)[0] + 195; const mouseY = d3.pointer(event)[1] + 255; const datum = d3.select(event.target).datum(); tooltip_r_pl.attr("transform", `translate(${mouseX},${mouseY})`); tooltip_r_pl .selectAll("text") .data([ { value: datum.prefectures }, { value: `研究者：${datum.researcher_ratio}人` } ]) .join("text") .text((d) => d.value) .attr("x", 10) .attr("y", (d, i) => 20 + 20 * i) .attr("fill", function (d, i) { if (i == 0) { return "#800"; } else { return "#595857"; } }) .attr("font-family", "sans-serif") .attr("stroke", "none") .attr("font-size", function (d, i) { if (i == 0) { return 15; } else { return 13; } }) .attr("font-weight", "bold"); tooltip_r_pl.style("visibility", "visible"); // console.log(event.currentTarget); d3.select(event.currentTarget).attr("fill-opacity", 0.5); }; const showMyTooltip_plan = (event) => { const mouseX = d3.pointer(event)[0] + 195; const mouseY = d3.pointer(event)[1] + 255; const datum = d3.select(event.target).datum(); tooltip_r_pl.attr("transform", `translate(${mouseX},${mouseY})`); tooltip_r_pl .selectAll("text") .data([ { value: datum.prefectures }, { value: `企画者：${datum.plan_ratio}人` } ]) .join("text") .text((d) => d.value) .attr("x", 10) .attr("y", (d, i) => 20 + 20 * i) .attr("fill", function (d, i) { if (i == 0) { return "#800"; } else { return "#595857"; } }) .attr("font-family", "sans-serif") .attr("stroke", "none") .attr("font-size", function (d, i) { if (i == 0) { return 15; } else { return 13; } }) .attr("font-weight", "bold"); tooltip_r_pl.style("visibility", "visible"); // console.log(event.currentTarget); d3.select(event.currentTarget).attr("fill-opacity", 0.5); }; const showMyTooltip_pg = (event) => { const mouseX = d3.pointer(event)[0] + 195; const mouseY = d3.pointer(event)[1] + 255; const datum = d3.select(event.target).datum(); tooltip_pg.attr("transform", `translate(${mouseX},${mouseY})`); tooltip_pg .selectAll("text") .data([ { value: datum.prefectures }, { value: `プログラマ：${datum.pg_ratio}人` } ]) .join("text") .text((d) => d.value) .attr("x", 10) .attr("y", (d, i) => 20 + 20 * i) .attr("fill", function (d, i) { if (i == 0) { return "#800"; } else { return "#595857"; } }) .attr("font-family", "sans-serif") .attr("stroke", "none") .attr("font-size", function (d, i) { if (i == 0) { return 15; } else { return 13; } }) .attr("font-weight", "bold"); tooltip_pg.style("visibility", "visible"); // console.log(event.currentTarget); d3.select(event.currentTarget).attr("fill-opacity", 0.5); }; const showMyTooltip_se = (event) => { const mouseX = d3.pointer(event)[0] + 195; const mouseY = d3.pointer(event)[1] + 255; const datum = d3.select(event.target).datum(); tooltip_se.attr("transform", `translate(${mouseX},${mouseY})`); tooltip_se .selectAll("text") .data([ { value: datum.prefectures }, { value: `システムエンジニア：${datum.se_ratio}人` } ]) .join("text") .text((d) => d.value) .attr("x", 10) .attr("y", (d, i) => 20 + 20 * i) .attr("fill", function (d, i) { if (i == 0) { return "#800"; } else { return "#595857"; } }) .attr("font-family", "sans-serif") .attr("stroke", "none") .attr("font-size", function (d, i) { if (i == 0) { return 15; } else { return 13; } }) .attr("font-weight", "bold"); tooltip_se.style("visibility", "visible"); // console.log(event.currentTarget); d3.select(event.currentTarget).attr("fill-opacity", 0.5); }; const hideMyTooltip_r_pl = (event) => { tooltip_r_pl.style("visibility", "hidden"); // console.log(event.currentTarget); d3.select(event.currentTarget).attr("fill-opacity", 1); }; const hideMyTooltip_pg = (event) => { tooltip_pg.style("visibility", "hidden"); // console.log(event.currentTarget); d3.select(event.currentTarget).attr("fill-opacity", 1); }; const hideMyTooltip_se = (event) => { tooltip_se.style("visibility", "hidden"); // console.log(event.currentTarget); d3.select(event.currentTarget).attr("fill-opacity", 1); }; tool_researcher .on("pointerenter pointermove", showMyTooltip_researcher) .on("pointerleave", hideMyTooltip_r_pl); tool_plan .on("pointerenter pointermove", showMyTooltip_plan) .on("pointerleave", hideMyTooltip_r_pl); tool_pg .on("pointerenter pointermove", showMyTooltip_pg) .on("pointerleave", hideMyTooltip_pg); tool_se .on("pointerenter pointermove", showMyTooltip_se) .on("pointerleave", hideMyTooltip_se); return svg.node(); }33:T90e,function input(config) { let { form, type = "text", attributes = {}, action, getValue, title, description, format, display, submit, options } = config; const wrapper = html`

`; if (!form) form = html``; Object.keys(attributes).forEach((key) => { const val = attributes[key]; if (val != null) form.input.setAttribute(key, val); }); if (submit) form.append( html`` ); form.append( html`` ); if (title) form.prepend( html`

${title}

` ); if (description) form.append( html`

${description}

` ); if (format) format = typeof format === "function" ? format : d3format.format(format); if (action) { action(form); } else { const verb = submit ? "onsubmit" : type == "button" ? "onclick" : type == "checkbox" || type == "radio" ? "onchange" : "oninput"; form[verb] = (e) => { e && e.preventDefault(); const value = getValue ? getValue(form.input) : form.input.value; if (form.output) { const out = display ? display(value) : format ? format(value) : value; if (out instanceof window.Element) { while (form.output.hasChildNodes()) { form.output.removeChild(form.output.lastChild); } form.output.append(out); } else { form.output.value = out; } } form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; if (verb !== "oninput") wrapper.oninput = (e) => e && e.stopPropagation() && e.preventDefault(); if (verb !== "onsubmit") form.onsubmit = (e) => e && e.preventDefault(); form[verb](); } while (form.childNodes.length) { wrapper.appendChild(form.childNodes[0]); } form.append(wrapper); return form; }34:T500,function radio(config = {}) { let { value: formValue, title, description, submit, options, disabled } = Array.isArray(config) ? { options: config } : config; options = options.map((o) => typeof o === "string" ? { value: o, label: o } : o ); const form = input({ type: "radio", title, description, submit, getValue: (input) => { if (input.checked) return input.value; const checked = Array.prototype.find.call( input, (radio) => radio.checked ); return checked ? checked.value : undefined; }, form: html` ` }); form.output.remove(); return form; }35:[] 2d:{"id":"e0128da0bb2ac18d","slug":"regional-disparities-in-the-digital-media-art-industry","title":"デジタルメディア芸術分野における地域格差とは？","thumbnail":"3168fd8d3e73eaee16caa76039b00c38096edf5efe302ba7a87606a737169664","access_level":"public","create_time":"$D2021-12-10T08:27:56.147Z","update_time":"$D2022-01-30T11:31:43.126Z","view_time":null,"first_public_time":"$D2021-12-10T08:35:16.948Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"854ba98f77be62cd","login":"yuka1105","name":"","avatar_url":"https://avatars-next.observableusercontent.com/31d99edbebdd43d4f38d17fb00201ad9107bd7ad758fd720dbc8971a99cbb637","tier":"starter_2024"},"version":2509,"publish_version":2509,"role":null,"authored":false,"authors":[{"type":"individual","id":"ea377755b74a3dbb","login":"yuka1105","name":"","avatar_url":"https://avatars-next.observableusercontent.com/31d99edbebdd43d4f38d17fb00201ad9107bd7ad758fd720dbc8971a99cbb637","tier":null}],"members":[{"type":"individual","id":"99e57c8b5dcd5ca6","login":"sugi2000","name":"SUGIMOTO Tatsuo","avatar_url":"https://avatars-next.observableusercontent.com/aa2e590c6e4574dde26ce160f882c7074c3f190de1894c0dd147878beed52f39","tier":null,"role":"editor"},{"type":"individual","id":"ea377755b74a3dbb","login":"yuka1105","name":"","avatar_url":"https://avatars-next.observableusercontent.com/31d99edbebdd43d4f38d17fb00201ad9107bd7ad758fd720dbc8971a99cbb637","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"デジタルメディア芸術分野における地域格差とは？","cells":[{"id":0,"value":"html`

デジタルメディア芸術分野における地域格差とは？

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"___","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2344,"value":"html`

01. はじめに

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1415,"value":"html`

　現在ゲームやアニメーションを始めとするデジタルメディア芸術分野に興味があり、その分野を学べる大学に進学し、いずれはその領域で活躍したいと願っている高校生は一定数いると思われる。しかし、果たして彼らのうちのどの程度が、その分野に「地域差」があるということを理解した上で進路を選択することができているだろうか。これからデジタルメディア芸術分野に向かおうとしている学生がその分野における地域差を理解した上で進路を選択できるよう、本記事ではその分野における大学や企業の数およびそれらの規模の地域差を可視化することを試みる。

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2390,"value":"___","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2446,"value":"html`

　デジタルメディア芸術分野の「地域差」を知っていくにあたり、「企業」の地域差は一旦おいておくことにする。それよりも先に、地域差というものを知る導入として、まずは高校生の皆さんの身近な関心の的である「大学」についての地域差を見ていきたいと思う。\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2241,"value":"html`

02. デジタルメディア芸術分野を学べる大学の数に関する地域差

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":583,"value":"html`

①全大学数に占めるデジタルメディア芸術を学べる大学数の都道府県比較

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":778,"value":"viewof r1 = radio({\n options: [\n { label: \"大学数ランキング\", value: \"university\" },\n {\n label: \"デジタルメディア芸術が学べる大学数ランキング\",\n value: \"media_university\"\n }\n ],\n value: \"university\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2306,"value":"

『学校基本調査 / 令和３年度高等教育機関《報告書掲載集計》学校調査大学・大学院』文部科学省　総合教育政策局調査企画課　
\nhttps://www.e-stat.go.jp/stat-search/files?page=1&layout=datalist&toukei=00400001&tstat=000001011528&cycle=0&tclass1=000001161251&tclass2=000001161252&tclass3=000001161253&tclass4=000001161255&stat_infid=000032155509&tclass5val=0
\n『令和元年度メディア芸術分野実態調査報告書』
\nマンガ・アニメーション分野\n戸田康太(独立行政法人日本芸術文化振興会プログラムオフィサー)
\nゲーム・メディアアート分野\n小林桂子(独立行政法人日本芸術文化振興会プログラムオフィサー)
\nhttps://www.ntj.jac.go.jp/assets/files/kikin/artscouncil/mediahoukoku.pdf

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":843,"value":"html`

　「大学数ランキング」のグラフから、いわゆる東京圏、名古屋圏、大阪圏からなる三大都市圏には大学数が多く、それに比例するようにデジタルメディア芸術を学べる大学の数も多くなっていることが読み取れる。一方、非三大都市圏には大学数が少なく、デジタルメディア芸術を学べる大学数も限られていることがわかる。
\n　また、「大学数ランキング」から「デジタルメディア芸術を学べる大学数ランキング」のグラフに表示を切り替えると、全体的に東京圏に含まれる都道府県のランクは上がり、大阪圏のランクは下がり、名古屋圏のうち愛知県のランクが上がるという結果が得られる。これより、デジタルメディア芸術分野の研究に関して、特に東京圏が力を入れているということが考えられる。

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"___","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":138,"value":"html`

　東京圏では他の地域と比べてデジタルメディア芸術分野の研究が盛んなのか確かめてみよう。\nデジタルメディア芸術分野のうち、アニメーション、ゲーム、メディアアートの３つの専門領域それぞれを学べる大学の数の都道府県比較を日本地図上に示す。
\n　都道府県にカーソルを当てるとそれらの専門領域を学べる大学の数と大学名、学科名が左上に表示される。

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1290,"value":"html`

②デジタルメディア芸術が学べる大学数の都道府県比較

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":939,"value":"viewof r2 = radio({\n options: [\n { label: \"アニメーション\", value: \"animation\" },\n { label: \"ゲーム\", value: \"video_game\" },\n { label: \"メディアアート\", value: \"media_art\" }\n ],\n value: \"animation\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":881,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2324,"value":"

『令和元年度メディア芸術分野実態調査報告書』
\nマンガ・アニメーション分野\n戸田康太(独立行政法人日本芸術文化振興会プログラムオフィサー)
\nゲーム・メディアアート分野\n小林桂子(独立行政法人日本芸術文化振興会プログラムオフィサー)
\nhttps://www.ntj.jac.go.jp/assets/files/kikin/artscouncil/mediahoukoku.pdf

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1316,"value":"html`

　色が濃い地域は大学数が多く、色が薄い地域は大学数が少ないことを示している。とりわけ真っ白な地域は大学数が0となっている。
\n　アニメーション、ゲームの2つの専門領域において、三大都市圏には大学数が多いことがわかる。特に東京都はダントツで数が多くなっている。また、メディアアートに関しては他の２領域と異なり、東京都、愛知県、北海道の大学数が他と比べてかなり多くなっている。そして、3つのどの領域についても、その領域のことを研究できる大学が全くない都道府県が数多く見られる。
\n　以上をまとめると、日本地図からも、デジタルメディア芸術を学べる大学の数に地域差があることが読み取れた。文化の発信地である都市圏だからこそアニメーションやゲームについての研究ができる大学の数が多くなっているという結果は納得できる。しかしながらメディアアートの研究ができる大学の数に関して大阪府が10位、三大都市圏に含まれない北海道が3位という結果は予想外であった。
\n　また、高校生がデジタルメディア芸術に興味を持ち、大学進学の際、その分野を学べる大学を選ぶとすると、必然的に進学先は都市部になるケースが多くなると考えられる。特に、その分野を学べる大学が全くない都道府県に住む高校生は県外に進学せざるを得なくなると言える。（専門学校については図に示していないので、あくまでも大学進学をするとすればの話である。）

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":864,"value":"___","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":173,"value":"html`

　今度は企業における地域差を見てみよう。就職すると自身の居住地はほぼその勤務先周辺に決まるため、自身が携わろうとしている分野の企業がどの地域に分布しがちなのか、どの地域で規模が大きくなっているのかを知っておくことは重要である。

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2236,"value":"html`

03. デジタルメディア芸術分野の企業の規模に関する地域差

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2468,"value":"html`

　企業の規模　≒　1事業所あたりの年間売上高

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1472,"value":"html`

①受注ソフトウェア開発業務、ゲームソフト開発業務について1事業所あたりの年間売上高の都道府県比較

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1441,"value":"html`

\n　以下に示す「受注ソフトウェア開発」にはデジタルメディア芸術分野の要素の１つである「ホームページ制作」が含まれる。

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1643,"value":"viewof r3 = radio({\n options: [\n { label: \"受注ソフトウェア開発\", value: \"homepage\" },\n {\n label: \"ゲームソフト開発\",\n value: \"video_game\"\n }\n ],\n value: \"homepage\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1638,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2328,"value":"

『平成30年　特定サービス産業実態調査報告書　ソフトウェア業，情報処理・提供サービス業及びインターネット附随サービス業編』\n経済産業省大臣官房調査統計グループ
\nhttps://www.meti.go.jp/statistics/tyo/tokusabizi/result-2/h30/pdf/h30report01.pdf\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2274,"value":"html`

　受注ソフトウェア開発に関しては、東京圏の規模が大きいことが読み取れる。ゲームソフト開発に関しては東京都が他の都道府県に比べて圧倒的に規模が大きいことが読み取れる。

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2395,"value":"___","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1568,"value":"html`

②人口10万人あたりのソフトウェア業務の部門別事業従事者数の地域差

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1574,"value":"html`

　デジタルメディア芸術分野の構成要素であるゲーム開発やホームページ制作はソフトウェア業務によって成り立っている。ここではソフトウェア業務に携わる研究者、企画者、プログラマ、システムエンジニアが人口10万人あたり果たして何人いるのかを、都道府県比較する。

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1954,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2335,"value":"

『平成30年　特定サービス産業実態調査報告書　ソフトウェア業，情報処理・提供サービス業及びインターネット附随サービス業編』経済産業省大臣官房調査統計グループ
\nhttps://www.meti.go.jp/statistics/tyo/tokusabizi/result-2/h30/pdf/h30report01.pdf
\n『都道府県別人口と人口増減率』総務省統計局
\nhttps://www.stat.go.jp/data/nihon/02.html\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2288,"value":"html`

　人口比で見たとき、東京都、神奈川県、続いて大阪府において、ソフトウェア業務の従事者数が多いことが読み取れる。ただしこの都道府県比較においても、東京都が圧倒的に他と差をつけていることが伺える。

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"___","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2339,"value":"html`

04. おわりに

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2299,"value":"html`

　ここまでデジタルメディア芸術分野が学べる大学の数やその分野を専門とする企業の規模の地域差を見てきた。文化の発信地である都市圏(とりわけ東京都)とその他の地域間において大学数や企業の規模の差が見られたのではないだろうか。デジタルメディア芸術分野に興味がある高校生の皆さんには是非この地域差を考慮した上で進路を選択してもらえれば幸いである。

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2292,"value":"___","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2349,"value":"html`

以下は読み物ではありません。

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":471,"value":"style1 = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":628,"value":"d3format = require(\"d3-format@1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":626,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":619,"value":"radioDemo = md`\n~~~js\nimport {radio} from \"@jashkenas/inputs\"\n~~~`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":617,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"#### 大学数のデータ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":302,"value":"url1 = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vQzvsqVO2SUiYB78YpWX224lKXVPit2jU2dV6oVQ22RnnqDkytnmFPYRM38bmJn45csxR5JPF_gBezF/pub?gid=1720353450&single=true&output=tsv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":314,"value":"data1 = await d3.tsv(url1, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":771,"value":"url2 = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vQzvsqVO2SUiYB78YpWX224lKXVPit2jU2dV6oVQ22RnnqDkytnmFPYRM38bmJn45csxR5JPF_gBezF/pub?gid=736863920&single=true&output=tsv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":772,"value":"data2 = await d3.tsv(url2, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":876,"value":"japan = d3.json(\"https://unpkg.com/jpn-atlas@1/japan/japan.json\")\n//import {japan} from '@sugi2000/japan-atlas-topojson-other-topojson'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":886,"value":"import {bannerTitle} from '@observablehq/banner'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":887,"value":"import { mdh } from '@sugi2000/d3-6-0-migration-guide-in-japanese'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":889,"value":"import { toc } from \"@nebrius/indented-toc\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":891,"value":"topojson = require('topojson')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":893,"value":"d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"#### メディア芸術分野(アニメーション)の大学数のデータ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":319,"value":"url3 = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vQzvsqVO2SUiYB78YpWX224lKXVPit2jU2dV6oVQ22RnnqDkytnmFPYRM38bmJn45csxR5JPF_gBezF/pub?gid=301014639&single=true&output=tsv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"data3 = await d3.tsv(url3, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1129,"value":"data3ById = d3.group(data3, (d) => d.id)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":340,"value":"#### メディア芸術分野(ゲーム)の大学数のデータ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":334,"value":"url4 = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vQzvsqVO2SUiYB78YpWX224lKXVPit2jU2dV6oVQ22RnnqDkytnmFPYRM38bmJn45csxR5JPF_gBezF/pub?gid=1513444270&single=true&output=tsv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"data4 = await d3.tsv(url4, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1278,"value":"data4ById = d3.group(data4, (d) => d.id)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"#### メディア芸術分野(メディアアート)の大学数のデータ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":349,"value":"url5 = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vQzvsqVO2SUiYB78YpWX224lKXVPit2jU2dV6oVQ22RnnqDkytnmFPYRM38bmJn45csxR5JPF_gBezF/pub?gid=906452472&single=true&output=tsv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"data5 = await d3.tsv(url5, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1282,"value":"data5ById = d3.group(data5, (d) => d.id)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1594,"value":"#### 都道府県別1事業所あたりの年間売上高（受注ソフトウェア）","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1584,"value":"url6 = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vQzvsqVO2SUiYB78YpWX224lKXVPit2jU2dV6oVQ22RnnqDkytnmFPYRM38bmJn45csxR5JPF_gBezF/pub?gid=1944654882&single=true&output=tsv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1591,"value":"data6 = await d3.tsv(url6, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1613,"value":"#### 都道府県別1事業所あたりの年間売上高（ゲーム）","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1604,"value":"url7 = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vQzvsqVO2SUiYB78YpWX224lKXVPit2jU2dV6oVQ22RnnqDkytnmFPYRM38bmJn45csxR5JPF_gBezF/pub?gid=898926411&single=true&output=tsv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1607,"value":"data7 = await d3.tsv(url7, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1624,"value":"url8 = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vQzvsqVO2SUiYB78YpWX224lKXVPit2jU2dV6oVQ22RnnqDkytnmFPYRM38bmJn45csxR5JPF_gBezF/pub?gid=1025414499&single=true&output=tsv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1627,"value":"data8 = await d3.tsv(url8, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1551,"value":"#### 都道府県別10万人あたりのソフトウェア業務の部門別事業従事者数","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1547,"value":"url9 = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vQzvsqVO2SUiYB78YpWX224lKXVPit2jU2dV6oVQ22RnnqDkytnmFPYRM38bmJn45csxR5JPF_gBezF/pub?gid=2029146031&single=true&output=tsv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1556,"value":"data9 = await d3.tsv(url9, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"style2 = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 2e:"$2d:body"