kristw · November 9, 2016 21:50
diff --git a/.block b/.block
 license: mit
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <style> /* set the CSS */

 .chart { display: inline-block; vertical-align: top; }
 .bar { fill: steelblue; }

 </style>
 <body>
  <div class="chart" id="chart1"></div>
  <div class="chart" id="chart2"></div>
 	
 <!-- load the d3.js library -->    	
 <script src="//d3js.org/d3.v4.min.js"></script>
 <script src="https://unpkg.com/[email protected]/browser.min.js"></script>
 <script src="https://rawgit.com/twitter/d3kit/master/dist/d3kit.min.js"></script>
 <script type="text/babel">

 class BarChart extends d3Kit.SvgChart {
  static getDefaultOptions() {
    return d3Kit.helper.deepExtend(
      super.getDefaultOptions(),
      {
        margin: {top: 20, right: 20, bottom: 30, left: 40},
        initialWidth: 480,
        initialHeight: 500,
      }
    );
  }

  constructor(selector, options) {
    super(selector, options);

    this.x = d3.scaleBand()
          .padding(0.1);
 		this.y = d3.scaleLinear();
    
    this.xAxis = this.rootG.append("g");
    this.yAxis = this.rootG.append("g");
    
    this.visualize = this.visualize.bind(this);
    this.on('data', this.visualize);
  }
  
  visualize() {
 		this.x.range([0, this.getInnerWidth()])
    this.y.range([this.getInnerHeight(), 0]);    

    const data = this.data();

    if(data) {
      // Scale the range of the data in the domains
      this.x.domain(data.map(d => d.salesperson));
      this.y.domain([0, d3.max(data, d => d.sales)]);

    const selection = this.rootG.selectAll(".bar")
        .data(data)

    // append the rectangles for the bar chart
    const sEnter = selection.enter().append("rect")
        .attr("class", "bar")

    // to make this component really reusable, we have to also update 
    selection.merge(sEnter)
        .attr("x", d => this.x(d.salesperson))
        .attr("width", this.x.bandwidth())
        .attr("y", d => this.y(d.sales))
        .attr("height", d => this.getInnerHeight() - this.y(d.sales));
     
    // and exit  
    selection.exit().remove();
    
    // draw the x Axis
 		this.xAxis
        .attr("transform", "translate(0," + this.getInnerHeight() + ")")
        .call(d3.axisBottom(this.x));

    // draw the y Axis
 		this.yAxis
        .call(d3.axisLeft(this.y));    
    }
    
  }
 }
  
 const chart1 = new BarChart('#chart1')
 // 	.width(300); 
 const chart2 = new BarChart('#chart2', {
  margin: {top: 20, right: 20, bottom: 30, left: 40},
  initialWidth: 240,
  initialHeight: 250,
 }); 
  
 // get the data
 d3.csv("sales.csv", function(error, data) {
  if (error) throw error;

  // format the data
  data.forEach(function(d) {
    d.sales = +d.sales;
  });

 	chart1.data(data);
 	chart2.data(data);
 });

 </script>
 </body>
diff --git a/sales.csv b/sales.csv
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style> /* set the CSS */

	.chart { display: inline-block; vertical-align: top; }
	.bar { fill: steelblue; }

	</style>
	<body>
	<div class="chart" id="chart1"></div>
	<div class="chart" id="chart2"></div>

	<!-- load the d3.js library -->
	<script src="//d3js.org/d3.v4.min.js"></script>
	<script src="https://unpkg.com/[email protected]/browser.min.js"></script>
	<script src="https://rawgit.com/twitter/d3kit/master/dist/d3kit.min.js"></script>
	<script type="text/babel">

	class BarChart extends d3Kit.SvgChart {
	static getDefaultOptions() {
	return d3Kit.helper.deepExtend(
	super.getDefaultOptions(),
	{
	margin: {top: 20, right: 20, bottom: 30, left: 40},
	initialWidth: 480,
	initialHeight: 500,
	}
	);
	}

	constructor(selector, options) {
	super(selector, options);

	this.x = d3.scaleBand()
	.padding(0.1);
	this.y = d3.scaleLinear();

	this.xAxis = this.rootG.append("g");
	this.yAxis = this.rootG.append("g");

	this.visualize = this.visualize.bind(this);
	this.on('data', this.visualize);
	}

	visualize() {
	this.x.range([0, this.getInnerWidth()])
	this.y.range([this.getInnerHeight(), 0]);

	const data = this.data();

	if(data) {
	// Scale the range of the data in the domains
	this.x.domain(data.map(d => d.salesperson));
	this.y.domain([0, d3.max(data, d => d.sales)]);

	const selection = this.rootG.selectAll(".bar")
	.data(data)

	// append the rectangles for the bar chart
	const sEnter = selection.enter().append("rect")
	.attr("class", "bar")

	// to make this component really reusable, we have to also update
	selection.merge(sEnter)
	.attr("x", d => this.x(d.salesperson))
	.attr("width", this.x.bandwidth())
	.attr("y", d => this.y(d.sales))
	.attr("height", d => this.getInnerHeight() - this.y(d.sales));

	// and exit
	selection.exit().remove();

	// draw the x Axis
	this.xAxis
	.attr("transform", "translate(0," + this.getInnerHeight() + ")")
	.call(d3.axisBottom(this.x));

	// draw the y Axis
	this.yAxis
	.call(d3.axisLeft(this.y));
	}

	}
	}

	const chart1 = new BarChart('#chart1')
	// .width(300);
	const chart2 = new BarChart('#chart2', {
	margin: {top: 20, right: 20, bottom: 30, left: 40},
	initialWidth: 240,
	initialHeight: 250,
	});

	// get the data
	d3.csv("sales.csv", function(error, data) {
	if (error) throw error;

	// format the data
	data.forEach(function(d) {
	d.sales = +d.sales;
	});

	chart1.data(data);
	chart2.data(data);
	});

	</script>
	</body>
	salesperson	sales
	Bob	33
	Robin	12
	Anne	41
	Mark	16
	Joe	59
	Eve	38
	Karen	21
	Kirsty	25
	Chris	30
	Lisa	47
	Tom	5
	Stacy	20
	Charles	13
	Mary	29