KatiRG/data.csv

## data.csv

          
            Index
            Year

            
              1
              1961

            
              1
              1964

            
              1
              1968

            
              1
              1972

            
              1
              1973

            
              1
              1974

            
              1
              1988

            
              1
              2013

            
              1
              2018

            
              1
              2029

            
              1
              2031

            
              1
              2037

            
              1
              2040

            
              1
              2048

            
              1
              2050

            
              1
              2053

            
              1
              2055

            
              1
              2062

            
              1
              2063

            
              1
              2071

            
              1
              2075

            
              1
              2076

            
              1
              2077

            
              1
              2078

            
              1
              2080

            
              2
              1961

            
              2
              1964

            
              2
              1968

            
              2
              1972

            
              2
              1973

            
              2
              1974

            
              2
              1988

            
              2
              2013

            
              2
              2050

            
              2
              2053

            
              2
              2055

            
              3
              1961

            
              3
              1964

            
              3
              1968

            
              3
              1972

            
              3
              1973

            
              3
              1974

            
              3
              1988

            
              3
              2013

            
              3
              2018

            
              3
              2029

            
              3
              2031

            
              3
              2037

            
              3
              2040

            
              3
              2048

            
              3
              2050

            
              3
              2053

            
              3
              2055

## index.html
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">

    <!-- d3 and dc -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.11/crossfilter.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.0/dc.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.0/dc.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>


    <!-- css links -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.2/css/bootstrap.min.css" >
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.2/js/bootstrap.min.js"></script>

    <link href="style.css" rel="stylesheet" type="text/css" media="all">

    <style>
      .filterName {
        font-family: sans-serif;
        font-size: 13px;
        font-weight: 700;
        font-style: italic;
        margin-top: 20px;
      }

      .dc-chart g.row text {
        fill: black;
        font-size: 12px;
      }

    </style>
  </head>

  <body>
    <div id="wrap">

      <!-- Begin page content -->
      <div class="container">
          <p>Test resize with rowChart and barChart.</p>

            <div class="row">

               <div class="col-md-6 col-sm-6 col-md-3 col-sm-3">
                  <div class="well" style="height: 400px;padding:0;">
                    <div id="chart-category">
                      <div class="filterName">Category
                            <a class="reset" href="javascript:categoryChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
                            <span class="reset" style="display: none;"></span>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="col-md-6 col-sm-6 col-md-3 col-sm-3">
                  <div class="well" style="height: 235px;padding:0;">
                      <div id="chart-index">
                          <div class="filterName">Index
                              <a class="reset" href="javascript:indexChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
                              <span class="reset" style="display: none;"></span>
                          </div>
                        </div>
                    </div>
                  </div>
                </div>

            </div>

      </div> <!-- /.container -->
    </div> <!-- /.wrap -->

    <script>
      var chart;

      categoryChart = dc.rowChart("#chart-category");
      indexChart = dc.barChart("#chart-index");

      d3.csv("data.csv", function(csv) {

        indexNames = ["Idx 1", "Idx 2", "Idx 3"];

        var filter = crossfilter(csv);

        var indexDimension = filter.dimension(function(d) { return +d.Index; }),
            categoryDimension = filter.dimension(function(d) { return +d.Year; });

        var indexGroup = indexDimension.group(),
            categoryGroup = categoryDimension.group();

        console.log("categoryGroup.all(): ", categoryGroup.all())

        categoryChart //rowChart
          .width(200).height(400)
          .dimension(categoryDimension)
          .group(categoryGroup)
          .title(function(d) { return d.key; });

        categoryChart
            .x(d3.scale.linear().range([0,(categoryChart.width()-50)]).domain([0,3]));
        categoryChart
            .xAxis().scale(categoryChart.x()).tickValues([0,1,2,3]);

        // =================
        indexChart //barChart
          .width(400).height(235)
          .margins({
            top: 10,
            right: 30,
            bottom: 30,
            left: 50
          })
          .dimension(indexDimension)
          .group(indexGroup)
          .renderHorizontalGridLines(true)
          .gap(1)
          .title(function(d, i) {
            return d.data.value + " counts";
          })
          .x(d3.scale.ordinal().domain(indexNames))
          .xUnits(dc.units.ordinal) // Tell dc.js that we're using an ordinal x-axis;
          .y(d3.scale.linear().domain([0, 25]))
          .yAxisLabel("Count");

        indexChart
          .yAxis().tickFormat(d3.format("d")).tickValues([0, 5,10,15,20,25]);

        indexChart.renderlet(function(chart) {
          // rotate x-axis labels
          chart.selectAll('g.x text')
          .attr('transform', 'translate(-10,10) rotate(315)');
        });

        // =================
        //dc.renderAll();

        //code by @nordfjord
        let: onresize = function(){
          dc.chartRegistry.list().forEach(chart => {
            let: _bbox = chart.root().node().parentNode.getBoundingClientRect();
            chart.width(_bbox.width).height(_bbox.height).render();
          });
        };

        onresize();

        window.addEventListener('resize', onresize);

      }); //end csv

    </script>

  </body>
