31:T1f05,svg2 = { const width = 900; const height = 300; const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .style("overflow", "visible"); const margin = { top: 70, right: 65, bottom: 35, left: 80 }; const max = 100; //背景 svg .append("g") .append("rect") .attr("width", width) .attr("height", height) .attr("fill", "#f9f8f9"); const xScale = d3 .scaleBand() .domain(dataset) .range([margin.left, width - margin.right]) .padding(0.05); const xScale2 = d3 .scaleBand() .domain(dataset.map((d) => d.year)) .range([margin.left, width - margin.right]) .padding(0.05); const yScale = d3 .scaleLinear() .domain([0, d3.max(dataset, (d) => d.numberOfHouseholds)]) .range([height - margin.bottom, margin.top]); const yScale2 = d3 .scaleLinear() .domain([0, d3.max(dataset, (d) => d.numberOfHouseholds)]) .range([height - margin.bottom, margin.top]); const rScale = d3 .scaleSqrt() // 平方根（ルート2）スケール　データ値を面積にマッピングしたいときに便利なスケール関数 .domain([0, d3.max(dataset, (d) => d.total)]) .nice() .range([0, 10]); const rScale2 = d3 .scaleSqrt() // 平方根（ルート2）スケール　データ値を面積にマッピングしたいときに便利なスケール関数 .domain([0, d3.max(dataset, (d) => d.numberOfHouseholds)]) .nice() .range([0, 10]); // Y axis const x = d3 .scaleBand() .range([margin.left, width - margin.right]) .domain( dataset.map(function (d) { return d.year; }) ) .padding(1); svg .append("g") .attr("transform", `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(x)) .selectAll("text") .attr("transform", "translate(-10,0)rotate(-45)") .style("text-anchor", "end"); //軸 const xAxis = d3.axisBottom().scale(xScale); const xAxis2 = d3.axisBottom().scale(xScale2); const yAxis = d3.axisLeft().scale(yScale).ticks(5); /*svg .append("g") .attr("transform", `translate(0, ${height - margin.bottom})`) .call(xAxis2);*/ svg.append("g").attr("transform", `translate(${margin.left}, 0)`).call(yAxis); // Line1 const k = svg.append("g"); k.selectAll("myline") .data(dataset) .enter() .append("line") .attr("y1", height - margin.bottom) .attr("y2", height - margin.bottom) .attr("x1", function (d) { return x(d.year); }) .attr("x2", function (d) { return x(d.year); }) .attr("stroke", "gray"); // Line2 const g = svg.append("g"); g.selectAll("myline2") .data(dataset) .enter() .append("line") .attr("y1", height - margin.bottom) .attr("y2", height - margin.bottom) .attr("x1", function (d) { return x(d.year); }) .attr("x2", function (d) { return x(d.year); }) .attr("stroke", "grey"); const circle = k .selectAll("circle.total") .attr("class", "total") .data(dataset) .join("circle") .attr("cx", function (d) { return x(d.year); }) .attr("cy", height - margin.bottom) .attr("r", (d) => rScale(d.total)) .attr("fill", d3.schemeSet2[0]) .attr("fill-opacity", 0.7); const circle2 = g .selectAll("circle2.house") .data(dataset) .enter() .append("circle") .attr("class", "house") .attr("cx", function (d) { return x(d.year); }) .attr("cy", height - margin.bottom) .attr("r", (d) => rScale2(d.numberOfHouseholds)) .attr("fill", "#BD7CBD") .attr("fill-opacity", 0.7); // Change the X coordinates of line and circle k.selectAll("circle") .transition() .duration(2000) .attr("cy", (d) => yScale(d.total)); g.selectAll("circle") .transition() .duration(2000) .attr("cy", (d) => yScale2(d.numberOfHouseholds)); k.selectAll("line") .transition() .duration(2000) .attr("y1", (d) => yScale(d.total)); g.selectAll("line") .transition() .duration(2000) .attr("y1", (d) => yScale2(d.numberOfHouseholds)); // ツールチップ const tooltip = svg .append("g") .attr("class", "tooltip") .style("pointer-events", "none") .style("visibility", "hidden"); tooltip .append("rect") .attr("fill", d3.schemeSet2[0]) .attr("stroke", d3.schemeSet2[0]) .attr("width", 120) .attr("height", 50) .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.year + "年" }, { value: d3.format(",.2r")(datum.total) + "部" } ]) .join("text") .text((d) => `${d.value}`) .attr("x", 10) .attr("y", (d, i) => 20 + 20 * i) .attr("fill", (d, i) => (i === 0 ? "white" : "white")) .attr("font-family", "sans-serif") .attr("font-weight", (d, i) => (i === 0 ? "bold" : "normal")) .attr("font-size", 15); tooltip.style("visibility", "visible"); // console.log(event.currentTarget); d3.select(event.currentTarget).attr("fill-opacity", 1); }; const hideMyTooltip = (event) => { tooltip.style("visibility", "hidden"); // console.log(event.currentTarget); d3.select(event.currentTarget).attr("fill-opacity", 0.8); }; circle .on("pointerenter pointermove", showMyTooltip) .on("pointerleave", hideMyTooltip); const tooltip2 = svg .append("g") .attr("class", "tooltip2") .style("pointer-events", "none") .style("visibility", "hidden"); tooltip2 .append("rect") .attr("fill", "#BD7CBD") .attr("stroke", "#BD7CBD") .attr("width", 130) .attr("height", 50) .attr("opacity", 0.8); const showMyTooltip2 = (event) => { const mouseX = d3.pointer(event)[0] + 10; const mouseY = d3.pointer(event)[1] + 10; const datum = d3.select(event.target).datum(); tooltip2.attr("transform", `translate(${mouseX},${mouseY})`); tooltip2 .selectAll("text") .data([ { value: datum.year + "年" }, { value: d3.format(",.2r")(datum.numberOfHouseholds) + "世帯" } ]) .join("text") .text((d) => `${d.value}`) .attr("x", 10) .attr("y", (d, i) => 20 + 20 * i) .attr("fill", (d, i) => (i === 0 ? "white" : "white")) .attr("font-family", "sans-serif") .attr("font-weight", (d, i) => (i === 0 ? "bold" : "normal")) .attr("font-size", 15); tooltip2.style("visibility", "visible"); // console.log(event.currentTarget); d3.select(event.currentTarget).attr("fill-opacity", 1); }; const hideMyTooltip2 = (event) => { tooltip2.style("visibility", "hidden"); // console.log(event.currentTarget); d3.select(event.currentTarget).attr("fill-opacity", 0.8); }; circle2 .on("pointerenter pointermove", showMyTooltip2) .on("pointerleave", hideMyTooltip2); //ex const circle_ex = svg .append("circle") .attr("cx", 45) .attr("cy", 20) .attr("r", 10) .attr("fill", "#69b3a2"); svg .append("g") .append("text") .attr("x", 62) .attr("y", 22) .attr("font-family", "sans-serif") .attr("font-size", 12) .text("- 発行部数"); const circle_ex2 = svg .append("circle") .attr("cx", 45) .attr("cy", 45) .attr("r", 10) .attr("fill", "#BD7CBD"); svg .append("g") .append("text") .attr("x", 62) .attr("y", 48) .attr("font-family", "sans-serif") .attr("font-size", 12) .text("- 世帯数"); svg .append("g") .append("text") .attr("x", 830) .attr("y", 290) .attr("font-family", "sans-serif") .attr("font-size", 10) .text("年"); return svg.node(); }32:T1d79,svg_p = { const margin = { top: 60, right: 30, bottom: 30, left: 50 }; const width = 460; const height = 500; const svg = d3.create("svg").attr("width", width).attr("height", height); svg .append("rect") .attr("width", width) .attr("height", height) .attr("fill", "#f9f8f9"); const age_range = d3 .scaleOrdinal() // 順序尺度のためのスケール関数 .domain([ "teens", "twenties", "thirties", "forties", "fifties", "sixties", "Over70s" ]) // 入力ドメインは、データ内の値の配列 .range(["18〜19歳", "20代", "30代", "40代", "50代", "60代", "70代以上"]); // Add X axis const x = d3 .scaleBand() .domain( dataset_p.map(function (d) { return d.id; }) ) .range([margin.left, width - margin.right]) .padding(1); const x2 = d3 .scaleBand() .domain(dataset_p.map((d) => age_range(d.id))) .range([margin.left, width - margin.right]) .padding(1); // Y axis const y = d3 .scaleLinear() .domain([0, 100]) .range([height - margin.bottom, margin.top]); const xAxis = d3.axisBottom().scale(x2); const yAxis = d3.axisLeft().scale(y); const tooltip = d3 .select("body") .append("div") .style("position", "absolute") .style("z-index", "10") .style("visibility", "hidden") .style("padding", "10px") .style("background", "rgba(255,255,255,0.6)") .style("border-radius", "3px") .style("color", "rgba(100,100,100)") .style("font-family", "sans-serif"); const tooltip2 = d3 .select("body") .append("div") .style("position", "absolute") .style("z-index", "10") .style("visibility", "hidden") .style("padding", "10px") .style("background", "rgba(0,0,0,0.6)") .style("border-radius", "3px") .style("color", "rgb(255,255,255)") .style("font-family", "sans-serif"); svg .append("g") .attr("transform", `translate(0, ${height - margin.bottom})`) .call(xAxis) .attr("font-size", 10); svg .append("g") .attr("transform", `translate(${margin.left}, 0)`) .call(yAxis) .attr("font-size", 7); // Lines const lines1 = svg .selectAll("myline") .data(dataset_p) .join("line") .attr("x1", function (d) { return x(d.id); }) .attr("x2", function (d) { return x(d.id); }) .attr("y1", function (d) { return y(d.ten); }) .attr("y2", function (d) { return y(d.twenty); }) .attr("stroke", "#f9f8f9") .attr("stroke-width", "25px") .on("mouseover", function (e, d, i) { tooltip2 .html( `

${age_range(d.id)}
${d3.format(".1f")( d.ten - d.twenty )}%低下

` ) .style("visibility", "visible"); }) .on("mousemove", function (e) { tooltip2 .style("top", e.pageY + 10 + "px") .style("left", e.pageX + 10 + "px"); }) .on("mouseout", function () { tooltip2.html(``).style("visibility", "hidden"); }); // Lines const lines = svg .selectAll("myline") .data(dataset_p) .join("line") .attr("x1", function (d) { return x(d.id); }) .attr("x2", function (d) { return x(d.id); }) .attr("y1", function (d) { return y(d.ten); }) .attr("y2", function (d) { return y(d.twenty); }) .attr("stroke", "grey") .attr("stroke-width", "1px"); // Circle2010 const circle = svg .selectAll("mycircle") .data(dataset_p) .join("circle") .attr("cx", function (d) { return x(d.id); }) .attr("cy", function (d) { return y(d.ten); }) .attr("r", "6") .style("fill", d3.schemeSet2[0]) .on("mouseover", function (e, d, i) { tooltip .html( `

${age_range(d.id)}
2010年：${d3.format( ".1f" )(d.ten)}%

${age_range(d.id)}
2020年：${d3.format( ".1f" )(d.twenty)}%

` ) .style("visibility", "visible"); d3.select(this).attr("r", "8"); }) .on("mousemove", function (e) { tooltip .style("top", e.pageY + 10 + "px") .style("left", e.pageX + 10 + "px"); }) .on("mouseout", function () { tooltip.html(``).style("visibility", "hidden"); d3.select(this).attr("r", "6"); }); //ex const circle_ex = svg .append("circle") .attr("cx", 385) .attr("cy", 20) .attr("r", 6) .attr("fill", d3.schemeSet2[0]); svg .append("g") .append("text") .attr("x", 400) .attr("y", 22.5) .attr("font-family", "sans-serif") .attr("font-size", 12) .text("- 2010年"); const circle_ex2 = svg .append("circle") .attr("cx", 385) .attr("cy", 45) .attr("r", 6) .attr("fill", "#BD7CBD"); // svg .append("g") .append("text") .attr("x", 400) .attr("y", 48.5) .attr("font-family", "sans-serif") .attr("font-size", 12) .text("- 2020年"); /* // ツールチップ const tooltip = svg .append("g") .attr("class", "tooltip") .style("pointer-events", "none") .style("visibility", "hidden"); tooltip .append("rect") .attr("fill", "white") .attr("stroke", "none") .attr("width", 120) .attr("height", 50) .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: age_range(datum.id) }, { value: datum.ten - datum.twenty + "％低下" } ]) .join("text") .text((d) => `${d.value}`) .attr("x", 10) .attr("y", (d, i) => 20 + 20 * i) .attr("fill", (d, i) => (i === 0 ? "black" : "gray")) .attr("font-family", "sans-serif") .attr("font-weight", (d, i) => (i === 0 ? "bold" : "normal")) .attr("font-size", 15); tooltip.style("visibility", "visible"); // console.log(event.currentTarget); d3.select(event.currentTarget).attr("fill-opacity", 1); }; const hideMyTooltip = (event) => { tooltip.style("visibility", "hidden"); // console.log(event.currentTarget); d3.select(event.currentTarget).attr("fill-opacity", 0.8); }; lines .on("pointerenter pointermove", showMyTooltip) .on("pointerleave", hideMyTooltip);*/ svg .append("g") .append("text") .attr("x", 10) .attr("y", 50) .attr("font-family", "sans-serif") .attr("font-size", 10) .text("%"); return svg.node(); }33:Tf72,svg_time3 = { const margin = { top: 40, right: 30, bottom: 20, left: 50 }, width = 900, height = 400; const svg = d3.create("svg").attr("width", width).attr("height", height); // 背景 svg .append("rect") .attr("width", width) .attr("height", height) .attr("fill", "#f9f8f9"); d3.csv( "https://docs.google.com/spreadsheets/d/e/2PACX-1vQVwyGbRj3uf_KnwPh2Ir0tWnPx9w56LGiALvkWYzKCr42K2hei2v95zs2Su_8AHeAUCGnjJq2DiE-C/pub?gid=920990089&single=true&output=csv" ).then(function (data) { //サブグループのリスト= csvファイルのヘッダー=ここの土壌状態 const subgroups = data.columns.slice(1); //グループのリスト=ここの種=グループと呼ばれる最初の列の値-> X軸に表示します const groups = data.map((d) => d.tool); const x = d3 .scaleBand() .domain(groups) .range([margin.left, width - margin.right]) .padding([0.2]); svg .append("g") .attr("transform", `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(x).tickSize(0)); const xSubgroup = d3 .scaleBand() .domain(subgroups) .range([0, x.bandwidth()]) .padding([0.05]); const y = d3 .scaleLinear() .domain([0, 300]) .range([height - margin.bottom, margin.top]); svg .append("g") .attr("transform", `translate(${margin.left}, 0)`) .call(d3.axisLeft(y)); // color palette = one color per subgroup const color = d3.scaleOrdinal().domain(subgroups).range(d3.schemeSet2); const age_range = d3 .scaleOrdinal() // 順序尺度のためのスケール関数 .domain([ "teens", "twenties", "thirties", "forties", "fifties", "sixties", "Over70s" ]) // 入力ドメインは、データ内の値の配列 .range(["10代", "20代", "30代", "40代", "50代", "60代", "70代以上"]); //stack the data? --> stack per subgroup const stackedData = d3.stack().keys(subgroups)(data); svg .append("g") .selectAll("g") .data(data) .join("g") .attr("transform", (d) => `translate(${x(d.tool)}, 0)`) .selectAll("rect") .data(function (d) { return subgroups.map(function (key) { return { key: key, value: d[key] }; }); }) .join("rect") .attr("x", (d) => xSubgroup(d.key)) .attr("y", (d) => y(d.value)) .attr("width", xSubgroup.bandwidth()) .attr("height", (d) => y(0) - y(d.value)) .attr("fill", (d) => color(d.key)) .data(stackedData) .attr("class", (d) => "myRect " + d.key) .on("mouseover", function (event, d, i) { const subGroupName = d.key; d3.selectAll(".myRect").style("opacity", 0.2); d3.selectAll("." + subGroupName).style("opacity", 1); }) .on("mouseleave", function (event, d) { d3.selectAll(".myRect").style("opacity", 1); }); //例 const dataset_ex = ["10代", "20代", "30代", "40代", "50代", "60代"]; const color_ex = d3.scaleOrdinal().domain(dataset_ex).range(d3.schemeSet2); svg .append("g") .selectAll("rect") .data(dataset_ex) .join("rect") .attr("fill", (d, i) => color_ex(d)) .attr("stroke", "none") .attr("x", 800) .attr("y", (d, i) => 50 + i * 20) .attr("width", 15) .attr("height", 15); svg .append("g") .selectAll("text") .data(dataset_ex) .join("text") .attr("x", 825) .attr("y", (d, i) => 60 + i * 20) .attr("font-family", "sans-serif") .attr("font-size", 12) .attr("fill", "black") .attr("stroke", "none") .text((d) => d); }); svg .append("g") .append("text") .attr("x", 20) .attr("y", 30) .attr("font-family", "sans-serif") .attr("font-size", 10) .text("分"); return svg.node(); }34:T18f9,svg10 = { const margin = { top: 25, right: 30, bottom: 50, left: 50 }; const width = 460; const height = 400; const svg = d3.create("svg").attr("width", width).attr("height", height); svg .append("rect") .attr("width", width) .attr("height", height) .attr("fill", "#f9f8f9"); const tooltip = d3 .select("body") .append("div") .style("position", "absolute") .style("z-index", "10") .style("visibility", "hidden") .style("padding", "10px") .style("background", "rgba(255,255,255,0.6)") .style("border-radius", "3px") .style("color", "rgba(100,100,100)") .style("font-family", "sans-serif"); d3.csv( "https://docs.google.com/spreadsheets/d/e/2PACX-1vQVwyGbRj3uf_KnwPh2Ir0tWnPx9w56LGiALvkWYzKCr42K2hei2v95zs2Su_8AHeAUCGnjJq2DiE-C/pub?gid=687250033&single=true&output=csv" ).then(function (data) { const x2 = d3 .scaleLinear() .domain([2010, 2020]) .range([margin.left, width - margin.right]); const x = d3 .scaleBand() .range([margin.left, width - margin.right]) .domain( data.map(function (d) { return d.year; }) ) .padding(1); svg .append("g") .attr("transform", `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(x)); const y = d3 .scaleLinear() .domain([0, 100]) .range([height - margin.bottom, margin.top]); svg .append("g") .attr("transform", `translate(${margin.left}, 0)`) .call(d3.axisLeft(y)); // line svg .append("path") .datum(data) .attr("fill", "none") .attr("stroke", "#E7C351") .attr("stroke-width", 1.5) .attr( "d", d3 .line() .x(function (d) { return x(d.year); }) .y(function (d) { return y(d.satisfaction); }) ); svg .append("path") .datum(data) .attr("fill", "none") .attr("stroke", "#69b3a2") .attr("stroke-width", 1.5) .attr( "d", d3 .line() .x(function (d) { return x(d.year); }) .y(function (d) { return y(d.either); }) ); svg .append("path") .datum(data) .attr("fill", "none") .attr("stroke", "#BD7CBD") .attr("stroke-width", 1.5) .attr( "d", d3 .line() .x(function (d) { return x(d.year); }) .y(function (d) { return y(d.complain); }) ); // Circle1 const circle1 = svg .selectAll("mycircle1") .data(data) .join("circle") .attr("cx", function (d) { return x(d.year); }) .attr("cy", function (d) { return y(d.satisfaction); }) .attr("r", "4") .style("fill", "#E7C351") .on("mouseover", function (e, d, i) { tooltip .html( `

