29:null 2a:["$","title",null,{"children":"from City to Airport | Samuel YAN | Observable"}] 2f:Ta0f,map = { const svg = d3.create("svg").attr("viewBox", [0, 0, 800, 680]); const path = d3.geoPath(); svg .append("g") .append("rect") .attr("width", width) .attr("height", height) .attr("fill", "#eafaff"); svg .selectAll("path") .data(topojson.feature(japan, japan.objects.prefectures).features) .join("path") .attr("stroke", "#000") .attr("stroke-width", 0.25) .attr("d", path) .data(rows) .attr("fill", (d) => color(d.num)); // main airport const airport = svg .append("g") .selectAll("circle") .data(dataset_airport) .join("circle") .attr("cx", (d) => d.x) .attr("cy", (d) => d.y) .attr("r", 4) .attr("fill", "orange") .attr("fill-opacity", 1) .attr("stroke", "black") .attr("stroke-width", 0.5) .attr("stroke-opacity", 1); // ツールチップ const tooltip = svg .append("g") .attr("class", "tooltip") .style("pointer-events", "none") .style("visibility", "hidden"); tooltip .append("rect") .attr("fill", "#ffe066") .attr("stroke", "black") .attr("stroke-weight", 2) .attr("width", 120) .attr("height", 74) .attr("opacity", 1); const showMyTooltip = (event) => { const mouseX = d3.pointer(event)[0] + 10; const mouseY = d3.pointer(event)[1] + 10; const datum = d3.select(event.target).datum(); tooltip.attr("transform", `translate(${mouseX},${mouseY})`); tooltip .selectAll("text") .data([ { label: "空港名", value: datum.shortName }, { label: "開港", value: datum.Open }, { label: "所在地", value: datum.ken }, { label: "滑走路本数", value: datum.airstrips }, { label: "敷地面積/ha", value: datum.Area } ]) .join("text") .text((d) => `${d.label}: ${d.value}`) .attr("x", 10) .attr("y", (d, i) => 15 + 12 * i) .attr("font-size", 10) .attr("fill", (d, i) => (i === 0 ? "#001f99" : "black")) .attr("font-weight", (d, i) => (i === 0 ? "bold" : "normal")); tooltip.style("visibility", "visible"); d3.select(event.currentTarget) .attr("fill", "red") .attr("fill-opacity", 0.75) .attr("r", (d) => d.Area / 50); }; const hideMyTooltip = (event) => { tooltip.style("visibility", "hidden"); d3.select(event.currentTarget) .attr("fill", "orange") .attr("fill-opacity", 1) .attr("r", 4); }; airport .on("pointerenter pointermove", showMyTooltip) .on("pointerleave", hideMyTooltip); return svg.node(); }30:Tcfe,bar_distance = { const width = 1000; const height = 600; const margin = { top: 80, right: 160, bottom: 20, left: 140 }; const xScale = d3 .scaleLinear() .domain([0, 70]) .range([margin.left, width - margin.right]); const yScale = d3 .scaleLinear() .domain([1, d3.max(dataset_airport, (d) => d.Number)]) .range([margin.top, height - margin.bottom]); // 軸関数 const xAxis = d3.axisTop(xScale).ticks(10); const yAxis = d3.axisLeft(yScale).ticks(28); // ticks、目盛りの数を調整 const svg = d3.create("svg").attr("width", width).attr("height", height); svg .append("g") .append("rect") .attr("width", width) .attr("height", height) .attr("fill", "#eafaff"); const gradient = svg //.append("g") .append("svg:defs") .append("svg:linearGradient") .attr("id", "gradient") .attr("x1", "0%") .attr("y1", "0%") .attr("x2", "100%") .attr("y2", "0%"); gradient .append("svg:stop") .attr("offset", "0%") .attr("stop-color", "#66e0ff") .attr("stop-opacity", 1); gradient .append("svg:stop") .attr("offset", "100%") .attr("stop-color", "#ffe066") .attr("stop-opacity", 1); const rect = svg .append("g") .selectAll("rect") .data(dataset_airport) .join("rect") .attr("x", margin.left) .attr("y", (d) => yScale(d.Number) - 6) .attr("width", width - margin.left - margin.right) .attr("height", 12) .attr("stroke-opacity", 0) .attr("fill", "url(#gradient)"); svg .append("g") .selectAll("rect") .data(dataset_airport) .join("rect") .attr("x", (d) => xScale(d.Distance)) .attr("y", (d) => yScale(d.Number) - 6) .attr("width", width) .attr("height", 12) .attr("stroke", "#eafaff") .attr("fill", "#eafaff"); svg .append("g") .selectAll("text") .data(dataset_airport) .join("text") .attr("x", margin.left - 5) .attr("y", (d) => yScale(d.Number) + 5) .attr("font-family", "sans-serif") .attr("font-weight", "bold") .attr("font-size", 10) .attr("fill", "gary") .attr("text-anchor", "end") .text((d) => d.Station + " (" + d.MainCity + ")"); svg .append("g") .selectAll("text") .data(dataset_airport) .join("text") .attr("x", (d) => xScale(d.Distance) - 5) .attr("y", (d) => yScale(d.Number) + 4) .attr("font-family", "sans-serif") .attr("font-weight", "bold") .attr("font-size", 10) .attr("fill", "gary") .attr("text-anchor", "end") .text((d) => d.Distance); svg .append("g") .selectAll("text") .data(dataset_airport) .join("text") .attr("x", (d) => xScale(d.Distance) + 5) .attr("y", (d) => yScale(d.Number) + 4) .attr("font-family", "sans-serif") .attr("font-weight", "bold") .attr("font-size", 10) .attr("fill", "gary") .attr("text-anchor", "begin") .text((d) => d.shortName); svg .append("g") .selectAll("rect") .data(dataset_airport) .join("rect") .attr("x", margin.left) .attr("y", 36 + 15) .attr("width", width - margin.left - margin.right) .attr("height", 8) .attr("fill", "url(#gradient)"); svg .append("g") .attr("transform", `translate(0, ${margin.top - 22})`) .call(xAxis); return svg.node(); }31:T1e97,bar_time = { const width = 1000; const height = 600; const margin = { top: 80, right: 160, bottom: 20, left: 140 }; // const distance = d3.group(dataset, (d) => d.Distance); if (transportation == "自動車automobile") { const xScale = d3 .scaleLinear() .domain([0, 70]) .range([margin.left, width - margin.right]); const yScale = d3 .scaleLinear() .domain([1, d3.max(dataset_airport, (d) => d.Number)]) .range([margin.top, height - margin.bottom]); // 軸関数 const xAxis = d3.axisTop(xScale).ticks(10); const yAxis = d3.axisLeft(yScale).ticks(28); // ticks、目盛りの数を調整 const svg = d3.create("svg").attr("width", width).attr("height", height); svg .append("g") .append("rect") .attr("width", width) .attr("height", height) .attr("fill", "#eafaff"); const gradient = svg //.append("g") .append("svg:defs") .append("svg:linearGradient") .attr("id", "gradient") .attr("x1", "0%") .attr("y1", "0%") .attr("x2", "100%") .attr("y2", "0%"); gradient .append("svg:stop") .attr("offset", "0%") .attr("stop-color", "#66e0ff") .attr("stop-opacity", 1); gradient .append("svg:stop") .attr("offset", "100%") .attr("stop-color", "#ffe066") .attr("stop-opacity", 1); const rect = svg .append("g") .selectAll("rect") .data(dataset_airport) .join("rect") .attr("x", margin.left) .attr("y", (d) => yScale(d.Number) - 5) .attr("width", width - margin.left - margin.right) .attr("height", 11) .attr("stroke-opacity", 0) .attr("fill", "url(#gradient)"); // svg .append("g") .selectAll("rect") .data(dataset_airport) .join("rect") .attr("x", margin.left) .attr("y", (d) => yScale(d.Number) - 11) .attr("width", width - margin.left - margin.right) .attr("height", 5) .attr("stroke-opacity", 0) .attr("fill-opacity", 0.2) .attr("fill", "gray"); svg .append("g") .selectAll("rect") .data(dataset_airport) .join("rect") .attr("x", (d) => xScale(d.car_min)) .attr("y", (d) => yScale(d.Number) - 5) .attr("width", width) .attr("height", 11) .attr("stroke", "#eafaff") .attr("stroke-weight", 0.1) .attr("fill", "#eafaff"); svg .append("g") .selectAll("rect") .data(dataset_airport) .join("rect") .attr("x", (d) => xScale(d.Distance)) .attr("y", (d) => yScale(d.Number) - 11) .attr("width", width) .attr("height", 5) .attr("stroke", "#eafaff") .attr("stroke-weight", 0.1) .attr("fill", "#eafaff"); svg .append("g") .selectAll("text") .data(dataset_airport) .join("text") .attr("x", margin.left - 5) .attr("y", (d) => yScale(d.Number) - 0) .attr("font-family", "sans-serif") .attr("font-weight", "bold") .attr("font-size", 10) .attr("fill", "gary") .attr("text-anchor", "end") .text((d) => d.shortName); svg .append("g") .selectAll("text") .data(dataset_airport) .join("text") .attr("x", (d) => xScale(d.car_min) - 5) .attr("y", (d) => yScale(d.Number) + 3) .attr("font-family", "sans-serif") .attr("font-weight", "bold") .attr("font-size", 8) .attr("fill", "gary") .attr("text-anchor", "end") .text((d) => d.car_min); svg .append("g") .selectAll("rect") .data(dataset_airport) .join("rect") .attr("x", margin.left) .attr("y", 36 + 15) .attr("width", width - margin.left - margin.right) .attr("height", 8) .attr("fill", "url(#gradient)"); svg .append("g") .attr("transform", `translate(0, ${margin.top - 22})`) .call(xAxis); return svg.node(); } else if (transportation == "公共交通機関public transport") { const xScale = d3 .scaleLinear() .domain([0, 70]) .range([margin.left, width - margin.right]); const yScale = d3 .scaleLinear() .domain([1, d3.max(dataset_publicTrans, (d) => d.Number)]) .range([margin.top, height - margin.bottom]); // 軸関数 const xAxis = d3.axisTop(xScale).ticks(10); const yAxis = d3.axisLeft(yScale).ticks(28); // ticks、目盛りの数を調整 const svg = d3.create("svg").attr("width", width).attr("height", height); svg .append("g") .append("rect") .attr("width", width) .attr("height", height) .attr("fill", "#eafaff"); const gradient = svg //.append("g") .append("svg:defs") .append("svg:linearGradient") .attr("id", "gradient") .attr("x1", "0%") .attr("y1", "0%") .attr("x2", "100%") .attr("y2", "0%"); gradient .append("svg:stop") .attr("offset", "0%") .attr("stop-color", "#66e0ff") .attr("stop-opacity", 1); gradient .append("svg:stop") .attr("offset", "100%") .attr("stop-color", "#ffe066") .attr("stop-opacity", 1); const rect = svg .append("g") .selectAll("rect") .data(dataset_publicTrans) .join("rect") .attr("x", margin.left) .attr("y", (d) => yScale(d.Number) - 5) .attr("width", width - margin.left - margin.right) .attr("height", 11) .attr("stroke-opacity", 0) .attr("fill", "url(#gradient)"); // svg .append("g") .selectAll("rect") .data(dataset_publicTrans) .join("rect") .attr("x", margin.left) .attr("y", (d) => yScale(d.Number) - 11) .attr("width", width - margin.left - margin.right) .attr("height", 5) .attr("stroke-opacity", 0) .attr("fill-opacity", 0.2) .attr("fill", "gray"); svg .append("g") .selectAll("rect") .data(dataset_publicTrans) .join("rect") .attr("x", (d) => xScale(d.public_min)) .attr("y", (d) => yScale(d.Number) - 5) .attr("width", width) .attr("height", 11) .attr("stroke", "#eafaff") .attr("stroke-weight", 0.1) .attr("fill", "#eafaff"); svg .append("g") .selectAll("rect") .data(dataset_publicTrans) .join("rect") .attr("x", (d) => xScale(d.Distance)) .attr("y", (d) => yScale(d.Number) - 11) .attr("width", width) .attr("height", 5) .attr("stroke", "#eafaff") .attr("stroke-weight", 0.1) .attr("fill", "#eafaff"); svg .append("g") .selectAll("text") .data(dataset_publicTrans) .join("text") .attr("x", margin.left - 5) .attr("y", (d) => yScale(d.Number) - 0) .attr("font-family", "sans-serif") .attr("font-weight", "bold") .attr("font-size", 10) .attr("fill", "gary") .attr("text-anchor", "end") .text((d) => d.shortName); svg .append("g") .selectAll("text") .data(dataset_publicTrans) .join("text") .attr("x", (d) => xScale(d.public_min) - 5) .attr("y", (d) => yScale(d.Number) + 3) .attr("font-family", "sans-serif") .attr("font-weight", "bold") .attr("font-size", 8) .attr("fill", "gary") .attr("text-anchor", "end") .text((d) => d.public_min); svg .append("g") .selectAll("rect") .data(dataset_publicTrans) .join("rect") .attr("x", margin.left) .attr("y", 36 + 15) .attr("width", width - margin.left - margin.right) .attr("height", 8) .attr("fill", "url(#gradient)"); svg .append("g") .attr("transform", `translate(0, ${margin.top - 22})`) .call(xAxis); return svg.node(); } }32:T2bde,access_tokyo = { const width = 900; const height = 600; const margin = { top: 100, right: 100, bottom: 30, left: 150 }; const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .style("overflow", "visible"); svg .append("g") .append("rect") .attr("width", width) .attr("height", height) .attr("fill", "#eafaff"); const rect_h = svg .append("g") .selectAll("rect") .data(dataset_access_tokyo) .join("rect") .attr("x", margin.left) .attr( "y", (d) => margin.top + (d.start_ny * (height - margin.top - margin.bottom)) / 1613 + 2 ) .attr("width", (width - margin.left - margin.right) / 3) .attr( "height", (d) => (d.time_h * (height - margin.top - margin.bottom)) / 1623 - 4 ) .attr("fill", "#ffe066"); svg .append("g") .selectAll("rect") .data(dataset_access_tokyo) .join("rect") .attr("x", margin.left - 5) .attr( "y", (d) => margin.top + (d.start_ny * (height - margin.top - margin.bottom)) / 1613 + 2 ) .attr("width", 5) .attr("height", 1) .attr("fill", "black"); svg .append("g") .selectAll("text") .data(dataset_access_tokyo) .join("text") .attr("x", margin.left - 10) .attr( "y", (d) => margin.top + (d.start_ny * (height - margin.top - margin.bottom)) / 1613 + 10 ) .attr("font-family", "sans-serif") .attr("font-weight", "bold") .attr("font-size", 12) .attr("fill", "black") .attr("text-anchor", "end") .text((d) => d.time_h); const rect_n = svg .append("g") .selectAll("rect") .data(dataset_access_tokyo) .join("rect") .attr("x", margin.left + (width - margin.left - margin.right) / 3) .attr( "y", (d) => margin.top + (d.start_ny * (height - margin.top - margin.bottom)) / 1613 + 2 ) .attr("width", ((width - margin.left - margin.right) / 3) * 2) .attr( "height", (d) => (d.time_n * (height - margin.top - margin.bottom)) / 1623 - 4 ) .attr("fill", "#ffe066"); svg .append("g") .selectAll("rect") .data(dataset_access_tokyo) .join("rect") .attr("x", width - margin.right) .attr( "y", (d) => margin.top + (d.start_ny * (height - margin.top - margin.bottom)) / 1613 + 2 ) .attr("width", 5) .attr("height", 1) .attr("fill", "black"); svg .append("g") .selectAll("text") .data(dataset_access_tokyo) .join("text") .attr("x", width - margin.right + 10) .attr( "y", (d) => margin.top + (d.start_ny * (height - margin.top - margin.bottom)) / 1613 + 10 ) .attr("font-family", "sans-serif") .attr("font-weight", "bold") .attr("font-size", 12) .attr("fill", "black") .attr("text-anchor", "begin") .text((d) => d.time_n); // legend and other //距離 // 東-羽 svg .append("g") .append("rect") .attr("x", margin.left - 1) .attr("y", margin.top / 2 + 12) .attr("width", width - margin.left - margin.right) .attr("height", 8) .attr("fill", "#ffe066"); svg .append("g") .append("rect") .attr("x", margin.left - 1) .attr("y", margin.top / 2 + 16) .attr("width", width - margin.left - margin.right) .attr("height", 0.5) .attr("stroke", "black"); svg .append("g") .append("text") .attr("x", margin.left + (width - margin.left - margin.right) / 6) .attr("y", margin.top / 2 + 10) .attr("font-family", "sans-serif") .attr("font-weight", "bold") .attr("font-size", 12) .attr("fill", "black") .attr("text-anchor", "middle") .text("17.9 km"); svg .append("g") .append("text") .attr("x", margin.left + ((width - margin.left - margin.right) / 3) * 2) .attr("y", margin.top / 2 + 10) .attr("font-family", "sans-serif") .attr("font-weight", "bold") .attr("font-size", 12) .attr("fill", "black") .attr("text-anchor", "middle") .text("67.7 km"); // 手段 svg .append("g") .append("text") .attr("x", margin.left / 2) .attr("y", margin.top / 2 + 20) .attr("font-family", "sans-serif") .attr("font-weight", "bold") .attr("font-size", 10) .attr("fill", "black") .attr("text-anchor", "end") .text("手段/way"); svg .append("g") .selectAll("rect") .data(dataset_access_tokyo) .join("rect") .attr("x", margin.left / 2) .attr( "y", (d) => margin.top + (d.start_ny * (height - margin.top - margin.bottom)) / 1613 + 2 ) .attr("width", 5) .attr("height", 1) .attr("fill", "black"); svg .append("g") .selectAll("text") .data(dataset_access_tokyo) .join("text") .attr("x", margin.left / 2 - 5) .attr( "y", (d) => margin.top + (d.start_ny * (height - margin.top - margin.bottom)) / 1613 + 10 ) .attr("font-family", "sans-serif") .attr("font-weight", "bold") .attr("font-size", 12) .attr("fill", "black") .attr("text-anchor", "end") .text((d) => d.way); //　羽田空港 svg .append("g") .append("rect") .attr("x", margin.left - 1) .attr("y", margin.top) .attr("width", 2) .attr("height", height - margin.top - margin.bottom) .attr("fill", "#fff") .attr("stroke", "black"); svg .append("g") .append("text") .attr("x", margin.left) .attr("y", margin.top / 2) .attr("font-family", "sans-serif") .attr("font-weight", "bold") .attr("font-size", 12) .attr("fill", "black") .attr("text-anchor", "middle") .text("羽田空港"); svg .append("g") .append("text") .attr("x", margin.left - 10) .attr("y", margin.top / 2 + 20) .attr("font-family", "sans-serif") .attr("font-weight", "bold") .attr("font-size", 10) .attr("fill", "black") .attr("text-anchor", "end") .text("時間/min"); svg .append("g") .append("rect") .attr("x", margin.left - 1) .attr("y", margin.top / 2 + 10) .attr("width", 2) .attr("height", 12) .attr("fill", "#fff") .attr("stroke", "black"); // 東京駅 svg .append("g") .append("rect") .attr("x", margin.left + (width - margin.left - margin.right) / 3 - 1) .attr("y", margin.top) .attr("width", 2) .attr("height", height - margin.top - margin.bottom) .attr("fill", "#fff") .attr("fill-opacity", 0.5) .attr("stroke", "black"); svg .append("g") .append("text") .attr("x", margin.left + (width - margin.left - margin.right) / 3) .attr("y", margin.top / 2) .attr("font-family", "sans-serif") .attr("font-weight", "bold") .attr("font-size", 12) .attr("fill", "black") .attr("text-anchor", "middle") .text("東京駅"); svg .append("g") .append("rect") .attr("x", margin.left + (width - margin.left - margin.right) / 3 - 1) .attr("y", margin.top / 2 + 10) .attr("width", 2) .attr("height", 12) .attr("fill", "#fff") .attr("stroke", "black"); // 成田空港 svg .append("g") .append("rect") .attr("x", width - margin.right - 1) .attr("y", margin.top) .attr("width", 2) .attr("height", height - margin.top - margin.bottom) .attr("fill", "#fff") .attr("stroke", "black"); svg .append("g") .append("text") .attr("x", width - margin.right) .attr("y", margin.top / 2) .attr("font-family", "sans-serif") .attr("font-weight", "bold") .attr("font-size", 12) .attr("fill", "black") .attr("text-anchor", "middle") .text("成田空港"); svg .append("g") .append("rect") .attr("x", width - margin.right - 1) .attr("y", margin.top / 2 + 10) .attr("width", 2) .attr("height", 12) .attr("fill", "#fff") .attr("stroke", "black"); svg .append("g") .append("text") .attr("x", width - margin.right + 10) .attr("y", margin.top / 2 + 20) .attr("font-family", "sans-serif") .attr("font-weight", "bold") .attr("font-size", 10) .attr("fill", "black") .attr("text-anchor", "begin") .text("時間/min"); // ツールチップ_h const tooltip_h = svg .append("g") .attr("class", "tooltip_h") .style("pointer-events", "none") .style("visibility", "hidden"); tooltip_h .append("g") .append("rect") .attr("fill", "white") .attr("stroke", "black") .attr("width", 120) .attr("height", 40); const showMyTooltip = (event) => { const mouseX = d3.pointer(event)[0] - 30; const mouseY = d3.pointer(event)[1] - 60; const datum = d3.select(event.target).datum(); tooltip_h.attr("transform", `translate(${mouseX},${mouseY})`); tooltip_h .selectAll("text") .data([ { label: "手段", value: datum.tool_h }, { label: "時間", value: datum.time_h }, { label: "料金", value: datum.money_h } ]) .join("text") .text((d) => `${d.label}: ${d.value}`) .attr("x", 5) .attr("y", (d, i) => 12 + 12 * i) .attr("fill", (d, i) => (i === 0 ? "orenge" : "black")) .attr("font-weight", (d, i) => (i === 0 ? "bold" : "normal")) .attr("font-size", 10); tooltip_h.style("visibility", "visible"); d3.select(event.currentTarget).attr("fill", "#66e0ff"); }; const hideMyTooltip = (event) => { tooltip_h.style("visibility", "hidden"); d3.select(event.currentTarget).attr("fill", "#ffe066"); }; rect_h .on("pointerenter pointermove", showMyTooltip) .on("pointerleave", hideMyTooltip); // ツールチップ_n const tooltip_n = svg .append("g") .attr("class", "tooltip_n") .style("pointer-events", "none") .style("visibility", "hidden"); tooltip_n .append("g") .append("rect") .attr("fill", "white") .attr("stroke", "black") .attr("width", 160) .attr("height", 40); const showMyTooltip2 = (event) => { const mouseX = d3.pointer(event)[0] - 30; const mouseY = d3.pointer(event)[1] - 60; const datum = d3.select(event.target).datum(); tooltip_n.attr("transform", `translate(${mouseX},${mouseY})`); tooltip_n .selectAll("text") .data([ { label: "手段", value: datum.tool_n }, { label: "時間", value: datum.time_n }, { label: "料金", value: datum.money_n } ]) .join("text") .text((d) => `${d.label}: ${d.value}`) .attr("x", 5) .attr("y", (d, i) => 12 + 12 * i) .attr("fill", (d, i) => (i === 0 ? "orenge" : "black")) .attr("font-weight", (d, i) => (i === 0 ? "bold" : "normal")) .attr("font-size", 10); tooltip_n.style("visibility", "visible"); d3.select(event.currentTarget).attr("fill", "#66e0ff"); }; const hideMyTooltip2 = (event) => { tooltip_n.style("visibility", "hidden"); d3.select(event.currentTarget).attr("fill", "#ffe066"); }; rect_n .on("pointerenter pointermove", showMyTooltip2) .on("pointerleave", hideMyTooltip2); return svg.node(); }33:T2d32,access_osaka = { const width = 900; const height = 600; const margin = { top: 100, right: 100, bottom: 30, left: 150 }; const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .style("overflow", "visible"); svg .append("g") .append("rect") .attr("width", width) .attr("height", height) .attr("fill", "#eafaff"); const rect_i = svg .append("g") .selectAll("rect") .data(dataset_access_osaka) .join("rect") .attr("x", margin.left) .attr( "y", (d) => margin.top + (d.start_ky * (height - margin.top - margin.bottom)) / 563 + 2 ) .attr("width", (width - margin.left - margin.right) / 4) .attr( "height", (d) => (d.time_i * (height - margin.top - margin.bottom)) / 563 - 4 ) .attr("fill", "#ffe066"); svg .append("g") .selectAll("rect") .data(dataset_access_osaka) .join("rect") .attr("x", margin.left - 5) .attr( "y", (d) => margin.top + (d.start_ky * (height - margin.top - margin.bottom)) / 563 + 2 ) .attr("width", 5) .attr("height", 1) .attr("fill", "black"); svg .append("g") .selectAll("text") .data(dataset_access_osaka) .join("text") .attr("x", margin.left - 10) .attr( "y", (d) => margin.top + (d.start_ky * (height - margin.top - margin.bottom)) / 563 + 10 ) .attr("font-family", "sans-serif") .attr("font-weight", "bold") .attr("font-size", 12) .attr("fill", "black") .attr("text-anchor", "end") .text((d) => d.time_i); const rect_k = svg .append("g") .selectAll("rect") .data(dataset_access_osaka) .join("rect") .attr("x", margin.left + (width - margin.left - margin.right) / 4) .attr( "y", (d) => margin.top + (d.start_ky * (height - margin.top - margin.bottom)) / 563 + 2 ) .attr("width", ((width - margin.left - margin.right) / 4) * 3) .attr( "height", (d) => (d.time_k * (height - margin.top - margin.bottom)) / 563 - 4 ) .attr("fill", "#ffe066"); // blue cover svg .append("g") .selectAll("rect") .data(dataset_access_osaka) .join("rect") .attr("x", margin.left + (width - margin.left - margin.right) / 4) .attr("y", 359 + 2) .attr("width", ((width - margin.left - margin.right) / 4) * 3) .attr("height", 220 - 4) .attr("fill", "#eafaff"); svg .append("g") .selectAll("rect") .data(dataset_access_osaka) .join("rect") .attr("x", width - margin.right) .attr( "y", (d) => margin.top + (d.start_ky * (height - margin.top - margin.bottom)) / 563 + 2 ) .attr("width", 5) .attr("height", 1) .attr("fill", "black"); svg .append("g") .selectAll("text") .data(dataset_access_osaka) .join("text") .attr("x", width - margin.right + 10) .attr( "y", (d) => margin.top + (d.start_ky * (height - margin.top - margin.bottom)) / 563 + 10 ) .attr("font-family", "sans-serif") .attr("font-weight", "bold") .attr("font-size", 12) .attr("fill", "black") .attr("text-anchor", "begin") .text((d) => d.time_k_show); // legend and other //距離 // 大阪-伊丹 svg .append("g") .append("rect") .attr("x", margin.left - 1) .attr("y", margin.top / 2 + 12) .attr("width", width - margin.left - margin.right) .attr("height", 8) .attr("fill", "#ffe066"); svg .append("g") .append("rect") .attr("x", margin.left - 1) .attr("y", margin.top / 2 + 16) .attr("width", width - margin.left - margin.right) .attr("height", 0.5) .attr("stroke", "black"); svg .append("g") .append("text") .attr("x", margin.left + (width - margin.left - margin.right) / 8) .attr("y", margin.top / 2 + 10) .attr("font-family", "sans-serif") .attr("font-weight", "bold") .attr("font-size", 12) .attr("fill", "black") .attr("text-anchor", "middle") .text("13.6 km"); svg .append("g") .append("text") .attr("x", margin.left + ((width - margin.left - margin.right) / 8) * 5) .attr("y", margin.top / 2 + 10) .attr("font-family", "sans-serif") .attr("font-weight", "bold") .attr("font-size", 12) .attr("fill", "black") .attr("text-anchor", "middle") .text("47.1 km"); // 手段 svg .append("g") .append("text") .attr("x", margin.left / 2) .attr("y", margin.top / 2 + 20) .attr("font-family", "sans-serif") .attr("font-weight", "bold") .attr("font-size", 10) .attr("fill", "black") .attr("text-anchor", "end") .text("手段/way"); svg .append("g") .selectAll("rect") .data(dataset_access_osaka) .join("rect") .attr("x", margin.left / 2) .attr( "y", (d) => margin.top + (d.start_ky * (height - margin.top - margin.bottom)) / 563 + 2 ) .attr("width", 5) .attr("height", 1) .attr("fill", "black"); svg .append("g") .selectAll("text") .data(dataset_access_osaka) .join("text") .attr("x", margin.left / 2 - 5) .attr( "y", (d) => margin.top + (d.start_ky * (height - margin.top - margin.bottom)) / 563 + 10 ) .attr("font-family", "sans-serif") .attr("font-weight", "bold") .attr("font-size", 12) .attr("fill", "black") .attr("text-anchor", "end") .text((d) => d.way); //　伊丹空港 svg .append("g") .append("rect") .attr("x", margin.left - 1) .attr("y", margin.top) .attr("width", 2) .attr("height", height - margin.top - margin.bottom) .attr("fill", "#fff") .attr("stroke", "black"); svg .append("g") .append("text") .attr("x", margin.left) .attr("y", margin.top / 2) .attr("font-family", "sans-serif") .attr("font-weight", "bold") .attr("font-size", 12) .attr("fill", "black") .attr("text-anchor", "middle") .text("伊丹空港"); svg .append("g") .append("text") .attr("x", margin.left - 10) .attr("y", margin.top / 2 + 20) .attr("font-family", "sans-serif") .attr("font-weight", "bold") .attr("font-size", 10) .attr("fill", "black") .attr("text-anchor", "end") .text("時間/min"); svg .append("g") .append("rect") .attr("x", margin.left - 1) .attr("y", margin.top / 2 + 10) .attr("width", 2) .attr("height", 12) .attr("fill", "#fff") .attr("stroke", "black"); // 大阪駅 svg .append("g") .append("rect") .attr("x", margin.left + (width - margin.left - margin.right) / 4 - 1) .attr("y", margin.top) .attr("width", 2) .attr("height", height - margin.top - margin.bottom) .attr("fill", "#fff") .attr("fill-opacity", 0.5) .attr("stroke", "black"); svg .append("g") .append("text") .attr("x", margin.left + (width - margin.left - margin.right) / 4) .attr("y", margin.top / 2) .attr("font-family", "sans-serif") .attr("font-weight", "bold") .attr("font-size", 12) .attr("fill", "black") .attr("text-anchor", "middle") .text("大阪駅"); svg .append("g") .append("rect") .attr("x", margin.left + (width - margin.left - margin.right) / 4 - 1) .attr("y", margin.top / 2 + 10) .attr("width", 2) .attr("height", 12) .attr("fill", "#fff") .attr("stroke", "black"); // 関西空港 svg .append("g") .append("rect") .attr("x", width - margin.right - 1) .attr("y", margin.top) .attr("width", 2) .attr("height", height - margin.top - margin.bottom) .attr("fill", "#fff") .attr("stroke", "black"); svg .append("g") .append("text") .attr("x", width - margin.right) .attr("y", margin.top / 2) .attr("font-family", "sans-serif") .attr("font-weight", "bold") .attr("font-size", 12) .attr("fill", "black") .attr("text-anchor", "middle") .text("関西空港"); svg .append("g") .append("rect") .attr("x", width - margin.right - 1) .attr("y", margin.top / 2 + 10) .attr("width", 2) .attr("height", 12) .attr("fill", "#fff") .attr("stroke", "black"); svg .append("g") .append("text") .attr("x", width - margin.right + 10) .attr("y", margin.top / 2 + 20) .attr("font-family", "sans-serif") .attr("font-weight", "bold") .attr("font-size", 10) .attr("fill", "black") .attr("text-anchor", "begin") .text("時間/min"); // ツールチップ_h const tooltip_i = svg .append("g") .attr("class", "tooltip_i") .style("pointer-events", "none") .style("visibility", "hidden"); tooltip_i .append("g") .append("rect") .attr("fill", "white") .attr("stroke", "black") .attr("width", 120) .attr("height", 40); const showMyTooltip = (event) => { const mouseX = d3.pointer(event)[0] - 30; const mouseY = d3.pointer(event)[1] - 60; const datum = d3.select(event.target).datum(); tooltip_i.attr("transform", `translate(${mouseX},${mouseY})`); tooltip_i .selectAll("text") .data([ { label: "手段", value: datum.tool_i }, { label: "時間", value: datum.time_i }, { label: "料金", value: datum.money_i } ]) .join("text") .text((d) => `${d.label}: ${d.value}`) .attr("x", 5) .attr("y", (d, i) => 12 + 12 * i) .attr("fill", (d, i) => (i === 0 ? "orenge" : "black")) .attr("font-weight", (d, i) => (i === 0 ? "bold" : "normal")) .attr("font-size", 10); tooltip_i.style("visibility", "visible"); d3.select(event.currentTarget).attr("fill", "#66e0ff"); }; const hideMyTooltip = (event) => { tooltip_i.style("visibility", "hidden"); d3.select(event.currentTarget).attr("fill", "#ffe066"); }; rect_i .on("pointerenter pointermove", showMyTooltip) .on("pointerleave", hideMyTooltip); // ツールチップ_k const tooltip_k = svg .append("g") .attr("class", "tooltip_k") .style("pointer-events", "none") .style("visibility", "hidden"); tooltip_k .append("g") .append("rect") .attr("fill", "white") .attr("stroke", "black") .attr("width", 160) .attr("height", 40); const showMyTooltip2 = (event) => { const mouseX = d3.pointer(event)[0] - 30; const mouseY = d3.pointer(event)[1] - 60; const datum = d3.select(event.target).datum(); tooltip_k.attr("transform", `translate(${mouseX},${mouseY})`); tooltip_k .selectAll("text") .data([ { label: "手段", value: datum.tool_k }, { label: "時間", value: datum.time_k_show }, { label: "料金", value: datum.money_k } ]) .join("text") .text((d) => `${d.label}: ${d.value}`) .attr("x", 5) .attr("y", (d, i) => 12 + 12 * i) .attr("fill", (d, i) => (i === 0 ? "orenge" : "black")) .attr("font-weight", (d, i) => (i === 0 ? "bold" : "normal")) .attr("font-size", 10); tooltip_k.style("visibility", "visible"); d3.select(event.currentTarget).attr("fill", "#66e0ff"); }; const hideMyTooltip2 = (event) => { tooltip_k.style("visibility", "hidden"); d3.select(event.currentTarget).attr("fill", "#ffe066"); }; rect_k .on("pointerenter pointermove", showMyTooltip2) .on("pointerleave", hideMyTooltip2); return svg.node(); }34:T53c,legend = { const svg = d3.select(map); const g = svg.append("g").classed("legend", true); // 凡例を追加 g.selectAll("rect.legend") .data(color.domain()) .enter() .append("rect") .attr("class", "legend") .attr("x", 65) .attr("y", function (d, i) { return 50 + 20 * i; }) .attr("width", 20) .attr("height", 20) .attr("fill", function (d) { return color(d); }) .attr("stroke", "#000") .attr("stroke-width", 0.25); g.selectAll("text.legend") .data(color.domain()) .enter() .append("text") .attr("x", 60) .attr("y", function (d, i) { return 50 + 20 * i + 12; }) .attr("font-size", 9) .attr("text-anchor", "end") .text(function (d) { return d; }); g.selectAll("circle.legend") .data(color.domain()) .enter() .append("circle") .attr("class", "legend") .attr("cx", 57) .attr("cy", 40) .attr("r", 3) .attr("fill", "orange") .attr("fill-opacity", 1) .attr("stroke", "black") .attr("stroke-width", 0.5) .attr("stroke-opacity", 1); g.selectAll("text.legend") .data(color.domain()) .enter() .append("text") .attr("x", 65) .attr("y", 44) .attr("font-size", 10) .attr("text-anchor", "begin") .text("拠点空港"); return g.node(); }35:[{"id":"bf79be41bdc19afd99f7d754184915e51602d9de613f0d5600b32c4481f67280a4c07f088d542160d72fa36cef5d05b0f75e710117fb5265fbbf4964a36dc1fa","href":"https://static.observableusercontent.com/files/bf79be41bdc19afd99f7d754184915e51602d9de613f0d5600b32c4481f67280a4c07f088d542160d72fa36cef5d05b0f75e710117fb5265fbbf4964a36dc1fa","name":"Artboard 1-144x.png","type":"image/png","lastModified":1641526529723.766,"size":53615},{"id":"b7b12b93d703bf6313d979e4fe1cbc2d3f4ca9c8ea461d5cc3e48a0b36ed99e2c257cdc0661bc34fe92729774b4d5b10006bd311d6e5160cf4d84b6ee4601e1c","href":"https://static.observableusercontent.com/files/b7b12b93d703bf6313d979e4fe1cbc2d3f4ca9c8ea461d5cc3e48a0b36ed99e2c257cdc0661bc34fe92729774b4d5b10006bd311d6e5160cf4d84b6ee4601e1c","name":"Artboard 1 copy 2-144x.png","type":"image/png","lastModified":1643243973649.681,"size":95399},{"id":"6056b889babf6d442232d55d7fa9f831933a5983acc6c8c5c56323ac74d2cecc23f642ff460f6eca3bd21301e4ed6a4a30a081c3002e6d2fd9a4fe7b89c186b4","href":"https://static.observableusercontent.com/files/6056b889babf6d442232d55d7fa9f831933a5983acc6c8c5c56323ac74d2cecc23f642ff460f6eca3bd21301e4ed6a4a30a081c3002e6d2fd9a4fe7b89c186b4","name":"Artboard 1 copy-144x.png","type":"image/png","lastModified":1641530910867.47,"size":114513}] 2d:{"id":"205a90bc149b076d","slug":"from-city-to-airport","title":"from City to Airport","thumbnail":"de2f29e8f58f2e6288e9b3525b99b57514119a56a69fc8285813dd1463c00fa2","access_level":"public","create_time":"$D2021-12-16T00:49:38.468Z","update_time":"$D2022-01-28T04:50:34.157Z","view_time":null,"first_public_time":"$D2021-12-16T00:51:36.513Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"964ed82bb138f4c5","login":"samuelyan0924","name":"Samuel YAN","avatar_url":"https://avatars-next.observableusercontent.com/95cc95fc71fed318a94938c811f0e77664ae3ad94f859ccd9fd32aeeb68bb9ee","tier":"starter_2024"},"version":1840,"publish_version":1840,"role":null,"authored":false,"authors":[{"type":"individual","id":"20742c85f78977d1","login":"samuelyan0924","name":"Samuel YAN","avatar_url":"https://avatars-next.observableusercontent.com/95cc95fc71fed318a94938c811f0e77664ae3ad94f859ccd9fd32aeeb68bb9ee","tier":null}],"members":[{"type":"individual","id":"20742c85f78977d1","login":"samuelyan0924","name":"Samuel YAN","avatar_url":"https://avatars-next.observableusercontent.com/95cc95fc71fed318a94938c811f0e77664ae3ad94f859ccd9fd32aeeb68bb9ee","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"from City to Airport","cells":[{"id":1666,"value":"# from City to Airport","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1515,"value":"FileAttachment(\"Artboard 1-144x.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1521,"value":"FileAttachment(\"Artboard 1 copy-144x.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1524,"value":"##### 　空港といえば、皆さんにどんなイメージを持っていますか。飛行機？旅行？遠い？高い？もしくは、密？コロナ？私には、「遠い」とか、「行くとき結構時間かかる」などのイメージです。\n##### 　日本の空港は、主要都市中心部からどれくらいの距離があるのか\n##### 　その問題を持って、この記事を読み続けて下さい。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1796,"value":"bannerTitleTwoLine(\n \"世界ベスト空港2019\",\n \"World’s Best Airport in 2019\",\n \"#66e0ff\",\n \"white\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1808,"value":"FileAttachment(\"Artboard 1 copy 2-144x.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1530,"value":"##### 　「世界ベスト空港2019（World’s Best Airport in 2019）」により、総合ランキングで、2位は羽田空港、6位は中部国際空港、9位は成田国際空港が入り、トップ10に3空港がランクインになったことが分かります。日本は「翼の王国」のことがわかりました。\n###### ＊https://www.travelvoice.jp/20190403-128773","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1826,"value":"bannerTitleTwoLine(\n \"日本全国にはどのくらい空港があるのか\",\n \"How many airports in Japan\",\n \"#66e0ff\",\n \"white\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"##### 　国土交通省により、日本全国で空港（ヘリポート・非公共用飛行場除く）の数が合計97だということがわかりました。その中で、拠点空港が28個あります。（下の地図ご覧ください）","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1216,"value":"###### ＊拠点空港：空港法第４条第１項各号に掲げる空港（成田国際空港、東京国際空港、中部国際空港、関西国際空港、大阪国際空港並びに国際航空輸送網又は国内航空輸送網の拠点となる空港）をいう\n###### ＊国土交通省の「空港一覧」：https://www.mlit.go.jp/koku/15_bf_000310.html\n###### ＊Japan Map Data: [Japan Atlas TopoJSON](https://github.com/biskwikman/jpn-atlas) by Dan Henri.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":370,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1538,"value":"##### 　異なる色を用いて、都道府県別の空港の数を表しています。白いのは０です。水色は１です。黄色は１３、１４です。多いのは、北海道（14）と沖縄県（13）です。一方、空港がない府県が意外と、埼玉県、京都府など合計10個あります。地図で見ると、その10個の府県は、全て「三大都市圏」のあたりです。鉄道の発達との関係があると私が考えています。ところで、都市圏から遠いや島が多い都道府県には、空港が多いこともわかりました。北海道14、沖縄県13、鹿児島県8、東京都7、長崎県6です。\n##### 　画面の中のオレンジ色の円を使って、28個の拠点空港を示しています。マクスで円をタッチしたら、円の大きさが変わります。とともに、空港の他の情報（空港名、開港、所在地、滑走路本数、敷地面積）も見えます。その大きさで空港の敷地面積を表します。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1348,"value":"bannerTitleTwoLine(\n \"空港は主要都市中心部から\",\n \"どれくらいの距離があるのか\",\n \"#66e0ff\",\n \"white\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"### 距離\n - ##### ＊都市の電車のターミナル駅から空港まで道路の長さ（NAVITIMEより）","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1683,"value":"##### 　上の図で、28個の拠点空港と主要都市の電車のターミナル駅間の距離をランキングしています。一番遠いのは、東京都の東京駅あら成田国際空港までの67.7キロです。一番近いのは、福岡市の博多駅から福岡空港までの4.5キロです。\n##### 　都市から空港までの距離より、空港を行く時どのくらいの時間がかかるのはさらに知られてほしいかもしてません。自動車や公共交通機関を使ってかかる時間を調べてまとめました。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":280,"value":"### かかる時間\n###### ＊自動車でかかる時間（NAVITIMEより、できるだけ高速道路を使ってかかる一番短い時間）\n###### ＊公共交通機関でかかる時間（GoogleMapより、一番短い時間）","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1718,"value":"viewof transportation = Inputs.radio(\n [\"自動車automobile\", \"公共交通機関public transport\"],\n { value: \"自動車automobile\", label: \"交通機関transportation \" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1705,"value":"##### 　上の図で、「距離」のグラフでのランキング順により、28個の拠点空港名を上から並んでいます。横軸は交通機関でかかる時間です。色は水色から、時間が長ければ長くほど黄色に近づきます。灰色の線は、主要都市から空港までの「距離」です。\n##### 　28個の拠点空港の中で、都市から一番遠いのは成田国際空港です。しかし、自動車でかかる時間として一番長いのは63分の大分空港、公共交通機関でかかる時間として一番長いのは67分の長崎空港です。道路、高速道路、鉄道など、空港の所在の地域が整われた施設とかの関係があると私が考えます。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1765,"value":"##### 　26個の都市（拠点空港の主要都市）の中で、二つの拠点空港があるのは東京と大阪のみです。これから、東京、大阪から隣の二つの空港までの距離と交通機関で行く時かかる時間（料金も含む）を詳しく説明したいです。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1358,"value":"bannerTitleTwoLine(\n \"from Tokyo to Airport\",\n \"東京から空港へ\",\n \"#66e0ff\",\n \"white\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":" - ##### 東京(東京駅)から東京国際(羽田)空港、成田国際空港まで","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1069,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1792,"value":"##### 　上の東京の図をご覧ください。東京駅から二つの空港まで、タクシー、バス、電車など、九つの手段（図の最左）で行く時かかる時間と料金の情報を集まって示しました。簡単に言えば、横軸は距離（km）、縦軸は時間（min）です。黄色の四方形の面積が大きければ大きほど、その手段で空港行く時かかる時間が多いです。マクスで円をタッチしたら、手段、時間、料金などの情報も見えます。マウスで触ってみて下さい。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1374,"value":"bannerTitleTwoLine(\n \"from Osaka to Airport\",\n \"大阪から空港へ\",\n \"#66e0ff\",\n \"white\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1170,"value":" - ##### 大阪(大阪駅)から大阪国際(伊丹)空港、関西国際空港まで","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1178,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1819,"value":"##### 　大阪の図をご覧ください。7つの手段のデータを集まりました。図の右下の部分に気になるかもしれません。関西国際空港は海上の空港ですから、自転車や徒歩で行けないです。\n##### 　では、皆さん、貴方の実家や住んでいる都市でも空港ありますか。お家や都市の中心部からどれくらいの距離がありますか。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1543,"value":"#### END","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1507,"value":"space = {\n const width = 1000;\n const height = 1000;\n\n const svg = d3.create(\"svg\").attr(\"width\", width).attr(\"height\", height);\n\n svg\n .append(\"g\")\n .append(\"rect\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"fill\", \"white\");\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"#### データの整理","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"url = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vS7KGPXQnSV65iV84hx7KZpsqz0i9sbn5FTu2NSRfEfO1iSLh9uCpiyU6MxTDowCNTfuMPaXTZdLarO/pub?output=tsv\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"dataset_airport = d3.tsv(url, d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":891,"value":"#### distance_legend","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":895,"value":"distance_legend = {\n const svg = d3.select(bar_distance);\n const g = svg.append(\"g\").classed(\"distance_legend\", true);\n\n // 凡例を追加\n g.selectAll(\"text.distance_legend\")\n .data(color.domain())\n .enter()\n .append(\"text\")\n .attr(\"x\", 65)\n .attr(\"y\", 44 + 15)\n .attr(\"font-size\", 10)\n .attr(\"text-anchor\", \"begin\")\n .text(\"ターミナル駅\");\n\n g.selectAll(\"text.distance_legend\")\n .data(color.domain())\n .enter()\n .append(\"text\")\n .attr(\"x\", 850)\n .attr(\"y\", 44 + 15)\n .attr(\"font-size\", 10)\n .attr(\"text-anchor\", \"begin\")\n .text(\"空港\");\n\n g.selectAll(\"text.distance_legend\")\n .data(color.domain())\n .enter()\n .append(\"text\")\n .attr(\"x\", width / 2)\n .attr(\"y\", 30)\n .attr(\"font-size\", 12)\n .attr(\"text-anchor\", \"middle\")\n .text(\"距離(km)\");\n\n return g.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1026,"value":"#### carTime_legend","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1030,"value":"car_legend = {\n const svg = d3.select(bar_time);\n const g = svg.append(\"g\").classed(\"car_legend\", true);\n\n // 凡例を追加\n g.selectAll(\"text.car_legend\")\n .data(color.domain())\n .enter()\n .append(\"text\")\n .attr(\"x\", 115)\n .attr(\"y\", 44 + 15)\n .attr(\"font-size\", 10)\n .attr(\"text-anchor\", \"begin\")\n .text(\"空港\");\n\n // g.selectAll(\"text.car_legend\")\n // .data(color.domain())\n // .enter()\n // .append(\"text\")\n // .attr(\"x\", 850)\n // .attr(\"y\", 44 + 15)\n // .attr(\"font-size\", 10)\n // .attr(\"text-anchor\", \"begin\")\n // .text(\"空港\");\n\n g.selectAll(\"text.car_legend\")\n .data(color.domain())\n .enter()\n .append(\"text\")\n .attr(\"x\", width / 2)\n .attr(\"y\", 30)\n .attr(\"font-size\", 12)\n .attr(\"text-anchor\", \"middle\")\n .text(\"かかる時間(min)\");\n\n return g.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1113,"value":"#### Access","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1117,"value":"url_access1 = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vT-MIxcmRpSp5AMlnghIs4H9bZeqMKFl_vOXgR6w27LlaXaEFQgL7cqCkNnoG6Pe_74pXdNiixGcAkP/pub?output=csv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1121,"value":"dataset_access_tokyo = d3.csv(url_access1, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1470,"value":"url_access2 = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vT3VUkd-R4oZgn6YC8M1fwnRn5QVCfbUMJWHwTEGB6VlLjfd1REcYpkxzSpa4uy38OzGXENGku14RIe/pub?output=csv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1473,"value":"dataset_access_osaka = d3.csv(url_access2, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1559,"value":"#### PublicTrans_time/money","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1564,"value":"url_public = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vSlydAhxexotpy3EXUn6Am0Wj7NBekBgxjX5zyTIlfeMJt8YT8F7mTyAuzjTSRHvNPy2lFkfAC7c_hs/pub?gid=0&single=true&output=csv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1567,"value":"dataset_publicTrans = d3.csv(url_public, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":362,"value":"#### 日本地図のデータ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":367,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":378,"value":"height = 780","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":381,"value":"tooltip = d3.select(\"body\").append(\"div\").attr(\"id\", \"tooltip\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":372,"value":"color = d3\n .scaleLinear()\n .domain([0, 1, 2, 3, 6, 7, 8, 13, 14])\n .range([\n \"#ffffff\",\n \"#66e0ff\",\n \"#b3e0ce\",\n \"#b3e0ce\",\n \"#dfe09c\",\n \"#dfe09c\",\n \"#dfe09c\",\n \"#ffe066\",\n \"#ffe066\"\n ])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":375,"value":"projection = d3\n .geoMercator()\n .scale(1500)\n .center([137, 34.5])\n .translate([width / 2, height / 2])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"path = d3.geoPath().projection(projection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"rows = d3.csv(\n \"https://docs.google.com/spreadsheets/d/e/2PACX-1vQHf2PpdVmwsEXCZMF_tE8m4-Z5GQUbhtyJyazbFDzwEf9DfcpAtVFk-Qgnm9YeA9Rs3R3VO8K9ObtU/pub?gid=0&single=true&output=csv\",\n cast\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":543,"value":"japan = d3.json(\"https://unpkg.com/jpn-atlas@1/japan/japan.json\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":546,"value":"japan.objects.prefectures.geometries","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"topojson.feature(japan, japan.objects.prefectures).features","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"value":"cast = (d) => {\n Object.keys(d).forEach((key) => {\n if (!isNaN(+d[key])) d[key] = +d[key];\n });\n return d;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"//d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"topojson = require(\"topojson@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":415,"value":"style = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1309,"value":"bannerTitleTwoLine = (\n title1,\n title2,\n backgroundColor = \"#c8d9dd\",\n textColor = \"#282b2c\",\n pageTitle = title1 + \" \" + title2\n) => {\n const { id, href } = DOM.uid(\"banner\");\n return html`\n

${pageTitle}

\n \n \n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1314,"value":"bannerHeight = 200","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 2e:"$2d:body"