robcrock · March 6, 2018 14:43
diff --git a/README.md b/README.md
diff --git a/chart.js b/chart.js
 d3.csv('data.csv').then(data => {

  data.forEach(row => {
    row.exports = +row.exports
  })

  data.sort((desc, ending) => desc.exports - ending.exports);

  createChart(data);

 });

 function createChart(data) {

  const chart = new Chart({
    element: document.querySelector('body'),
    data: data
  });

 }

 class Chart {

  constructor(opts) {

    this.element = opts.element;
    this.data = opts.data;

    this.draw();

  }

  draw() {

    // Set your dimensions viewport
    this.width = 960; // this.element.offsetWidth;
    this.height = 600; // this.width / 2;
    this.margin = { top: 70, right: 20, bottom: 50, left: 225 };

    // The inner height and width relate the space your chart will
    // occupy excluding space for tiles and axises.
    this.innerHeight = this.height - (this.margin.top + this.margin.bottom);
    this.innerWidth = this.width - (this.margin.right + this.margin.left);

    const svg = d3.select(this.element).append('svg');

    svg
      .attr('width', this.width)
      .attr('height', this.height);

    this.plot = svg.append('g')
      .attr('transform', `translate(${this.margin.left},${this.margin.top})`);

    // Each of these methods have an important role to play
    this.createScales();
    this.addAxes();
    this.addTitles();
    this.addChart();

  }

  createScales() {
    // We set the domain to zero to make sure our bars
    // always start at zero. We don't want to truncate.
    this.xScale = d3.scaleLinear()
      .range([0, this.innerWidth])
      .domain([0, d3.max(this.data, d => d.exports)]);

    // Range relates to pixels
    // Domain relates to data

    this.yBand = d3.scaleBand()
      .paddingInner(.1)
      .rangeRound([this.innerHeight, 0])
      .domain(this.data.map(d => d.exporter));

  }

  addAxes() {

    // Create axises to be called later
    const xAxis = d3.axisBottom()
      .scale(this.xScale);

    const yAxis = d3.axisLeft()
      .scale(this.yBand);

    // Custom format to clean up tick formattin
    const siFormat = d3.format(".2s")
    const customTickFormat = function (d) {
      return siFormat(d).replace("G", "B");
    };

    // Call those axis generators
    this.plot.append("g")
      .attr("class", "x axis")
      .attr("transform", `translate(0, ${this.innerHeight})`)
      .call(xAxis
        .ticks(10)
        .tickSize(-this.innerHeight)
        .tickFormat(customTickFormat));

    // Add y-axis ticks
    this.plot.append("g")
      .attr("class", "y axis")
      .call(yAxis)
  }

  addTitles() {
    // Add x-axis title
    this.plot.append('text')
      .attr("class", "x axis title")
      .attr('x', this.innerWidth)
      .attr('y', this.innerHeight + 30)
      .text("EXPORTS (USD)");

    // Add chart title
    this.plot.append('text')
      .attr("class", "chart title")
      .attr('x', 0)
      .attr('y', -25)
      .text("Who made the most on medicine exports in 2016?");

    // Add chart subtitle
    this.plot.append('text')
      .attr("class", "chart subtitle")
      .attr('x', 0)
      .attr('y', -5)
      .text("The top 25 are listed below.");
  }

  addChart() {

    this.plot.selectAll(".bar")
      .data(this.data)
      .enter().append("rect")
      .attr('class', "bar")
      .attr("x", 0)
      .attr("y", d => this.yBand(d.exporter))
      .attr("width", d => this.xScale(d.exports))
      .attr("height", this.yBand.bandwidth());

  }

 }
diff --git a/data.csv b/data.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>
  <script src="https://d3js.org/d3-dsv.v1.min.js"></script>
  <script src="https://d3js.org/d3-fetch.v1.min.js"></script>
  <link rel="stylesheet" href="style.css">
  <title>A Simple Bar Chart</title>
 </head>
 <body>
  <script src="chart.js"></script>
 </body>
 </html>
diff --git a/style.css b/style.css
 /* General */
 text {
  font-family: roboto;
 }
 path {
  stroke: none;
 }

 /* Axis */
 .y.axis text {
  font-size: 14px;
 }
 .y.axis line {
  display: none;
 }
 .x.axis text {
  font-size: 12px;
  fill: #333333;
 }
 .x.axis line {
  stroke-width: 1;
  stroke: #D3D3D3;
  shape-rendering: crispEdges;
 }

 /* Titles */
 .chart.subtitle {
  font-size: 16px;
  fill: #D3D3D3;
 }
 .chart.title {
  font-size: 32px;
 }
 .x.axis.title {
  font-size: 12px;
  fill: #D3D3D3;
  text-anchor: end;
 }

 /* Shapes */
 rect {
  fill: #3399CC;
 }
