Upgrade to Pro — share decks privately, control downloads, hide ads and more …

AngularJSでデータビジュアライズ

Avatar for Tsuru Tsuru
August 27, 2014

 AngularJSでデータビジュアライズ

2014.08.26 LT資料

Avatar for Tsuru

Tsuru

August 27, 2014
Tweet

More Decks by Tsuru

Other Decks in Technology

Transcript

  1. About me? ! Name: ௡ཹɹҰਔ (Tsuru Kazuhito) Twitter: @ichizin גࣜձࣾϚΠϯυύϨοτ

    αʔόʔαΠυΤϯδχΞͱͯ͠ओʹόοΫ ΤϯυΛத৺ʹ࣌ʑϑϩϯτΤϯυ΋৮ͬͯ ·͢ɻ
  2. var margin = {top: 20, right: 20, bottom: 30, left:

    40}, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; ! var x = d3.scale.ordinal() .rangeRoundBands([0, width], .1); ! var y = d3.scale.linear() .range([height, 0]); ! var xAxis = d3.svg.axis() .scale(x) .orient("bottom"); ! var yAxis = d3.svg.axis() .scale(y) .orient("left") .ticks(10, "%"); ! var svg = d3.select("body").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); ! d3.tsv("data.tsv", type, function(error, data) { x.domain(data.map(function(d) { return d.letter; })); y.domain([0, d3.max(data, function(d) { return d.frequency; })]); ! svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis); ! svg.append("g") .attr("class", "y axis") .call(yAxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") .text("Frequency"); ! svg.selectAll(".bar") .data(data) .enter().append("rect") .attr("class", "bar") .attr("x", function(d) { return x(d.letter); }) .attr("width", x.rangeBand()) .attr("y", function(d) { return y(d.frequency); }) .attr("height", function(d) { return height - y(d.frequency); }); ! }); ! function type(d) { d.frequency = +d.frequency; return d; } ௕͗͢ʂʂ
  3. ྫ͑͹ direcitive.js ! ! ! ! ! ! ! !

    ! ! ! ! ! ! ! index.html
  4. function dounutGraph(d3Service) { var d3 = d3Service.d3; return { restrict:’EA',

    // E :element A: attribute scope: { "data": “=", "accessor": “=“ ɹɹ// ‘=’͸σʔλόΠϯυ ‘@’͸จࣈ ‘&’͸Πϕϯτɹɹɹɹɹɹ }, link: function(scope, elm, attr) { // D3ͷίʔυΛॻ͍͍ͯ͘ } }