aedoran/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="https://unpkg.com/dc@3/dc.css" />
  <script src="https://unpkg.com/d3@5/dist/d3.js"></script>
  <script src="https://unpkg.com/[email protected]/crossfilter.js"></script>
  <script src="https://unpkg.com/dc@3/dc.js"></script>
  <script src="https://rawgit.com/crossfilter/reductio/master/reductio.js"></script>
  <script src="https://npmcdn.com/universe@latest/universe.js"></script>
  <style>
  </style>
</head>

<body>
  <div class="container">
    <div class="row" id="graphs">
    </div>
    <div class="row">
  		<table id="meta" class="table table-striped"></table>
    </div>
    <div class="row">
    	<select id="chartType">
        <option "value"="barChart">barChart</option>
        <option "value"="pieChart">pieChart</option>
        <option "value"="rowChart">rowChart</option>
      </select>
    	<select id="metric">
        <option "value"="count">count</option>
        <option "value"="sum">sum</option>
        <option "value"="avg">avg</option>
      </select>

      <select id="column"></select>

      <button onclick="addGraph()">asdf</button>
    </div>
  </div>
  <script>

    var addGraph = function() {
      var chartType = document.getElementById("chartType").value;
      var metric = document.getElementById("metric").value;
			var column = document.getElementById("column").value;
      var div = document.createElement("div");
      var _id = "g"+Math.random().toString().replace(".","");
      div.id = _id;
      document.getElementById("graphs").append(div);
      var chart = dc.pieChart("#"+_id);
      var dim = indx.dimension(function(d) { return d[column]});
			var grp = dim.group();
      chart
        //.width(768)
        //.height(480)
        //.x(d3.scaleLinear().domain([0,20]))
        //.brushOn(false)
        //.yAxisLabel("This is the Y Axis!")
        .dimension(dim)
        .group(grp)
        .on('renderlet', function(chart) {
            chart.selectAll('rect').on("click", function(d) {
                console.log("click!", d);
            });
        });
        chart.render();
    };

    var indx;

    var metaTable = dc.dataTable("#meta");
    d3.csv("test.csv").then(function(grains) {

      var meta =[];

      var columnOptions = document.getElementById("column");
      grains.columns.forEach(function(c) {
				columnOptions.options[columnOptions.options.length] = new Option(c, c);
      })


      grains.columns.forEach(function(c) {
        var vals = grains.map(function(g) { return g[c]});
        meta.push({
        	"column" : c,
          "cardinality" : d3.set(vals).size(),
          "nulls" : vals.filter(function(g) {return !g}).length,
          "numberLike" : vals.filter(function(g) {return !!+g}).length,
          "dateLike" : vals.filter(function(g) { return !!+new Date(g)}).length
      	});
      });

      var ndx = crossfilter(meta)
      		dim		= ndx.dimension(function(d) { return d })
          grp   = function(d) { return  };

      indx = crossfilter(grains);

      metaTable
      	.width(300)
      	.height(500)
      	.dimension(dim)
      	.group(grp)
        .showGroups(false)
      	.columns(["column","cardinality","nulls","numberLike","dateLike"]);
      metaTable.render();
      /*
      var ndx                 = crossfilter(experiments),
          runDimension        = ndx.dimension(function(d) {return +d.Run;}),
          speedSumGroup       = runDimension.group().reduceSum(function(d) {return d.Speed * d.Run / 1000;});

      chart
        .width(768)
        .height(480)
        .x(d3.scaleLinear().domain([6,20]))
        .brushOn(false)
        .yAxisLabel("This is the Y Axis!")
        .dimension(runDimension)
        .group(speedSumGroup)
        .on('renderlet', function(chart) {
            chart.selectAll('rect').on("click", function(d) {
                console.log("click!", d);
            });
        });
        chart.render();
        */
    });

  </script>
</body>