diff --git a/thumbnail.png b/thumbnail.png
	d3.csv('data.csv').then(data => {

	data.forEach(row => {
	row.exports = +row.exports
	})

	data.sort((desc, ending) => desc.exports - ending.exports);

	createChart(data);

	});

	function createChart(data) {

	const chart = new Chart({
	element: document.querySelector('body'),
	data: data
	});

	}

	class Chart {

	constructor(opts) {

	this.element = opts.element;
	this.data = opts.data;

	this.draw();

	}

	draw() {

	// Set your dimensions viewport
	this.width = 960; // this.element.offsetWidth;
	this.height = 600; // this.width / 2;
	this.margin = { top: 70, right: 20, bottom: 50, left: 225 };

	// The inner height and width relate the space your chart will
	// occupy excluding space for tiles and axises.
	this.innerHeight = this.height - (this.margin.top + this.margin.bottom);
	this.innerWidth = this.width - (this.margin.right + this.margin.left);

	const svg = d3.select(this.element).append('svg');

	svg
	.attr('width', this.width)
	.attr('height', this.height);

	this.plot = svg.append('g')
	.attr('transform', `translate(${this.margin.left},${this.margin.top})`);

	// Each of these methods have an important role to play
	this.createScales();
	this.addAxes();
	this.addTitles();
	this.addChart();

	}

	createScales() {
	// We set the domain to zero to make sure our bars
	// always start at zero. We don't want to truncate.
	this.xScale = d3.scaleLinear()
	.range([0, this.innerWidth])
	.domain([0, d3.max(this.data, d => d.exports)]);

	// Range relates to pixels
	// Domain relates to data

	this.yBand = d3.scaleBand()
	.paddingInner(.1)
	.rangeRound([this.innerHeight, 0])
	.domain(this.data.map(d => d.exporter));

	}

	addAxes() {

	// Create axises to be called later
	const xAxis = d3.axisBottom()
	.scale(this.xScale);

	const yAxis = d3.axisLeft()
	.scale(this.yBand);

	// Custom format to clean up tick formattin
	const siFormat = d3.format(".2s")
	const customTickFormat = function (d) {
	return siFormat(d).replace("G", "B");
	};

	// Call those axis generators
	this.plot.append("g")
	.attr("class", "x axis")
	.attr("transform", `translate(0, ${this.innerHeight})`)
	.call(xAxis
	.ticks(10)
	.tickSize(-this.innerHeight)
	.tickFormat(customTickFormat));

	// Add y-axis ticks
	this.plot.append("g")
	.attr("class", "y axis")
	.call(yAxis)
	}

	addTitles() {
	// Add x-axis title
	this.plot.append('text')
	.attr("class", "x axis title")
	.attr('x', this.innerWidth)
	.attr('y', this.innerHeight + 30)
	.text("EXPORTS (USD)");

	// Add chart title
	this.plot.append('text')
	.attr("class", "chart title")
	.attr('x', 0)
	.attr('y', -25)
	.text("Who made the most on medicine exports in 2016?");

	// Add chart subtitle
	this.plot.append('text')
	.attr("class", "chart subtitle")
	.attr('x', 0)
	.attr('y', -5)
	.text("The top 25 are listed below.");
	}

	addChart() {

	this.plot.selectAll(".bar")
	.data(this.data)
	.enter().append("rect")
	.attr('class', "bar")
	.attr("x", 0)
	.attr("y", d => this.yBand(d.exporter))
	.attr("width", d => this.xScale(d.exports))
	.attr("height", this.yBand.bandwidth());

	}

	}
	exporter	exports
	Germany	48602880000
	Switzerland	39949885000
	Belgium	26469018000
	France	22778385000
	United States of America	22533094000
	United Kingdom	21755868000
	Ireland	19765022000
	Italy	16642589000
	Netherlands	13581949000
	India	11612017000
	Spain	7485922000
	Canada	7366010000
	Sweden	5599983000
	Austria	5348028000
	Israel	3864880000
	Singapore	3856799000
	Hungary	3270412000
	Japan	2780102000
	China	2771973000
	Denmark	2672078000
	Slovenia	2479380000
	Poland	2361013000
	Czech Republic	1727222000
	Australia	1594860000
	Panama	1542220000
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>
	<script src="https://d3js.org/d3-dsv.v1.min.js"></script>
	<script src="https://d3js.org/d3-fetch.v1.min.js"></script>
	<link rel="stylesheet" href="style.css">
	<title>A Simple Bar Chart</title>
	</head>
	<body>
	<script src="chart.js"></script>
	</body>
	</html>
	/* General */
	text {
	font-family: roboto;
	}
	path {
	stroke: none;
	}

	/* Axis */
	.y.axis text {
	font-size: 14px;
	}
	.y.axis line {
	display: none;
	}
	.x.axis text {
	font-size: 12px;
	fill: #333333;
	}
	.x.axis line {
	stroke-width: 1;
	stroke: #D3D3D3;
	shape-rendering: crispEdges;
	}

	/* Titles */
	.chart.subtitle {
	font-size: 16px;
	fill: #D3D3D3;
	}
	.chart.title {
	font-size: 32px;
	}
	.x.axis.title {
	font-size: 12px;
	fill: #D3D3D3;
	text-anchor: end;
	}

	/* Shapes */
	rect {
	fill: #3399CC;
	}