Old school D3 from simpler times

All examples By author By category About

thulse

Full window Github gist

[Unlisted] ITS_Interactive Small Multiples

Built with blockbuilder.org

forked from ColinEberhardt's block: Interactive Small Multiples - Step 1

forked from ColinEberhardt's block: Interactive Small Multiples - Step 2

forked from ColinEberhardt's block: Interactive Small Multiples - Step 3

forked from ColinEberhardt's block: Interactive Small Multiples - Step 4

<!DOCTYPE html>
<script src="https://unpkg.com/d3@4.6.0"></script>
<script src="https://unpkg.com/d3fc@12.1.0"></script>
<div id='small-multiples'></div>

<style>
  html, body, #small-multiples {
    height: 100%;
    margin: 0;
	}
</style>

<script>
d3.csv('itsLearning.csv')
  .row(function(r) {
  	return {
  		category: r.category,
  		correct: Number(r.correct),
      originalCount: Number(r.originalCount)
    }
  })
  .get(function(data) {
    var nested = d3.nest()
    	.key(function(k) { return k.category; })
    	.entries(data);
  
    // pick one of the data series
  	var dataSeries = nested[7].values(d);
  
    var yExtent = fc.extentLinear()
      .accessors([function(d) { return d.correct; }])
      .pad([0, 0.2])
    	.include([0]);
  
  	var xExtent = fc.extentLinear()
    	.accessors([function(d) { return d.originalCount; }]);

var line = fc.seriesSvgLine()
      .crossValue(function(d) { return d.originalCount; })
      .mainValue(function(d) { return d.correct; });
  
  	var chart = fc.chartSvgCartesian(
        d3.scaleLinear(),
        d3.scaleLinear())
      .yDomain(yExtent(data))
    	.xDomain(xExtent(data))
      .yOrient('left')
    	.plotArea(line);
  
    // render
    d3.select('#small-multiples')
      .datum(dataSeries)
      .call(chart);
	});

</script>

xxxxxxxxxx
 
<!DOCTYPE html>
<script src="https://unpkg.com/d3@4.6.0"></script>
<script src="https://unpkg.com/d3fc@12.1.0"></script>
<div id='small-multiples'></div>
​
<style>
  html, body, #small-multiples {
    height: 100%;
    margin: 0;
    }
</style>
​
<script>
d3.csv('itsLearning.csv')
  .row(function(r) {
    return {
        category: r.category,
        correct: Number(r.correct),
      originalCount: Number(r.originalCount)
    }
  })
  .get(function(data) {
    var nested = d3.nest()
        .key(function(k) { return k.category; })
        .entries(data);
  
    // pick one of the data series
    var dataSeries = nested[7].values(d);
  
    var yExtent = fc.extentLinear()
      .accessors([function(d) { return d.correct; }])
      .pad([0, 0.2])
        .include([0]);
  
    var xExtent = fc.extentLinear()
        .accessors([function(d) { return d.originalCount; }]);
​
    var line = fc.seriesSvgLine()
      .crossValue(function(d) { return d.originalCount; })
      .mainValue(function(d) { return d.correct; });
  
    var chart = fc.chartSvgCartesian(
        d3.scaleLinear(),
        d3.scaleLinear())
      .yDomain(yExtent(data))
        .xDomain(xExtent(data))
      .yOrient('left')
        .plotArea(line);
  
    // render
    d3.select('#small-multiples')
      .datum(dataSeries)
      .call(chart);
    });
 
​
​
</script>
    

https://unpkg.com/d3@4.6.0

https://unpkg.com/d3fc@12.1.0