daily pastebin goal
64%
SHARE
TWEET

Untitled

a guest Apr 16th, 2018 52 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /*
  2. *    main.js
  3. *    Mastering Data Visualization with D3.js
  4. *    Project 1 - Star Break Coffee
  5. */
  6.  
  7. var margin = {left: 100, right: 10, top: 10, bottom: 100};
  8.  
  9. var width = 1200 * 0.8 - margin.left - margin.right;
  10. var height = window.innerHeight * 0.8 - margin.top - margin.bottom;
  11.  
  12. var g = d3.select('#chart-area')
  13.   .append('svg')
  14.   .attr('width', 1200 + margin.left + margin.right)
  15.   .attr('height', height + margin.top + margin.bottom)
  16.     .append('g')
  17.       .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
  18.  
  19. // X Label
  20. g.append('text')
  21.   .attr('class', 'x axis-label')
  22.   .attr('x', width / 2)
  23.   .attr('y', height + 80)
  24.   .attr('font-size', '20px')
  25.   .attr('text-anchor', 'middle')
  26.   .text('Month');
  27.  
  28. // Y Label
  29. g.append('text')
  30.   .attr('class', 'y axis-label')
  31.   .attr('x', -(height / 2))
  32.   .attr('y', -60)
  33.   .attr('font-size', '20px')
  34.   .attr('text-anchor', 'middle')
  35.   .attr('transform', 'rotate(-90)')
  36.   .text('Revenue ($)');
  37.  
  38.  
  39. d3.json('data/revenues.json', function(data){
  40.   data.forEach(function(data){
  41.     data.revenue = +data.revenue;
  42.     data.profit = +data.profit;
  43.   });
  44.  
  45.   var x = d3.scaleBand()
  46.     .domain(data.map(function(d){
  47.       return d.month;
  48.     }))
  49.     .range([0, width])
  50.     .paddingInner(0.3)
  51.     .paddingOuter(0.3)
  52.  
  53.   var y = d3.scaleLinear()
  54.     .domain([0, d3.max(data, function(d){
  55.       return d.revenue;
  56.     })])
  57.     .range([height, 0])
  58.  
  59.     // X i Y call
  60.     var xAxisCall = d3.axisBottom(x);
  61.     g.append('g')
  62.       .attr('class', 'x axis')
  63.       .attr('transform', 'translate(0, ' + height + ')')
  64.       .call(xAxisCall)
  65.       .selectAll('text')
  66.         .attr('x', '-5')
  67.         .attr('y', '10')
  68.         .attr('text-anchor', 'end')
  69.         .attr('transform', 'rotate(-40)')
  70.  
  71.     var yAxisCall = d3.axisLeft(y)
  72.       .ticks(10)
  73.       .tickFormat(function(d){
  74.         return d + '$';
  75.       });
  76.     g.append('g')
  77.       .attr('class', 'y-axis')
  78.       .call(yAxisCall);
  79.  
  80.     var rects = g.selectAll('rect')
  81.       .data(data)
  82.  
  83.     rects.enter()
  84.       .append('rect')
  85.         .attr('x', (d, i) => {
  86.           return x(d.month);
  87.         })
  88.         .attr('y', (d, i) => {
  89.           return y(d.revenue);
  90.         })
  91.         .attr('width', x.bandwidth)
  92.         .attr('height', (d) => {
  93.           return height - y(d.revenue);
  94.         })
  95.         .attr('fill', (d, i) =>{
  96.           console.log(i)
  97.           if (i % 2 == 0){
  98.             return 'grey';
  99.           }
  100.           else {
  101.             return 'black';
  102.           }
  103.         });
  104.  
  105.  
  106. })
RAW Paste Data
Top