32:T1526,svg={ const svg = d3.select(DOM.svg(width,height)) const padding = 40; //leftとbottomのmarginと一致 const g = svg.selectAll("g") .data(dataset) .enter() .append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`) .attr("font-family", "sans-serif") .attr("font-size", "12px"); //道路実延長のグラフ // const linegraph = g.append("path") // .datum(dataset[0]) // .attr("class", "line") // .style("fill", "none") // .style("stroke", "black") // .attr("d", line) // .attr("transform", `translate(2,0)`); // var line = d3.line() // .curve(d3.curveMonotoneX) // .x(function(d,i) { return xScale(i); }) // .y(function(d) { return yScale(d["道路"]); }); const line2 = g.append("line") .attr("x1", function(d,i) { return xScale(i); }) .attr("y1", chartHeight) .attr("x2", function(d,i) { return xScale(i); }) .attr("y2", chartHeight) .attr("stroke","lightgray") .transition().delay(150).duration(2000) .attr("x2", function(d,i) { return xScale(i); }) .attr("y2", function(d) { return yScale(d["道路"]*.35); }); const point = g.append("circle") // サークル .attr("cx", function(d,i) { return xScale(i); }) .attr("cy", chartHeight) .attr("r",0) .attr("fill","white") .attr("stroke","gray") .on('mouseover', function(d) { // マウスオーバー・イベント発生時に実行する関数 d3.select(this).attr('stroke', 'red') park.transition() // 公園の円サイズを更新 .attr('r', +d["公園"]) }) .on('mouseout', function() { // マウスアウト・イベント発生時に実行する関数 d3.select(this).attr('stroke', 'gray') park.transition() // 公園の円サイズを更新（ゼロに） .attr('r', 0) }) .transition().delay(150).duration(2000) .attr("r",5) .attr("cx", function(d,i) { return xScale(i); }) .attr("cy", function(d) { return yScale(d["道路"]*.35); }); //都道府県名表示 const placename = g.append("text") .text(function(d){ return d["都道府県名"]; }) .attr("x", function(d,i) { return xScale(i); }) .attr("y", function(d) { return yScale(d["道路"]*.35+1); }) .attr("font-size", "0px") .attr("writing-mode","tb") .transition().delay(200).duration(2000) .attr("font-size", "8px") .attr("text-anchor", "end"); //公園 const park = g.append("circle") .attr("cx", function(d,i){ return i / chartWidth + 60; }) .attr("cy", chartHeight/2) .attr("r",10) .attr("fill","rgb(169, 221, 162)") .on("mouseover", function(){ d3.select(this) // マウスに重なった要素を選択 .transition().delay(50).duration(1000) .attr("r", function(d) { return chartHeight - yScale(dataset[0]["公園"]*.3); }); }) .on("mouseout", function(){ d3.select(this) // マウスに重なった要素を選択 .transition().delay(50) .attr("r", 0); }); const parkt = g.append("text") .text("Park") .attr("x", function(d,i) { return xScale(i) / chartWidth + 60; }) .attr("y", chartHeight * 0.35) .attr("font-size", "16px") .attr("text-anchor", "middle"); const schoolt = g.append("text") .text("School") .attr("x", 160) .attr("y", chartHeight * 0.35) .attr("font-size", "16px") .attr("text-anchor", "middle"); const libraryt = g.append("text") .text("Library") .attr("x", 280) .attr("y", chartHeight * 0.35) .attr("font-size", "16px") .attr("text-anchor", "middle"); const museumt = g.append("text") .text("Museum") .attr("x", 400) .attr("y", chartHeight * 0.35) .attr("font-size", "16px") .attr("text-anchor", "middle"); // const school = g.append("circle") // .attr("cx", function(d,i){ // return i / chartWidth; // }) // .attr("cy", chartHeight/2) // .attr("r",function(d) { // return chartHeight - yScale(dataset[0]["教育施設"]*.3); // }) // .attr("fill","rgb(169, 21, 150)") // .attr("stroke","green") // .attr("stroke-width",3) // .attr("rx",5) // .attr("ry",5); svg.append("g") .attr("transform", "translate(" + padding + ",10)") .call(yAxis); const name = g.append("text") .text("道路実延長(約/100km)") .attr("transform", "translate(" + padding + ",10)") return svg.node(); }33:[] 31:{"title":"最終課題「まちづくり」","cells":[{"id":0,"value":"md`# 最終課題「まちづくり」`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md `### テーマ「まちづくり」\n\n

地元の街並み（福岡市/佐賀市）\n
\n2Dで表現\n
\n車→交通量\n\tアニメ＞流れる車\n
\n家、マンションの数→世帯(resas)\n
\n人の数→住人\n\tアニメ＞10年毎の増減率色か大きさで表現\n
\n学校の数→学校の大きさで表現\n
\n降水量→太陽の大きさと雲の量\n
\n使用するデータ\n
\n福岡市人口（世帯数）エクセル\nhttp://www.city.fukuoka.lg.jp/soki/tokeichosa/shisei/toukei/jinkou/jinnkousokuhou.html\n
\n福岡市教育委員会エクセル\nhttps://www.city.fukuoka.lg.jp/kyoiku-iinkai/k-seisaku/life/toukei.html\n
\n福岡市交通量推計\nhttp://www.city.fukuoka.lg.jp/koutsu/h29/indexh29.html\n
\n佐賀市人口（世帯数）エクセル\nhttps://www.city.saga.lg.jp/main/46210.html\n
\n佐賀市教育委員会エクセル\nhttps://www.pref.saga.lg.jp/kyouiku/kiji00332608/index.html\n
\n佐賀市交通量調査\nhttps://www.pref.saga.lg.jp/kiji00312649/index.html

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"md `#### 改訂版\n\n

各都道府県の街並みを折れ線グラフと見ることができる\n\n
道路と公共施設の数を見える化\n
使用データ「総務省公共施設状況調経年比較表」\nhttp://www.soumu.go.jp/iken/shisetsu/index.html\n
都道府県名、道路実延長、各公共施設箇所数(2016年10月1日現在)\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"md`## TownChart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"d3=require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":229,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":" dataset =d3.csv(\"https://gist.githubusercontent.com/MIMURAIKUMI/f96b99642bec2e9e70dcf7bcfc77f161/raw/8cb61ce884b3cc9252739c9ec4b12ad6d7e392d4/towngraphy_201902_2.csv\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"md`## Dimensions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"margin = ({\n left: 20,\n bottom: 20,\n right: 60,\n top: 10\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"height = width*.6 ;","pinned":true,"hidden":false,"mode":"ojs"},{"id":125,"value":"chartWidth = width - margin.left - margin.right;","pinned":true,"hidden":false,"mode":"ojs"},{"id":127,"value":"chartHeight = height - margin.top - margin.bottom;","pinned":true,"hidden":false,"mode":"ojs"},{"id":160,"value":"md`## Scales`","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"xScale = d3.scaleLinear()\n .domain([0, d3.max(dataset, function(d, i) { return i; })])\n .range([30, chartWidth]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":164,"value":"yScale = d3.scaleLinear()\n .domain([0, d3.max(dataset, function(d) { return d[\"道路\"]; })])\n .range([chartHeight,20]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":154,"value":"md`## Generators`","pinned":false,"hidden":false,"mode":"ojs"},{"id":443,"value":"xAxis = d3.axisBottom()\n .scale(xScale)\n .ticks(47);","pinned":true,"hidden":false,"mode":"ojs"},{"id":450,"value":"yAxis = d3.axisLeft()\n .scale(yScale)\n .ticks(null);","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}