2b:null 2c:["$","title",null,{"children":"bar graph training_201113 | YUIKO SUYAMA | Observable"}] 31:T6dc,{ const dataset = d3.shuffle(d3.range(40, 200, 10)); // [40, 50, .... 190]のシャッフル const width = 400; const height = 100; const svg = d3 .create('svg') .attr('width', width) .attr('height', height); const barPadding = 1; // barの間隔を指定 const rects = svg .selectAll('rect') .data(dataset) .join('rect'); rects .attr('x', (d, i) => i * (width / dataset.length)) .attr('y', d => height - (d / d3.max(dataset)) * height) //dの値がsvgの全体を超えてなければ問題ないが、範囲に収まるように調整する必要がある //datasetの中の最大値を見つけて、それで高さを割ってheightをかける .attr('width', width / dataset.length - barPadding) .attr('height', d => (d / d3.max(dataset)) * height) //.attr('fill', '#800'); .attr('fill', d => `hsl(220, 50%, ${60 - (d / d3.max(dataset)) * 40}%)`);//色の塗り分けは例示のためなので実用には注意 //hsl　色相・再度・輝度 svg .selectAll('text') .data(dataset) .join('text') .attr('x', (d, i) => i * (width / dataset.length) + 2) .attr('y', d => height - (d / d3.max(dataset)) * height + 13) .attr('font-family', 'sans-serif') .attr('font-size', 11) .attr('font-weight', 'bold') .attr('fill', 'white') .attr('text-anchor', 'middle') .attr( 'x', (d, i) => i * (width / dataset.length) + (width / dataset.length - barPadding) / 2 ) .text(d => d); /* 「棒グラフはなかなか奥が深い」このデータにもし5桁とかが入ってきたら棒からはみ出て読めないかも逆に1桁とかだと棒が短すぎて数字が入らない、そう言う場合分けをすべき */ return svg.node(); }32:[] 2f:{"id":"1436fb71bf6905a3","slug":"bar-graph-training_201113","title":"bar graph training_201113","thumbnail":"5b1cb2a4bbcdd9d0808f079f565eaaaa115a37eb1c5f239b57ce70ca191f3b7d","access_level":"public","create_time":"$D2020-11-13T06:13:33.447Z","update_time":"$D2020-11-20T07:00:15.752Z","view_time":null,"first_public_time":"$D2020-11-13T06:45:13.446Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"b930b27208ea05ee","login":"sumikko-mountain","name":"YUIKO SUYAMA","avatar_url":"https://avatars-next.observableusercontent.com/9ea4b3ab49d5846d1a11e11b9b0151c58d47a3d8e35454893036c517d781f81a","tier":"starter_2024"},"version":316,"publish_version":316,"role":null,"authored":false,"authors":[{"type":"individual","id":"751514e4cb4a16bf","login":"sumikko-mountain","name":"YUIKO SUYAMA","avatar_url":"https://avatars-next.observableusercontent.com/9ea4b3ab49d5846d1a11e11b9b0151c58d47a3d8e35454893036c517d781f81a","tier":null}],"members":[{"type":"individual","id":"751514e4cb4a16bf","login":"sumikko-mountain","name":"YUIKO SUYAMA","avatar_url":"https://avatars-next.observableusercontent.com/9ea4b3ab49d5846d1a11e11b9b0151c58d47a3d8e35454893036c517d781f81a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"bar graph training_201113","cells":[{"id":0,"value":"md`# bar graph training_201113\nNetwork exercisesⅡ #7　Introductionof Observavle`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"d3 = require('d3@6')//'と”は区別されないので好きな方を使って良い","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"md`## 前回の復習と補足`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"md`### 棒グラフに背景を追加する`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"md`回避策1　クラスを使う`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"{const dataset = [5, 25, 45, 65, 85, 105, 125, 145, 165, 185, 205, 225, 245, 265, 285, 305];}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"{\n const width = 400;\n const height = 100;\n const svg = d3\n .create('svg')\n .attr('width', width)\n .attr('height', height);\n\n // 背景\n svg\n .append('rect')\n .attr('width', width)\n .attr('height', height)\n .attr('fill', '#004');\n\n const rects = svg\n .selectAll('rect.bar')\n .data(dataset)\n .join('rect')\n .attr('class', 'bar');\n\n rects\n .attr('x', (d, i) => i * 50)\n .attr('y', d => height - d)\n .attr('width', 40)\n .attr('height', d => d)\n .attr('fill', '#8cc');\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"md`回避策2　g（グループ）を使う`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"{\n const width = 400;\n const height = 100;\n const svg = d3\n .create('svg')\n .attr('width', width)\n .attr('height', height);\n\n // 背景\n svg\n .append('rect')\n .attr('width', width)\n .attr('height', height)\n .attr('fill', '#004');\n\n const rects = svg\n .append('g')\n .selectAll('rect')\n .data(dataset)\n .join('rect');\n\n rects\n .attr('x', (d, i) => i * 50)\n .attr('y', d => height - d)\n .attr('width', 40)\n .attr('height', d => d)\n .attr('fill', '#8cc');\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"md`## 棒グラフに汎用性をもたせる`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"//データセットの配列を書き換えてみる\n//shufftleメソッド　引数の中の配列の順番をごちゃごちゃにしている\n//rangeメソッド　等差数列\n{\nd3.rante(100);\nd3.(50,80);//最初の値と最後の値を指定することもできる\nd3.(50,80,2);//等差数列　差が２\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"md`### 練習問題1 ここまでの棒グラフを自分なりにアレンジ`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"md`\nこっちでやって出す `\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"md`### 練習問題2 横向きの棒グラフ`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"md`\n こっちでやって出す `\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"md`## スケール -自動化しよう-`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"md`いろいろいちいち書かずに済まそう\n
スケールと余白を使えるようになろう`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"{\n const scale = d3.scaleLinear();//このscaleには関数素ものが入ってるのであって、変数が入ってる訳じゃない\nscale(2.5); // 2.5 が戻る\nscale.domain([100, 500]);//[]がないとエラーになります\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"{//まとめて書く\nconst scale = d3.scaleLinear()\n .domain([100, 500])\n .range([10, 350]);\nscale(100); // 10 が戻る\nscale(300); // 180 が戻る\nscale(500); // 350 が戻る\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"md`### 棒グラフをスケールする`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"{//Y軸のscale関数 yScaleをつくる\nconst yScale = d3\n .scaleLinear()\n .domain([0, d3.max(dataset)])\n .range([height, 0]);//逆っぽいけど、データの最小値0の場合を一番下にしたいので\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"{//X軸のscale関数 xScaleをつくる bandscale\nconst xScale = d3\n .scaleBand()\n .domain(dataset)\n .range([0, width])//右から左まで\n .padding(0.05);//paddingを指定しないと棒と棒がくっついてしまう棒の幅全体に対して5%感覚を開けてね\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"//棒を生成する\n{\n rects\n .attr('x', xScale)\n .attr('y', yScale)\n .attr('width', xScale.bandwidth())\n .attr('height', d => yScale(0) - yScale(d))\n .attr('fill', d => `hsl(220, 50%, ${60 - (d / d3.max(dataset)) * 40}%)`);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"md`## 余白が欲しい`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"md`凡例とかを記すのに絶対必要だよね\n
marginと言うなのobjectを作ると言う慣例があるよ`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"margin = ({ top: 8, right: 8, bottom: 8, left: 8 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"md`課題2\n こっちでやって出す `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"md`## あと散布図が作れれば大丈夫`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"md`D3の社員の人のをみると完結です\n
あと円グラフ、でも円グラフってあんまり良くないんですよ　この人口の円グラフって役に立ちませんね、項目数の多いもの円グラフにしても比較しづらいので無意味ですね　可視化やってます感に注意です`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"md`課題3\n 提出はしなくて良い、自習用 `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"md`課題4\n こっちでやって出す `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"