${d.year}年
${d.satisfaction}%

${d.year}年
${d.either}%

${d.year}年
${d.complain}%

` ) .style("visibility", "visible"); d3.select(this).attr("r", "7"); }) .on("mousemove", function (e) { tooltip .style("top", e.pageY + 10 + "px") .style("left", e.pageX + 10 + "px"); }) .on("mouseout", function () { tooltip.html(``).style("visibility", "hidden"); d3.select(this).attr("r", "4"); }); }); //ex const circle_ex = svg .append("circle") .attr("cx", 340) .attr("cy", 25) .attr("r", 4) .attr("fill", "#E7C351"); const circle_ex2 = svg .append("circle") .attr("cx", 340) .attr("cy", 45) .attr("r", 4) .attr("fill", "#69b3a2"); const circle_ex3 = svg .append("circle") .attr("cx", 340) .attr("cy", 65) .attr("r", 4) .attr("fill", "#BD7CBD"); //例 const dataset_ex = ["- 満足している", "- どちらでもない", "- 不満である"]; svg .append("g") .selectAll("text") .data(dataset_ex) .join("text") .attr("x", 350) .attr("y", (d, i) => 28.5 + i * 20) .attr("font-family", "sans-serif") .attr("font-size", 11) .attr("fill", "black") .attr("stroke", "none") .text((d) => d); svg .append("g") .append("text") .attr("x", 10) .attr("y", 30) .attr("font-family", "sans-serif") .attr("font-size", 10) .text("%"); svg .append("g") .append("text") .attr("x", 425) .attr("y", 370) .attr("font-family", "sans-serif") .attr("font-size", 10) .text("年"); return svg.node(); }35:T2ae9,svg777 = { const margin = { top: 50, right: 50, bottom: 50, left: 10 }; const width_all = 1000; const width_net = 350; const width_news = 550; const width_nhk = 750; const width_tv = 950; const width_ex = 10; const height = 500; const svg = d3.create("svg").attr("width", width_all).attr("height", height); svg //背景 .append("rect") .attr("width", width_all) .attr("height", height) .attr("fill", "#f9f8f9"); const age_range = d3 .scaleOrdinal() // 順序尺度のためのスケール関数 .domain([ "eightnineteen", "twenties", "thirties", "forties", "fifties", "sixties", "Over70s" ]) // 入力ドメインは、データ内の値の配列 .range(["18~19歳", "20代", "30代", "40代", "50代", "60代", "70代以上"]); d3.csv( "https://docs.google.com/spreadsheets/d/e/2PACX-1vQVwyGbRj3uf_KnwPh2Ir0tWnPx9w56LGiALvkWYzKCr42K2hei2v95zs2Su_8AHeAUCGnjJq2DiE-C/pub?gid=1517778703&single=true&output=csv" ).then(function (data) { const color = d3 .scaleOrdinal() .domain([ "eightnineteen", "twenties", "thirties", "forties", "fifties", "sixties", "over70s" ]) .range(d3.schemeSet2); const dimensions = ["newspaper1", "newspaper2"]; const dimensions_net = ["net1", "net2"]; const dimensions_nhk = ["nhk1", "nhk2"]; const dimensions_tv = ["tv1", "tv2"]; const dimensions_ex = ["ex1", "ex2"]; const dimensions_al = ["情報源", "信頼度"]; const y = {}; for (var i in dimensions) { var name = dimensions[i]; y[name] = d3 .scaleLinear() .domain([0, 100]) .range([height - margin.bottom, margin.top]); } const y_net = {}; for (var i in dimensions_net) { var name_net = dimensions_net[i]; y_net[name_net] = d3 .scaleLinear() .domain([0, 100]) .range([height - margin.bottom, margin.top]); } const y_nhk = {}; for (var i in dimensions_nhk) { var name_nhk = dimensions_nhk[i]; y_nhk[name_nhk] = d3 .scaleLinear() .domain([0, 100]) .range([height - margin.bottom, margin.top]); } const y_tv = {}; for (var i in dimensions_tv) { var name_tv = dimensions_tv[i]; y_tv[name_tv] = d3 .scaleLinear() .domain([0, 100]) .range([height - margin.bottom, margin.top]); } const y_ex = {}; for (var i in dimensions_ex) { var name_ex = dimensions_ex[i]; y_ex[name_ex] = d3 .scaleLinear() .domain([0, 100]) .range([height - margin.bottom, margin.top]); } const x = d3 .scalePoint() .range([width_net + margin.left, width_news - margin.right]) .domain(dimensions); const x_net = d3 .scalePoint() .range([margin.left + 150, width_net - margin.right]) .domain(dimensions_net); const x_nhk = d3 .scalePoint() .range([width_news + margin.left, width_nhk - margin.right]) .domain(dimensions_nhk); const x_tv = d3 .scalePoint() .range([width_nhk + margin.left, width_tv - margin.right]) .domain(dimensions_tv); const x_ex = d3 .scalePoint() .range([width_ex + margin.left, 100]) .domain(dimensions_ex); // Highlight the specie that is hovered const highlight = function (event, d) { const selected_specie = d.id; // first every group turns grey d3.selectAll(".line") .transition() .duration(200) .style("stroke", "lightgrey") .style("opacity", "0.2"); d3.selectAll("." + selected_specie) .transition() .duration(200) .style("stroke", color(selected_specie)) .style("opacity", "1"); }; // Unhighlight const doNotHighlight = function (event, d) { d3.selectAll(".line") .transition() .duration(200) .delay(1000) .style("stroke", function (d) { return color(d.id); }) .style("opacity", "1"); }; // path関数は、csvの行を入力として受け取り、このraw用に描画する線のx座標とy座標を返す function path(d) { return d3.line()( dimensions.map(function (p) { return [x(p), y[p](d[p])]; }) ); } function path_net(d) { return d3.line()( dimensions_net.map(function (p) { return [x_net(p), y_net[p](d[p])]; }) ); } function path_nhk(d) { return d3.line()( dimensions_nhk.map(function (p) { return [x_nhk(p), y_nhk[p](d[p])]; }) ); } function path_tv(d) { return d3.line()( dimensions_tv.map(function (p) { return [x_tv(p), y_tv[p](d[p])]; }) ); } function path_ex(d) { return d3.line()( dimensions_ex.map(function (p) { return [x_ex(p), y_ex[p](d[p])]; }) ); } // lines svg .selectAll("myPath") .data(data) .join("path") .attr("class", function (d) { return "line " + d.id; }) .attr("d", path) .style("fill", "none") .style("stroke", function (d) { return color(d.id); }) .style("opacity", 1) .on("mouseover", highlight) .on("mouseleave", doNotHighlight) .attr("stroke-width", 2); svg //net .selectAll("myPath2") .data(data) .join("path") .attr("class", function (d) { return "line " + d.id; }) .attr("d", path_net) .style("fill", "none") .style("stroke", function (d) { return color(d.id); }) .style("opacity", 1) .attr("stroke-width", 2) .on("mouseover", highlight) .on("mouseleave", doNotHighlight); svg //nhk .selectAll("myPath3") .data(data) .join("path") .attr("class", function (d) { return "line " + d.id; }) .attr("d", path_nhk) .style("fill", "none") .style("stroke", function (d) { return color(d.id); }) .style("opacity", 1) .attr("stroke-width", 2) .on("mouseover", highlight) .on("mouseleave", doNotHighlight); svg //tv .selectAll("myPath4") .data(data) .join("path") .attr("class", function (d) { return "line " + d.id; }) .attr("d", path_tv) .style("fill", "none") .style("stroke", function (d) { return color(d.id); }) .style("opacity", 1) .attr("stroke-width", 2) .on("mouseover", highlight) .on("mouseleave", doNotHighlight); svg //ex .selectAll("myPath5") .data(data) .join("path") .attr("class", function (d) { return "line " + d.id; }) .attr("d", path_ex) .style("fill", "none") .style("stroke", function (d) { return color(d.id); }) .style("opacity", 1) .attr("stroke-width", 5) .on("mouseover", highlight) .on("mouseleave", doNotHighlight); // Draw the axis: svg .selectAll("myAxis") .data(dimensions) .enter() .append("g") .attr("class", "axis") // この要素をx軸上の正しい位置に変換 .attr("transform", function (d) { return `translate(${x(d)})`; }) .each(function (d) { if (d == "newspaper2") { d3.select(this).call(d3.axisRight().ticks(10).scale(y[d])); } else { d3.select(this).call(d3.axisLeft().ticks(10).scale(y[d])); } }) .append("text") .style("text-anchor", "middle") .data(dimensions_al) .attr("y", margin.top - 10) .text(function (d) { return d; }) .style("fill", "black"); svg //net .selectAll("myAxis2") .data(dimensions_net) .enter() .append("g") .attr("class", "axis") .attr("transform", function (d) { return `translate(${x_net(d)})`; }) .each(function (d) { if (d == "net2") { d3.select(this).call(d3.axisRight().ticks(10).scale(y_net[d])); } else { d3.select(this).call(d3.axisLeft().ticks(10).scale(y_net[d])); } }) .append("text") .style("text-anchor", "middle") .data(dimensions_al) .attr("y", margin.top - 10) .text(function (d) { return d; }) .style("fill", "black"); svg //nhk .selectAll("myAxis3") .data(dimensions_nhk) .enter() .append("g") .attr("class", "axis") .attr("transform", function (d) { return `translate(${x_nhk(d)})`; }) .each(function (d) { if (d == "nhk2") { d3.select(this).call(d3.axisRight().ticks(10).scale(y_nhk[d])); } else { d3.select(this).call(d3.axisLeft().ticks(10).scale(y_nhk[d])); } }) .append("text") .style("text-anchor", "middle") .attr("y", margin.top - 10) .data(dimensions_al) .text(function (d) { return d; }) .style("fill", "black"); svg //tv .selectAll("myAxis4") .data(dimensions_tv) .enter() .append("g") .attr("class", "axis") .attr("transform", function (d) { return `translate(${x_tv(d)})`; }) .each(function (d) { if (d == "tv2") { d3.select(this).call(d3.axisRight().ticks(10).scale(y_tv[d])); } else { d3.select(this).call(d3.axisLeft().ticks(10).scale(y_tv[d])); } }) .append("text") .style("text-anchor", "middle") .attr("y", margin.top - 10) .data(dimensions_al) .text(function (d) { return d; }) .style("fill", "black"); }); //例 const dataset_media = [ "インターネット", "　　新聞　　 ", "　NHKテレビ　", "　民放テレビ　" ]; const dataset_ex = [ "18~19歳", "20代", "30代", "40代", "50代", "60代", "70代以上" ]; const color_ex = d3.scaleOrdinal().domain(dataset_ex).range(d3.schemeSet2); svg .append("g") .selectAll("text") .data(dataset_ex) .join("text") .attr("x", 20) .attr("y", (d, i) => 45 + i * 40) .attr("font-family", "sans-serif") .attr("font-size", 12) .attr("fill", "black") .attr("stroke", "none") .text((d) => d); svg .append("g") .selectAll("text") .data(dataset_media) .join("text") .attr("x", (d, i) => 195 + i * 200) .attr("y", height - 30) .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("font-weight", "bold") .text((d) => d); svg .append("g") .append("text") .attr("x", 120) .attr("y", 50) .attr("font-family", "sans-serif") .attr("font-size", 10) .text("%"); return svg.node(); }36:[{"id":"891ca810785fc9dd823f1d0c84b9107a9f514939081a8c0111b909d5b5538d15e3949f63ee7b7b385ba1e0ec50088285b3f0f5aacf6d35816f1874c0e1db2057","href":"https://static.observableusercontent.com/files/891ca810785fc9dd823f1d0c84b9107a9f514939081a8c0111b909d5b5538d15e3949f63ee7b7b385ba1e0ec50088285b3f0f5aacf6d35816f1874c0e1db2057","name":"スクリーンショット 2021-12-16 13.10.31.png","type":"image/png","lastModified":1639627855080.309,"size":78578},{"id":"d1ca4bd5da7ed1dd67a38b9e6c2253d50a4549001b0dc517f69a0e5f93d8e14fdf04c0bd21eef0eeedb3cb68d102a498dee290024e0afef42bcd25aef79e47a2","href":"https://static.observableusercontent.com/files/d1ca4bd5da7ed1dd67a38b9e6c2253d50a4549001b0dc517f69a0e5f93d8e14fdf04c0bd21eef0eeedb3cb68d102a498dee290024e0afef42bcd25aef79e47a2","name":"スクリーンショット 2021-12-16 13.52.56.png","type":"image/png","lastModified":1639630390883.334,"size":127856},{"id":"e63279cd2c69bd1043c32decee62d78f3943e4cbfe20a19a07c93fbf985e25c477831079b180414a8de6aac452550984428981786027ee0e08b495f12ecdf0dd","href":"https://static.observableusercontent.com/files/e63279cd2c69bd1043c32decee62d78f3943e4cbfe20a19a07c93fbf985e25c477831079b180414a8de6aac452550984428981786027ee0e08b495f12ecdf0dd","name":"スクリーンショット 2021-12-16 13.50.54.png","type":"image/png","lastModified":1639630270616.222,"size":95210},{"id":"3368551b1721a540f2d3bb7e4741816b599c6f9ac6368f39c0b1c5c37bcea2a12f8e168b22c9378e83869868e9b1e60f9de1ce12839904c95af4d4cac9683fba","href":"https://static.observableusercontent.com/files/3368551b1721a540f2d3bb7e4741816b599c6f9ac6368f39c0b1c5c37bcea2a12f8e168b22c9378e83869868e9b1e60f9de1ce12839904c95af4d4cac9683fba","name":"スクリーンショット 2021-12-16 13.49.55.png","type":"image/png","lastModified":1639630210631.148,"size":79005},{"id":"1c1892b645a43203c3fd4265373a4e4b76b0887ca501c9d6841e78c77686e3e2203840a6ea93f0bca16581e20a42811c5c09947c4e6dad8b31224e4bb3ce01a0","href":"https://static.observableusercontent.com/files/1c1892b645a43203c3fd4265373a4e4b76b0887ca501c9d6841e78c77686e3e2203840a6ea93f0bca16581e20a42811c5c09947c4e6dad8b31224e4bb3ce01a0","name":"スクリーンショット 2021-12-16 13.11.43.png","type":"image/png","lastModified":1639630101021.412,"size":157058},{"id":"ba8743a1365d387240c841c8ea67dff62dcfb300b6228746f47db17531dafb77ffef3a9a1145b2e5e2aaee840117ba84671df5fbc688292e23f22d964ed1d491","href":"https://static.observableusercontent.com/files/ba8743a1365d387240c841c8ea67dff62dcfb300b6228746f47db17531dafb77ffef3a9a1145b2e5e2aaee840117ba84671df5fbc688292e23f22d964ed1d491","name":"スクリーンショット 2022-01-04 23.46.31.png","type":"image/png","lastModified":1641307606232.642,"size":285470}] 2f:{"title":"なぜ人々の新聞離れは止まらないのか？","cells":[{"id":0,"value":"

なぜ人々の新聞離れは止まらないのか？

","pinned":false,"hidden":false,"mode":"html"},{"id":1480,"value":"

\n - さまざまなデータビジュアライゼーションから読みとく新聞と読者の現状 -
\n

","pinned":false,"hidden":false,"mode":"html"},{"id":4405,"value":"

「新聞を読みなさい。」

\nこれは私の父の口癖。父は毎日新聞を読んでいる。
\n一方大学3年生の私は、新聞など1日も読まない。読み始めたことも過去にあるが、三日坊主で終わった。
\nテレビのみならずインターネットが普及している現在、新聞など開かなくても毎日毎日ニュースは流れてくる。しかし、なぜこのように言われるのだろう。
\n
\nそもそも、世の中に新聞を読んでいる人はどれほどいるのだろう...。\n

","pinned":false,"hidden":false,"mode":"html"},{"id":4636,"value":"

\n 止まらない新聞離れ\n

","pinned":false,"hidden":false,"mode":"html"},{"id":4699,"value":"

・新聞の発行部数と世帯数の推移

","pinned":false,"hidden":false,"mode":"md"},{"id":1805,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"

データ元　一般社団法人日本新聞協会　新聞の発行部数と世帯数の推移　　https://www.pressnet.or.jp/data/circulation/circulation01.php

","pinned":false,"hidden":false,"mode":"md"},{"id":4839,"value":"

\nまず新聞の発行部数に着目した。
\n年々世帯数は増えているにもかかわらず、新聞の発行部数は年々減少している。
\n世帯数がここ20年ほどで約1000万世帯増えているのに対し、発行部数は約2000万部も減少している。
\nそれだけ読まない世帯が増えているのだろう。\n

","pinned":false,"hidden":false,"mode":"html"},{"id":4648,"value":"

\n そんな中、新聞を読んでいるのは？\n

","pinned":false,"hidden":false,"mode":"html"},{"id":4418,"value":"

\n人々の新聞離れが進んでいることは分かったが、逆に現在も読み続けているのは誰なのだろう？
\n私の父のような50代の人が多いのだろうか。30代のような若い働く世代も読んでいるのだろうか？\n

","pinned":false,"hidden":false,"mode":"html"},{"id":4730,"value":"

・年代別　月ぎめで新聞をとっている人の割合

","pinned":false,"hidden":false,"mode":"md"},{"id":3634,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":807,"value":"

データ元　\n公益財団法人新聞通信調査会　第 13 回メディアに関する全国世論調査(２０２０年)　p.30　https://www.chosakai.gr.jp/wp/wp-content/themes/shinbun/asset/pdf/project/notification/yoron2020hokoku.pdf

","pinned":false,"hidden":false,"mode":"md"},{"id":4426,"value":"

\n2020年から10年前の2010年、どの年代も60％以上の人が新聞を購読していることがわかる。
\n（18〜19歳は、個人ではなく家族単位で購入している可能性がある）
\n今も10年前も、20代や30代が他の年代に比べ、購買率が低いのは変わらず、30代に至っては購買率は30％ほどに下がってしまっている。
\n一方、50代以上はいまだに半数以上が購読している。
\nみんなが新聞を購読しなくなっている訳ではないと分かったが、10年前と比べ、多くの世代の購買率が大きく減少している。\n

","pinned":false,"hidden":false,"mode":"html"},{"id":4656,"value":"

\n 新聞を読まない理由は？\n

","pinned":false,"hidden":false,"mode":"html"},{"id":4448,"value":"

\n発行部数からも年代購買率からもわかるように、新聞離れは年々進んでおり、これからも進んでいくことが予想される。\nしかし、なぜこんなにも新聞離れが進んでしまったのだろう。\n

","pinned":false,"hidden":false,"mode":"html"},{"id":5382,"value":"

・月ぎめで新聞をとらない理由

","pinned":false,"hidden":false,"mode":"html"},{"id":5828,"value":"table2 = {\n var names = d3table.keys(dataset_reason[0]);\n const table = d3table.create(\"table\");\n\n table\n .append(\"thead\")\n .join(\"tr\")\n .selectAll(\"th\")\n .data(names)\n .join(\"th\")\n .text((d) => d)\n .style(\"background-color\", \"#f9f8f9\") // セルの背景色\n .style(\"color\", \"black\"); // 文字の色\n\n table\n .append(\"tbody\")\n .selectAll(\"tr\")\n .data(dataset_reason)\n .join(\"tr\")\n .selectAll(\"td\")\n .data((row) => d3table.entries(row))\n .join(\"td\")\n .text((d) => d.value);\n\n return table.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4472,"value":"

（2020年　メディアに関する全国世論調査 https://www.chosakai.gr.jp/wp/wp-content/themes/shinbun/asset/pdf/project/notification/yoron2020hokoku.pdf\n図23-1）

","pinned":false,"hidden":false,"mode":"md"},{"id":596,"value":"

3位　29.9％　「新聞を読む時間がないから」

","pinned":false,"hidden":false,"mode":"md"},{"id":1176,"value":"

・年代別　主なメディアの利用時間

","pinned":false,"hidden":false,"mode":"md"},{"id":5618,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":705,"value":"

データ元　総務省令和２年度情報通信メディアの利用時間と情報行動に関する調査　[平日]主なメディアの平均利用時間（全年代・年代別）　p.8　https://www.soumu.go.jp/main_content/000765258.pdf

","pinned":false,"hidden":false,"mode":"md"},{"id":4505,"value":"

\n 10～30代の若い世代は、それ以上の世代に比べ、特にインターネット利用に時間を割いている。\nこれを見ると読む時間がないというより、読める時間を他に割いてると言った方がいいかもしれない。\n

","pinned":false,"hidden":false,"mode":"html"},{"id":4510,"value":"

1位　74.0％「テレビやインターネットなど他の情報で十分だから」

2位　37.9％「新聞の購読料は高いから」

\n今は多くの人がスマートフォンやテレビを持っている時代。知りたいと思ったことの大抵は調べられる。日々のニュースも目にしようとしなくても、流れてくる。
\nそれに対して、新聞はお金を払って初めて見れるコンテンツである。
\n新聞の月間購読料は約4000円であるが、他で知れる情報で十分だから、4000円払ってまで新聞を読みたいと思えないということか。
\nもし新聞が無料だったらみんな読むのだろうか。私は親が購読料を払っているので、実質無料で新聞を読むことができる。しかし読んでいない。
\nこの「購読料が高いから」と答えた37.9%の人たちはもし無料だったら読むのだろうか。\n

","pinned":false,"hidden":false,"mode":"html"},{"id":4752,"value":"

\n 新聞の満足度\n

","pinned":false,"hidden":false,"mode":"html"},{"id":4433,"value":"

\n 新聞を読んでいない私には、そこにどんな有益な情報が載っているのか、どんな価値があるのかよく分からない。
\nそこで人々が新聞の中身に対してどのように思っているのかを調べた。\n

","pinned":false,"hidden":false,"mode":"md"},{"id":4989,"value":"

・新聞の満足度

","pinned":false,"hidden":false,"mode":"html"},{"id":4373,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":5456,"value":"

データ元　公益財団法人新聞通信調査会　第 13 回メディアに関する全国世論調査(２０２０年)　 p.37　https://www.chosakai.gr.jp/wp/wp-content/themes/shinbun/asset/pdf/project/notification/yoron2020hokoku.pdf\n

","pinned":false,"hidden":false,"mode":"md"},{"id":5029,"value":"

\n内容に対して、不満を抱いている人は10年前も今も変わらず少ない。
\nしかし「満足している」人は、年々減っていき、「どちらでもない」人は年々増えており、「満足している」人を超えそうな勢いである。
\nなぜそうなってしまったのか。新聞の中身が年々満足できないものになっていっているのだろうか。\n

","pinned":false,"hidden":false,"mode":"html"},{"id":4667,"value":"

\n 人々の情報源と信頼度\n

","pinned":false,"hidden":false,"mode":"html"},{"id":4515,"value":"

\n私の情報源は主にテレビやインタネットである。
\n先ほどのアンケートの1位「テレビやインターネットなど他の情報で十分だから」という人が多かったように、テレビやインターネットを情報源としている人は多いだろう。
\n果たして新聞は人々の情報源としてどれくらいの立ち位置にいるのだろうか。
\nまた人々は自分の情報源にどれほど信頼を抱いているだろうか。\n

","pinned":false,"hidden":false,"mode":"html"},{"id":3697,"value":"

・「情報源として欠かせない」「信頼できると答えた人」の割合

","pinned":false,"hidden":false,"mode":"md"},{"id":4222,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":5536,"value":"

データ元　公益財団法人新聞通信調査会　第 13 回メディアに関する全国世論調査(２０２０年)　 p.6　https://www.chosakai.gr.jp/wp/wp-content/themes/shinbun/asset/pdf/project/notification/yoron2020hokoku.pdf\n

","pinned":false,"hidden":false,"mode":"md"},{"id":4033,"value":"

情報源として欠かせないが、信頼はできない。

\nインターネットが情報源として欠かせないと多くの10代〜40代が答えているが、信頼している人はそれに比べとても少ない。
\nそもそもインターネットを信頼できる人はとても少ないようだ。
\n一方新聞は、購読率が低い層（10代〜30代）は新聞への信頼度は高いとは言えないが、購読率が高い60代以降はまずまずの信頼度である。
\nテレビについては、NHKテレビが新聞と同じくらいの信頼度を得ているが、民放テレビの信頼度は高いとは言えない。
\n
\nまた10代〜30代若い世代の信頼度は、どの情報源も信頼度が50％に満たっていない。インターネットよりも、新聞など他の情報源の方が「信用できる」答えている人が多いにも関わらず、「情報源として欠かせない」の割合ではインターネットが圧勝している。\n「情報源として欠かせないか」と「信頼できるかどうか」は比例しないらしい。\n

","pinned":false,"hidden":false,"mode":"html"},{"id":4848,"value":"

\n 最後に\n

","pinned":false,"hidden":false,"mode":"html"},{"id":5104,"value":"

\n新聞を読む人は年々減っている。
\nちなみに私は今日も読んでいない。明日になって読むかは分からない。今後も読むかは分からない。
\n「新聞を読みなさい。」とまた言われるのだろう。
\n
\nなぜ人々の新聞離れは止まらないのか？
\n理由は様々だが、大きな理由の一つとして他の情報メディアの存在が挙げられるだろう。\n

\n世の中には新聞以外にも様々な情報メディアがあり、私たちにたくさんの情報をくれる。
\nそのたくさんの情報の中でどの情報が真実で、それが嘘かなど見分けるのは難しい。
\nだからこそ信頼できることがいいこととも、信頼できないことが悪いこととも言えない。
\nしかし多くの若い世代が信頼できる情報を得られていない、得た情報を信用できていない現状があるようだ。
\nたくさんの情報源の中で、どれが信頼できるかできないか見極めるためには、もしかしたらどれか一つの情報源に偏ったりせず、どの情報も自分の目でしっかり確認することが重要で、その一つとして新聞を読むことも必要であるのかもしれない。\n

","pinned":false,"hidden":false,"mode":"html"},{"id":240,"value":"***","pinned":false,"hidden":false,"mode":"md"},{"id":5114,"value":"
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
","pinned":false,"hidden":false,"mode":"md"},{"id":2666,"value":"以下データ","pinned":false,"hidden":false,"mode":"md"},{"id":274,"value":"url = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vQVwyGbRj3uf_KnwPh2Ir0tWnPx9w56LGiALvkWYzKCr42K2hei2v95zs2Su_8AHeAUCGnjJq2DiE-C/pub?gid=1665697190&single=true&output=tsv\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":338,"value":"d3.tsv(url)","pinned":false,"hidden":false,"mode":"ojs"},{"id":281,"value":"dataset = d3.tsv(url, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3262,"value":"時間","pinned":false,"hidden":false,"mode":"md"},{"id":697,"value":"url_time = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vQVwyGbRj3uf_KnwPh2Ir0tWnPx9w56LGiALvkWYzKCr42K2hei2v95zs2Su_8AHeAUCGnjJq2DiE-C/pub?gid=920990089&single=true&output=tsv\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":700,"value":"d3.tsv(url_time)","pinned":false,"hidden":false,"mode":"ojs"},{"id":702,"value":"dataset_time = d3.tsv(url_time, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3181,"value":"年代購買率","pinned":false,"hidden":false,"mode":"md"},{"id":557,"value":"url_era = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vQVwyGbRj3uf_KnwPh2Ir0tWnPx9w56LGiALvkWYzKCr42K2hei2v95zs2Su_8AHeAUCGnjJq2DiE-C/pub?gid=1764051028&single=true&output=tsv\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":562,"value":"d3.tsv(url_era)","pinned":false,"hidden":false,"mode":"ojs"},{"id":566,"value":"dataset_era = d3.tsv(url_era, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1672,"value":"url_p = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vQVwyGbRj3uf_KnwPh2Ir0tWnPx9w56LGiALvkWYzKCr42K2hei2v95zs2Su_8AHeAUCGnjJq2DiE-C/pub?gid=1359542175&single=true&output=tsv\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1680,"value":"d3.tsv(url_p)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1683,"value":"dataset_p = d3.tsv(url_p, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2757,"value":"人口","pinned":false,"hidden":false,"mode":"md"},{"id":830,"value":"url_population = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vQVwyGbRj3uf_KnwPh2Ir0tWnPx9w56LGiALvkWYzKCr42K2hei2v95zs2Su_8AHeAUCGnjJq2DiE-C/pub?gid=2016456133&single=true&output=tsv\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":836,"value":"d3.tsv(url_population)","pinned":false,"hidden":false,"mode":"ojs"},{"id":840,"value":"dataset_population = d3.tsv(url_population, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2675,"value":"都道府県別","pinned":false,"hidden":false,"mode":"md"},{"id":1061,"value":"url_place = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vQVwyGbRj3uf_KnwPh2Ir0tWnPx9w56LGiALvkWYzKCr42K2hei2v95zs2Su_8AHeAUCGnjJq2DiE-C/pub?gid=1656339830&single=true&output=tsv\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1064,"value":"d3.tsv(url_place)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1066,"value":"dataset_place = d3.tsv(url_place, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1049,"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"},{"id":3777,"value":"「情報源として欠かせない」とした人の割合","pinned":false,"hidden":false,"mode":"md"},{"id":3701,"value":"url_ab = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vQVwyGbRj3uf_KnwPh2Ir0tWnPx9w56LGiALvkWYzKCr42K2hei2v95zs2Su_8AHeAUCGnjJq2DiE-C/pub?gid=1407800181&single=true&output=tsv\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3704,"value":"d3.tsv(url_ab)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3707,"value":"dataset_ab = d3.tsv(url_ab, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3856,"value":"「情報が信頼できる」とした人の割合","pinned":false,"hidden":false,"mode":"md"},{"id":3684,"value":"url_tr = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vQVwyGbRj3uf_KnwPh2Ir0tWnPx9w56LGiALvkWYzKCr42K2hei2v95zs2Su_8AHeAUCGnjJq2DiE-C/pub?gid=618179505&single=true&output=tsv\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3688,"value":"d3.tsv(url_tr)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3691,"value":"dataset_tr = d3.tsv(url_tr, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4789,"value":"url_reason = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vQVwyGbRj3uf_KnwPh2Ir0tWnPx9w56LGiALvkWYzKCr42K2hei2v95zs2Su_8AHeAUCGnjJq2DiE-C/pub?gid=2012120398&single=true&output=tsv\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":4792,"value":"d3.tsv(url_reason)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4796,"value":"dataset_reason = d3.tsv(url_reason, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":5835,"value":"d3table = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"Theme\n- 「データジャーナリスト」になったつもりで、多くの人びとの関心をひくテーマを設定する。\n- 社会について問題に感じていること。\n- 自分自身が疑問や痛みを感じていること。","pinned":false,"hidden":false,"mode":"md"},{"id":12,"value":"Storytelling\n- 問いと事実を丁寧に解説する。\n- 事実は、調べて判明したことを明らかにする。\n- データを見やすく整理して表現する。\n- 読者が意味を解釈できるようにする。\n- 一方的な解釈・意見を押しつけないように注意。","pinned":false,"hidden":false,"mode":"md"},{"id":144,"value":"スクレイピング\nhttps://docs.google.com/spreadsheets/d/1iXkq65WmRaxxwq26YLMUZ57PxpEctfCXTFk9lwumCbM/edit#gid=0","pinned":false,"hidden":false,"mode":"md"},{"id":3412,"value":"色見本　https://www.colordic.org","pinned":false,"hidden":false,"mode":"md"},{"id":1382,"value":"###### hsl色見本 https://www.peko-step.com/tool/hslrgb.html","pinned":false,"hidden":false,"mode":"md"}],"files":"$W36","stdlib":"1","titling":"auto"}

なぜ人々の新聞離れは止まらないのか？

「新聞を読みなさい。」

\n 止まらない新聞離れ\n

・新聞の発行部数と世帯数の推移

データ元 一般社団法人 日本新聞協会 新聞の発行部数と世帯数の推移 https://www.pressnet.or.jp/data/circulation/circulation01.php

\n そんな中、新聞を読んでいるのは？\n

・年代別 月ぎめで新聞をとっている人の割合

データ元 \n公益財団法人 新聞通信調査会 第 13 回メディアに関する全国世論調査(２０２０年) p.30 https://www.chosakai.gr.jp/wp/wp-content/themes/shinbun/asset/pdf/project/notification/yoron2020hokoku.pdf