</html>
	Index	Year
	1	1961
	1	1964
	1	1968
	1	1972
	1	1973
	1	1974
	1	1988
	1	2013
	1	2018
	1	2029
	1	2031
	1	2037
	1	2040
	1	2048
	1	2050
	1	2053
	1	2055
	1	2062
	1	2063
	1	2071
	1	2075
	1	2076
	1	2077
	1	2078
	1	2080
	2	1961
	2	1964
	2	1968
	2	1972
	2	1973
	2	1974
	2	1988
	2	2013
	2	2050
	2	2053
	2	2055
	3	1961
	3	1964
	3	1968
	3	1972
	3	1973
	3	1974
	3	1988
	3	2013
	3	2018
	3	2029
	3	2031
	3	2037
	3	2040
	3	2048
	3	2050
	3	2053
	3	2055
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">

	<!-- d3 and dc -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.11/crossfilter.js"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.0/dc.css"/>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.0/dc.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>


	<!-- css links -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.2/css/bootstrap.min.css" >
	<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.2/js/bootstrap.min.js"></script>

	<link href="style.css" rel="stylesheet" type="text/css" media="all">

	<style>
	.filterName {
	font-family: sans-serif;
	font-size: 13px;
	font-weight: 700;
	font-style: italic;
	margin-top: 20px;
	}

	.dc-chart g.row text {
	fill: black;
	font-size: 12px;
	}

	</style>
	</head>

	<body>
	<div id="wrap">

	<!-- Begin page content -->
	<div class="container">
	<p>Test resize with rowChart and barChart.</p>

	<div class="row">

	<div class="col-md-6 col-sm-6 col-md-3 col-sm-3">
	<div class="well" style="height: 400px;padding:0;">
	<div id="chart-category">
	<div class="filterName">Category
	<a class="reset" href="javascript:categoryChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
	<span class="reset" style="display: none;"></span>
	</div>
	</div>
	</div>
	</div>

	<div class="col-md-6 col-sm-6 col-md-3 col-sm-3">
	<div class="well" style="height: 235px;padding:0;">
	<div id="chart-index">
	<div class="filterName">Index
	<a class="reset" href="javascript:indexChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
	<span class="reset" style="display: none;"></span>
	</div>
	</div>
	</div>
	</div>
	</div>

	</div>

	</div> <!-- /.container -->
	</div> <!-- /.wrap -->

	<script>
	var chart;

	categoryChart = dc.rowChart("#chart-category");
	indexChart = dc.barChart("#chart-index");

	d3.csv("data.csv", function(csv) {

	indexNames = ["Idx 1", "Idx 2", "Idx 3"];

	var filter = crossfilter(csv);

	var indexDimension = filter.dimension(function(d) { return +d.Index; }),
	categoryDimension = filter.dimension(function(d) { return +d.Year; });

	var indexGroup = indexDimension.group(),
	categoryGroup = categoryDimension.group();

	console.log("categoryGroup.all(): ", categoryGroup.all())

	categoryChart //rowChart
	.width(200).height(400)
	.dimension(categoryDimension)
	.group(categoryGroup)
	.title(function(d) { return d.key; });

	categoryChart
	.x(d3.scale.linear().range([0,(categoryChart.width()-50)]).domain([0,3]));
	categoryChart
	.xAxis().scale(categoryChart.x()).tickValues([0,1,2,3]);

	// =================
	indexChart //barChart
	.width(400).height(235)
	.margins({
	top: 10,
	right: 30,
	bottom: 30,
	left: 50
	})
	.dimension(indexDimension)
	.group(indexGroup)
	.renderHorizontalGridLines(true)
	.gap(1)
	.title(function(d, i) {
	return d.data.value + " counts";
	})
	.x(d3.scale.ordinal().domain(indexNames))
	.xUnits(dc.units.ordinal) // Tell dc.js that we're using an ordinal x-axis;
	.y(d3.scale.linear().domain([0, 25]))
	.yAxisLabel("Count");

	indexChart
	.yAxis().tickFormat(d3.format("d")).tickValues([0, 5,10,15,20,25]);

	indexChart.renderlet(function(chart) {
	// rotate x-axis labels
	chart.selectAll('g.x text')
	.attr('transform', 'translate(-10,10) rotate(315)');
	});

	// =================
	//dc.renderAll();

	//code by @nordfjord
	let: onresize = function(){
	dc.chartRegistry.list().forEach(chart => {
	let: _bbox = chart.root().node().parentNode.getBoundingClientRect();
	chart.width(_bbox.width).height(_bbox.height).render();
	});
	};

	onresize();

	window.addEventListener('resize', onresize);

	}); //end csv

	</script>

	</body>
	</html>