jnv/data.tsv

## data.tsv

          
            type
            name
            price
            kcal
            sacharides
            sugar
            qty

            
              d
              Cappy Jablko
              39.9
              47
              11.3
              11.3
              1000

            
              d
              Hello Jablko
              37.9
              45
              11
              9.6
              1000

            
              d
              Hello Čerstvě vylisovaná jablečná šťáva
              39.9
              40
              9.8
              8.4
              1000

            
              d
              Relax Jablko
              39.9
              42
              10.2
              10.2
              1000

            
              o
              Kubík Multivitamín
              16.9
              52.10333333
              12.2
              11.9
              300

            
              o
              Jupík Jahoda
              16.5
              24
              6
              6
              330

            
              m
              Rubín Jablko
              40.9
              40
              9.83
              0
              1000

            
              d
              Pfanner Jablko
              47.9
              44
              10.3
              9.9
              1000

            
              d
              Relax Pomeranč
              42.9
              44
              10
              10
              1000

            
              d
              Relax Brazilský pomeranč
              44.9
              44
              10
              10
              1000

            
              d
              Toma Jablko
              38.9
              48
              10.7
              10.7
              1000

            
              i
              Nativa Ginkgo
              41.5
              18.7
              4.5
              4.5
              1500

            
              v
              Dobrá voda Pomeranč
              9.9
              20
              5.2
              5.2
              1500

            
              o
              Cappy Pulpy orange Pomeranč
              37.9
              46
              11.1
              11.1
              1000

            
              v
              Jana Pomeranč, papája
              9.9
              10
              2.5
              2.5
              1500

            
              l
              Vinea
              31.5
              38
              9.32
              9.32
              1500

            
              l
              Top Topic
              21.5
              16
              4
              4
              1500

            
              l
              RC Cola
              21.9
              44.45
              10.8
              10.8
              1500

            
              l
              7up
              29.9
              42
              11
              11
              1500

            
              l
              Dr. Pepper
              31.9
              28
              6.8
              6.8
              1500

            
              l
              Pepsi
              31.9
              41
              11
              11
              1500

            
              l
              Kofola
              27.5
              32
              8
              8
              1500

            
              l
              Sládkova limonáda
              18
              27
              6.6
              5.8
              500

            
              l
              Sládkova limonáda Jablko
              18
              27
              6.6
              5.8
              500

            
              o
              Kubík Play Multivitamín
              17.9
              47
              11.8
              11.8
              400

            
              m
              Rubín Černý rybíz
              40.9
              54
              13.2
              0
              1000

            
              l
              Cappy Multivitamín
              36.9
              28
              6.7
              6.7
              1500

            
              d
              Rio se stévií Jablko
              36.9
              33.5
              8
              8
              1000

            
              o
              Jupík Multivitamín
              16.5
              24
              6
              6
              330

            
              o
              Bimboo Jablko, mrkev, citron
              17.9
              33
              8.1
              8.1
              330

            
              o
              Hello Simpsons Pomeranč
              14.9
              40
              10
              10
              330

            
              o
              Kubík Mrkev, jablko, malina
              16.9
              47
              11.2
              11.1
              300

            
              l
              Coca-Cola
              39.9
              42
              10.6
              10.6
              2000

            
              l
              Fanta Pomeranč
              37.9
              37
              9
              9
              2000

            
              l
              Sprite
              39.9
              29
              6.9
              6.9
              2000

            
              l
              Mirinda
              29.9
              48
              12.93
              12.91
              1500

            
              d
              Granini Pomeranč
              52.9
              43
              9
              9
              1000

            
              d
              Granini Multivitamín
              52.9
              50
              12.1
              11.8
              1000

            
              i
              Ice Tea Green Tea
              36.5
              30
              6.9
              6.8
              1500

            
              o
              Cappy Junior Mandarinka
              15.5
              40
              9.6
              9.6
              330

            
              o
              Cappy Junior Jablko, černý rybíz
              15.5
              40
              9.6
              9.6
              330

            
              o
              Hello Simpsons Jablko
              14.9
              40
              10
              10
              330

            
              e
              Burn Tropical
              31.9
              47
              10.6
              10.6
              500

            
              e
              Red Bull
              35.9
              45
              11
              11
              250

            
              e
              Shock! Original
              44.9
              52
              12.5
              0
              1000

            
              o
              Fruc Multivitamín
              
              47
              11.6
              11.3
              500

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <title>DŽ</title>
  <style>
  body {
    overflow-y:scroll;
  }
  #chart1 {
    margin: 10px;
    min-width: 100px;
    min-height: 100px;
  /*
    Minimum height and width is a good idea to prevent negative SVG dimensions...
    For example width should be =< margin.left + margin.right + 1,
    of course 1 pixel for the entire chart would not be very useful, BUT should not have errors
  */
  }

  #chart1 svg {
    height: 800px;
  }
  </style>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.2/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.14-beta/nv.d3.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.14-beta/nv.d3.css">
