viz.js

var datasets = {
  small: {
    orderly: [5, 10, 15, 20, 25],
    messy: [25, 7, 5, 26, 11],
  },
  large: {
    messy: [
      25, 7, 5, 26, 11, 8, 25, 14, 23, 19, 14, 11, 22, 29, 11, 13, 12, 17,
      18, 10, 24, 18, 25, 9, 3
    ],
  },
};

// build and attach random data
var randomData = [];
for (let i = 0; i < 25; i++) {
  var newNumber = Math.floor(Math.random() * 30);
  randomData.push(newNumber);
};
datasets.large.random = randomData;

// select dataset
var dataset = datasets.large.random;

// Dimensions and positioning
var dimensions = {
  w: 500,
  h: 200,
};

var dataScale = 4;

var getXPos = function getXPositionOfElementBasedOnData(d, i) {
  return i * (dimensions.w / dataset.length); // flexible horizontal positioning
};

var getYPos = function getYPositionOfElementBasedOnData(d) {
  return dimensions.h - d * dataScale;
};

// initter functions

var addDivs = function visualizeDataUsingDivs() {
  d3.select('body')
    .selectAll('div')
    .data(dataset)
    .enter()
    .append('div')
    .attr('class', 'bar')
    .style('height', (d) => {
      let scale = 5;
      let barHeight = scale * d;
      return barHeight + 'px'; // return style value corresponding to dataset
    });
};

var addCircles = function visualizeDataUsingSvgs() {
  var w = 1000;
  var h = 500;
  var svg = d3.select('body')
    .append('svg')
    .attr('width', dimensions.w)
    .attr('height', dimensions.h);

  var circles = svg.selectAll('circle')
    .data(dataset)
    .enter()
    .append('circle');

  circles.attr('cx', (d, i) => {
    return i * 50 + 25;
  })
    .attr('cy', h / 2)
    .attr('r', (d) => {
      return d;
    });

  circles.attr('fill', 'yellow')
    .attr('stroke', 'orange')
    .attr('stroke-width', (d) => {
      return d / 4;
    });
};

var addBarChart = function visualizeDataUsingBarChart() {
  var barPadding = 1;

  var svg = d3.select('body')
    .append('svg')
    .attr('width', dimensions.w)
    .attr('height', dimensions.h);

  // build bar chart consisting of evenly spaced bars with dynamic widths
  var rects = svg.selectAll('rect')
    .data(dataset)
    .enter()
    .append('rect')
    .attr('x', getXPos)
    .attr('y', getYPos)
    .attr('width', dimensions.w / dataset.length - barPadding)
    .attr('height', (d) => d * dataScale);

  // Add color based on value size
  rects.attr('fill', (d) => {
    var blueShade = Math.round(d * 10);
    return `rgb(0, 0, ${blueShade})`;
  });

  // Append text elements (text elements are valid inside SVG elements)
  var labels = svg.selectAll('text')
    .data(dataset)
    .enter()
    .append('text')
    .text((d) => d)
    .attr('x', (d, i) => {
      var basicPosition = i * (dimensions.w / dataset.length);
      // half a bar-width offset
      var offset = (dimensions.w / dataset.length - barPadding) / 2;
      return basicPosition + offset;
    })
    .attr('y', (d) => {
      var offset = (d >= 5) ? 14 : -4;
      return dimensions.h - d * dataScale + offset;
    })
    .attr('font-family', 'sans-serif')
    .attr('font-size', '11px')
    .attr('fill', (d) => (d < 5) ? 'black' : 'white')
    .attr('text-anchor', 'middle');
};

var addScatterplot = function addScatterplot() {
  var w = 500;
  var h = 100;
  var dataset = [
    [5, 20],
    [480, 90],
    [250, 50],
    [100, 33],
    [330, 95],
    [410, 12],
    [475, 44],
    [25, 67],
    [85, 21],
    [220, 88]
  ];

  var svg = d3.select('body')
    .append('svg')
    .attr('width', w)
    .attr('height', h)
    .attr('display', 'block');

  // create scatter plot
  var plotPoints = svg.selectAll('circle')
    .data(dataset)
    .enter()
    .append('circle')
    .attr('cx', d => d[0])
    .attr('cy', d => d[1]);

  // Visualize data as circle radius
  // NB: Always use area-- not radius-- for the data metric, as humans are
  // better at intepreting differences in area
  // Can only set radius. Radius derived from area: r = sqrt(A / pi);
  // simplify by removing division by pi.
  // Subtract y value from h to make circles on top larger.
  plotPoints.attr('r', (d) => {
    return Math.sqrt(h - d[1]);
  });

  // Labeling with data
  var labels = svg.selectAll('text')
    .data(dataset)
    .enter()
    .append('text')
    .text(d => d)
    .attr('x', d => d[0])
    .attr('y', d => d[1]);

  // Add font style to labels
  labels.attr('font-family', 'sans-serif')
    .attr('font-size', '11px')
    .attr('fill', 'red');
};

window.onload = function () {
  // Add bars corresponding to dataset
  // addDivs();
  // addCircles();
  addBarChart();
  addScatterplot();
};