D3.jsを使ってみたよ
棒グラフ
コード全体
function display(count1, count2) { // グラフのwidth, height const width = window.innerWidth / 3; const height = 400; const axisHeight = 20; const axisWidth = 25; const svg = d3 .select('#count') .append('svg') .attr('width', width) .attr('height', height); const xScale = d3 .scaleBand() .domain(count1.map((d) => d.date)) .range([axisWidth, width - axisWidth]); const yScaleCoun1 = d3 .scaleLinear() .domain([ 0, d3.max(count1, (d) => { return d.count; }), ]) .range([height - axisHeight, axisHeight]); const yScaleCount2 = d3 .scaleLinear() .domain([ 0, d3.max(count2, (d) => { return d.count; }), ]) .range([height - axisHeight, axisHeight]); svg .append('g') .attr('transform', `translate(0,${height - axisHeight})`) .call(d3.axisBottom(xScale)); svg .append('g') .attr('transform', 'translate(' + (width - axisWidth) + ',' + 0 + ')') .call(d3.axisRight(yScaleCount1)); svg .append('g') .attr('transform', 'translate(' + axisHeight + ',' + 0 + ')') .call(d3.axisLeft(yScaleCount2)); svg .selectAll('rect1') .data(count1) .enter() .append('rect') .attr('x', (d, i) => { return xScale(d.date) + xScale.bandwidth() / 3 + xScale.bandwidth() / 6; }) .attr('y', (d) => { return yScaleCount1(d.count); }) .attr('height', (d) => { return height - axisHeight - yScaleCount1(d.count); }) .attr('width', xScale.bandwidth() / 3) .attr('fill', '#66FFFF'); svg .selectAll('rect2') .data(count2) .enter() .append('rect') .attr('x', (d, i) => { return xScale(d.date) + xScale.bandwidth() + xScale.bandwidth() / 6; }) .attr('y', (d) => { return yScaleCount2(d.count); }) .attr('height', (d) => { return height - axisHeight - yScaleCount2(d.count); }) .attr('width', xScale.bandwidth() / 3) .attr('fill', '#FFCC99'); }
引数
function display(count1, count2) { count1 = [ {date: 8月13日, count: 14}, {date: 8月14日, count: 2}, {date: 8月15日, count: 8}, . . . ]
count2も同じ
グラフの大きさの設定
// グラフのwidth, height const width = window.innerWidth / 3; // グラフの幅(下記図の赤) const height = 400; // グラフの高さ(下記図の赤) const axisHeight = 20; // x軸を表示する高さ (図の青) const axisWidth = 25; // y軸を表示する幅 (図の黄色)
svgタグを指定したidに追加
const svg = d3 .select('#count') // id=count を持つタグを選択 .append('svg') // 選択したタグにsvgタグを追加 .attr('width', width) // 追加したsvgタグのwidthとheightを設定 .attr('height', height);
scaleの設定(与えられた値に対して正規化とかをやってくれる)
const xScale = d3 .scaleBand() // 軸の種類の選択(多分) 他にもscaleLinear()などがある .domain(count1.map(d => d.date)) // arrayを渡すとうまく設定してくれ .range([axisWidth, width - axisWidth]); => わかりやすく const scale = d3.scaleLinear().domain([100, 500]).range([10, 350]); // 正規化をうまくしてくれる ex scale(100); // 10 が戻る scale(300); // 180 が戻る scale(500); // 350 が戻る
軸を設定する
svg .append('g') // gでgタグを追加 .attr('transform', `translate(0,${height - axisHeight})`) // 軸の場所を設定(0, height-axisHeight)に軸が現れる .call(d3.axisBottom(xScale)); // 軸の下にラベルを付ける axisLeftなら軸の左にラベルを
図形を描写する
svg .selectAll('rect1') // rect1タグを選択 (rect1タグはないので何も選択されない) nullでもいい .data(count) // データを設定 .enter() .append('rect') // 長方形(Rectangle)タグを追加 -> rectタグを検索 .attr('x', (d, i) => { return xScale(d.date) + xScale.bandwidth() / 3 + xScale.bandwidth() / 6; // rectタグのx軸を設定(xScale.bandwidth()はxScaleから計算された長方形の幅) }) .attr('y', (d) => { return yScaleCount1(d.count); // x軸と同様にy軸を設定 }) .attr('height', (d) => { return height - axisHeight - yScaleCount1(d.count); // 長方形の高さを設定 }) .attr('width', xScale.bandwidth() / 3) // 長方形の幅を設定 .attr('fill', '#66FFFF'); // 長方形の色を設定
円グラフ
大体は棒グラフとおなじ、内円とかの設定が円グラフでは必要
コード全体
function display(majorRateCount) { const width = window.innerWidth / 3; // グラフラスの幅 const height = 450; // グラフの高さ const radius = Math.min(width, height) / 2 - 10; // 割合計算 const total = majorRateCount.reduce((result, d) => { console.log(d); return result + d.count; }, 0); majorRateCount.forEach((element) => { element.rate = element.count / total; }); // SVG領域の設定 const svg = d3 .select('#circle') .append('svg') .attr('width', width) .attr('height', height); // chartを真ん中へ const g = svg .append('g') .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')'); // カラーの設定 const color = d3 .scaleOrdinal() .range(['#DC3912', '#3366CC', '#109618', '#FF9900', '#990099']); // pieチャートデータセット用関数の設定 const pie = d3.pie().value(function (d) { return d.count; }); // pieチャートSVG要素の設定 const pieGroup = g .selectAll(null) .data(pie(majorRateCount)) .enter() .append('g') .attr('class', 'pie'); const arc = d3.arc().outerRadius(radius).innerRadius(0); pieGroup .append('path') .attr('d', arc) .attr('fill', (d) => { return color(d.index); }) .attr('opacity', 0.5) .attr('stroke', 'white') .attr('stroke-width', '0.5px'); // pieチャートテキストSVG要素の設定 const text = d3 .arc() .outerRadius(radius - 30) .innerRadius(radius - 30); pieGroup .append('text') .attr('fill', 'black') .attr('transform', (d) => { return `translate(${text.centroid(d)})`; }) .attr('font-size', '12px') .attr('text-anchor', 'middle') .text((d) => { return d.data.major + ' ' + Math.round(d.data.rate * 100) + '%'; }); }
引数
majorRateCount = [ { "major": "Python", "count": 3, }, { "major": "C++", "count": 1, }, { "major": "Go", "count": 2, }, { "major": "JavaScript", "count": 2, }, ]