</head>
<body>
  <div id="chart1" class='with-3d-shadow with-transitions'>
  <svg></svg>
  </div>
  <script>
/*global d3: true, nv: true */
(function()
{
  'use strict';
  var buildChart = function(data)
  {
    var chart;
    nv.addGraph(function()
    {
      chart = nv.models.multiBarHorizontalChart()
        .x(function(d)
        {
          return d.label;
        })
        .y(function(d)
        {
          return d.value;
        })
        .margin(
        {
          top: 30,
          right: 20,
          bottom: 50,
          left: 175
        })
      .showValues(true)
      //.tooltips(false)
        .transitionDuration(250)
        .stacked(false)
        .showControls(false);

      chart.yAxis
        .tickFormat(d3.format('d'));

      chart.legend.radioButtonMode(true);

      chart.defaultState([]);

      d3.select('#chart1 svg')
        .datum(data)
        .call(chart);


      nv.utils.windowResize(chart.update);

      chart.dispatch.on('stateChange', function(e)
      {
        nv.log('New State:', JSON.stringify(e));
      });

      return chart;
    });
  };

  var colorMap = {
    d: '#FF7E0E',
  };
  var fieldsToConvert = ['kcal', 'sacharides', 'sugar'];
  var dataAccessor = function(d) {
    for (var i = fieldsToConvert.length - 1; i >= 0; i--) {
      var field = fieldsToConvert[i];
      d[field] = +d[field];
    }
    return d;
  };

  var mapValues = function(d, key) {
    return d.map(function(row){
      return {
        label: row.name,
        value: row[key]
      };
    });
  };

  var mapData = function(d) {
    var result = [];
    result.push({
      key: 'kcal',
      color: '#d62728',
      values: mapValues(d, 'kcal')
    });

    result.push({
      key: 'sacharides',
      color: '#993366',
      disabled: true,
      values: mapValues(d, 'sacharides')
    });

    return result;
  };

  d3.tsv('data.tsv', dataAccessor, function(error, data)
  {
    buildChart(mapData(data));
  });

  /*
  nv.addGraph(function() {
  var chart = nv.models.discreteBarChart()
      .x(function(d) { return d.label })
      .y(function(d) { return d.value })
      .staggerLabels(true)
      //.staggerLabels(historicalBarChart[0].values.length > 8)
      .tooltips(false)
      .showValues(true)
      .transitionDuration(250)
      ;

  d3.select('#chart1 svg')
      .datum(historicalBarChart)
      .call(chart);

  nv.utils.windowResize(chart.update);

  return chart;*/
})();
</script>
</body>
type	name	price	kcal	sacharides	sugar	qty
d	Cappy Jablko	39.9	47	11.3	11.3	1000
d	Hello Jablko	37.9	45	11	9.6	1000
d	Hello Čerstvě vylisovaná jablečná šťáva	39.9	40	9.8	8.4	1000
d	Relax Jablko	39.9	42	10.2	10.2	1000
o	Kubík Multivitamín	16.9	52.10333333	12.2	11.9	300
o	Jupík Jahoda	16.5	24	6	6	330
m	Rubín Jablko	40.9	40	9.83	0	1000
d	Pfanner Jablko	47.9	44	10.3	9.9	1000
d	Relax Pomeranč	42.9	44	10	10	1000
d	Relax Brazilský pomeranč	44.9	44	10	10	1000
d	Toma Jablko	38.9	48	10.7	10.7	1000
i	Nativa Ginkgo	41.5	18.7	4.5	4.5	1500
v	Dobrá voda Pomeranč	9.9	20	5.2	5.2	1500
o	Cappy Pulpy orange Pomeranč	37.9	46	11.1	11.1	1000
v	Jana Pomeranč, papája	9.9	10	2.5	2.5	1500
l	Vinea	31.5	38	9.32	9.32	1500
l	Top Topic	21.5	16	4	4	1500
l	RC Cola	21.9	44.45	10.8	10.8	1500
l	7up	29.9	42	11	11	1500
l	Dr. Pepper	31.9	28	6.8	6.8	1500
l	Pepsi	31.9	41	11	11	1500
l	Kofola	27.5	32	8	8	1500
l	Sládkova limonáda	18	27	6.6	5.8	500
l	Sládkova limonáda Jablko	18	27	6.6	5.8	500
o	Kubík Play Multivitamín	17.9	47	11.8	11.8	400
m	Rubín Černý rybíz	40.9	54	13.2	0	1000
l	Cappy Multivitamín	36.9	28	6.7	6.7	1500
d	Rio se stévií Jablko	36.9	33.5	8	8	1000
o	Jupík Multivitamín	16.5	24	6	6	330
o	Bimboo Jablko, mrkev, citron	17.9	33	8.1	8.1	330
o	Hello Simpsons Pomeranč	14.9	40	10	10	330
o	Kubík Mrkev, jablko, malina	16.9	47	11.2	11.1	300
l	Coca-Cola	39.9	42	10.6	10.6	2000
l	Fanta Pomeranč	37.9	37	9	9	2000
l	Sprite	39.9	29	6.9	6.9	2000
l	Mirinda	29.9	48	12.93	12.91	1500
d	Granini Pomeranč	52.9	43	9	9	1000
d	Granini Multivitamín	52.9	50	12.1	11.8	1000
i	Ice Tea Green Tea	36.5	30	6.9	6.8	1500
o	Cappy Junior Mandarinka	15.5	40	9.6	9.6	330
o	Cappy Junior Jablko, černý rybíz	15.5	40	9.6	9.6	330
o	Hello Simpsons Jablko	14.9	40	10	10	330
e	Burn Tropical	31.9	47	10.6	10.6	500
e	Red Bull	35.9	45	11	11	250
e	Shock! Original	44.9	52	12.5	0	1000
o	Fruc Multivitamín		47	11.6	11.3	500
	<!DOCTYPE html>
	<meta charset="utf-8">
	<head>
	<title>DŽ</title>
	<style>
	body {
	overflow-y:scroll;
	}
	#chart1 {
	margin: 10px;
	min-width: 100px;
	min-height: 100px;
	/*
	Minimum height and width is a good idea to prevent negative SVG dimensions...
	For example width should be =< margin.left + margin.right + 1,
	of course 1 pixel for the entire chart would not be very useful, BUT should not have errors
	*/
	}

	#chart1 svg {
	height: 800px;
	}
	</style>
	<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.2/d3.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.14-beta/nv.d3.min.js"></script>
	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.14-beta/nv.d3.css">
	</head>
	<body>
	<div id="chart1" class='with-3d-shadow with-transitions'>
	<svg></svg>
	</div>
	<script>
	/global d3: true, nv: true /
	(function()
	{
	'use strict';
	var buildChart = function(data)
	{
	var chart;
	nv.addGraph(function()
	{
	chart = nv.models.multiBarHorizontalChart()
	.x(function(d)
	{
	return d.label;
	})
	.y(function(d)
	{
	return d.value;
	})
	.margin(
	{
	top: 30,
	right: 20,
	bottom: 50,
	left: 175
	})
	.showValues(true)
	//.tooltips(false)
	.transitionDuration(250)
	.stacked(false)
	.showControls(false);

	chart.yAxis
	.tickFormat(d3.format('d'));

	chart.legend.radioButtonMode(true);

	chart.defaultState([]);

	d3.select('#chart1 svg')
	.datum(data)
	.call(chart);


	nv.utils.windowResize(chart.update);

	chart.dispatch.on('stateChange', function(e)
	{
	nv.log('New State:', JSON.stringify(e));
	});

	return chart;
	});
	};

	var colorMap = {
	d: '#FF7E0E',
	};
	var fieldsToConvert = ['kcal', 'sacharides', 'sugar'];
	var dataAccessor = function(d) {
	for (var i = fieldsToConvert.length - 1; i >= 0; i--) {
	var field = fieldsToConvert[i];
	d[field] = +d[field];
	}
	return d;
	};

	var mapValues = function(d, key) {
	return d.map(function(row){
	return {
	label: row.name,
	value: row[key]
	};
	});
	};

	var mapData = function(d) {
	var result = [];
	result.push({
	key: 'kcal',
	color: '#d62728',
	values: mapValues(d, 'kcal')
	});

	result.push({
	key: 'sacharides',
	color: '#993366',
	disabled: true,
	values: mapValues(d, 'sacharides')
	});

	return result;
	};

	d3.tsv('data.tsv', dataAccessor, function(error, data)
	{
	buildChart(mapData(data));
	});

	/*
	nv.addGraph(function() {
	var chart = nv.models.discreteBarChart()
	.x(function(d) { return d.label })
	.y(function(d) { return d.value })
	.staggerLabels(true)
	//.staggerLabels(historicalBarChart[0].values.length > 8)
	.tooltips(false)
	.showValues(true)
	.transitionDuration(250)
	;

	d3.select('#chart1 svg')
	.datum(historicalBarChart)
	.call(chart);

	nv.utils.windowResize(chart.update);

	return chart;*/
	})();
	</script>
	</body>