## test.csv

          
            Metric1
            Metric2
            Dim1
            Dim2
            Dim3

            
              1.0
              1.2
              Option1
              Option2
              2018-01-01

            
              1.1
              1.3
              Option2
              Option2
              2018-02-01

            
              1.1
              1.3
              Option2
              
              2018-02-02
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="https://unpkg.com/dc@3/dc.css" />
	<script src="https://unpkg.com/d3@5/dist/d3.js"></script>
	<script src="https://unpkg.com/[email protected]/crossfilter.js"></script>
	<script src="https://unpkg.com/dc@3/dc.js"></script>
	<script src="https://rawgit.com/crossfilter/reductio/master/reductio.js"></script>
	<script src="https://npmcdn.com/universe@latest/universe.js"></script>
	<style>
	</style>
	</head>

	<body>
	<div class="container">
	<div class="row" id="graphs">
	</div>
	<div class="row">
	<table id="meta" class="table table-striped"></table>
	</div>
	<div class="row">
	<select id="chartType">
	<option "value"="barChart">barChart</option>
	<option "value"="pieChart">pieChart</option>
	<option "value"="rowChart">rowChart</option>
	</select>
	<select id="metric">
	<option "value"="count">count</option>
	<option "value"="sum">sum</option>
	<option "value"="avg">avg</option>
	</select>

	<select id="column"></select>

	<button onclick="addGraph()">asdf</button>
	</div>
	</div>
	<script>

	var addGraph = function() {
	var chartType = document.getElementById("chartType").value;
	var metric = document.getElementById("metric").value;
	var column = document.getElementById("column").value;
	var div = document.createElement("div");
	var _id = "g"+Math.random().toString().replace(".","");
	div.id = _id;
	document.getElementById("graphs").append(div);
	var chart = dc.pieChart("#"+_id);
	var dim = indx.dimension(function(d) { return d[column]});
	var grp = dim.group();
	chart
	//.width(768)
	//.height(480)
	//.x(d3.scaleLinear().domain([0,20]))
	//.brushOn(false)
	//.yAxisLabel("This is the Y Axis!")
	.dimension(dim)
	.group(grp)
	.on('renderlet', function(chart) {
	chart.selectAll('rect').on("click", function(d) {
	console.log("click!", d);
	});
	});
	chart.render();
	};

	var indx;

	var metaTable = dc.dataTable("#meta");
	d3.csv("test.csv").then(function(grains) {

	var meta =[];

	var columnOptions = document.getElementById("column");
	grains.columns.forEach(function(c) {
	columnOptions.options[columnOptions.options.length] = new Option(c, c);
	})


	grains.columns.forEach(function(c) {
	var vals = grains.map(function(g) { return g[c]});
	meta.push({
	"column" : c,
	"cardinality" : d3.set(vals).size(),
	"nulls" : vals.filter(function(g) {return !g}).length,
	"numberLike" : vals.filter(function(g) {return !!+g}).length,
	"dateLike" : vals.filter(function(g) { return !!+new Date(g)}).length
	});
	});

	var ndx = crossfilter(meta)
	dim = ndx.dimension(function(d) { return d })
	grp = function(d) { return };

	indx = crossfilter(grains);

	metaTable
	.width(300)
	.height(500)
	.dimension(dim)
	.group(grp)
	.showGroups(false)
	.columns(["column","cardinality","nulls","numberLike","dateLike"]);
	metaTable.render();
	/*
	var ndx = crossfilter(experiments),
	runDimension = ndx.dimension(function(d) {return +d.Run;}),
	speedSumGroup = runDimension.group().reduceSum(function(d) {return d.Speed * d.Run / 1000;});

	chart
	.width(768)
	.height(480)
	.x(d3.scaleLinear().domain([6,20]))
	.brushOn(false)
	.yAxisLabel("This is the Y Axis!")
	.dimension(runDimension)
	.group(speedSumGroup)
	.on('renderlet', function(chart) {
	chart.selectAll('rect').on("click", function(d) {
	console.log("click!", d);
	});
	});
	chart.render();
	*/
	});

	</script>
	</body>
Metric1	Metric2	Dim1	Dim2	Dim3
1.0	1.2	Option1	Option2	2018-01-01
1.1	1.3	Option2	Option2	2018-02-01
1.1	1.3	Option2		2018-02-02