jdutta/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Quick charting basics

Toggle between multiple csv data files.
Built with blockbuilder.org

  
## c_ip.csv

          
            key
            value

            
              155.17.4.114
              2044

            
              155.17.4.200
              1728

            
              155.17.122.128
              1662

            
              155.17.4.138
              700

            
              155.17.4.53
              596

            
              155.17.4.26
              498

            
              155.17.122.205
              428

            
              155.17.4.87
              369

            
              155.17.4.222
              354

            
              155.17.3.208
              322

            
              155.17.4.142
              297

            
              155.17.6.81
              253

            
              155.17.4.130
              193

            
              155.17.4.52
              192

            
              155.17.4.127
              178

            
              155.17.4.213
              164

            
              155.17.4.212
              144

            
              155.17.122.74
              118

            
              155.17.4.136
              114

            
              155.17.4.128
              113

            
              155.17.122.121
              103

            
              155.17.4.85
              97

            
              155.17.6.158
              95

            
              155.17.4.158
              93

            
              155.17.4.154
              91

            
              155.17.4.143
              86

            
              155.17.4.141
              85

            
              155.17.4.93
              85

            
              155.17.4.168
              83

            
              155.17.4.163
              78

            
              155.17.7.152
              77

            
              155.17.4.55
              75

            
              155.17.4.189
              75

            
              155.17.4.73
              74

            
              155.17.4.164
              72

            
              155.17.4.209
              71

            
              155.17.4.206
              70

            
              155.17.4.117
              69

            
              155.17.4.191
              69

            
              155.17.3.196
              68

            
              155.17.4.139
              68

            
              155.17.4.185
              68

            
              155.17.4.122
              67

            
              155.17.4.174
              59

            
              155.17.122.100
              56

            
              155.17.6.112
              54

            
              155.17.122.133
              52

            
              155.17.4.77
              43

            
              155.17.122.60
              39

            
              155.17.4.165
              38

            
              155.17.4.180
              34

            
              155.17.4.218
              30

            
              155.17.7.80
              25

            
              155.17.4.140
              25

            
              155.17.122.105
              22

            
              155.17.122.78
              21

            
              155.17.4.221
              20

            
              155.17.4.99
              19

            
              155.17.4.204
              18

            
              155.17.7.40
              17

            
              155.17.4.126
              17

            
              155.17.4.65
              16

            
              155.17.122.173
              16

            
              155.17.122.53
              15

            
              155.17.4.208
              13

            
              155.17.4.192
              13

            
              155.17.4.194
              13

            
              155.17.4.193
              12

            
              155.17.122.102
              11

            
              155.17.4.97
              11

            
              155.17.4.105
              11

            
              155.17.6.101
              11

            
              155.17.6.48
              10

            
              155.17.122.215
              10

            
              155.17.4.119
              10

            
              155.17.4.129
              10

            
              155.17.4.25
              9

            
              155.17.122.55
              9

            
              155.17.122.63
              9

            
              155.17.6.145
              9

            
              155.17.4.220
              9

            
              155.17.4.86
              9

            
              155.17.4.219
              8

            
              155.17.4.118
              8

            
              155.17.4.82
              7

            
              155.17.4.80
              7

            
              155.17.4.148
              6

            
              155.17.6.159
              6

            
              155.17.122.87
              6

            
              155.17.4.175
              5

            
              155.17.4.51
              5

            
              155.17.122.77
              5

            
              155.17.122.101
              5

            
              155.17.122.196
              5

            
              155.17.4.137
              5

            
              155.17.6.59
              5

            
              155.17.122.85
              5

            
              155.17.4.211
              5

            
              10.16.23.27
              4

            
              155.17.122.116
              4

            
              155.17.4.237
              4

            
              155.17.122.171
              4

            
              155.17.122.175
              3

            
              155.17.7.51
              3

            
              155.17.6.167
              3

            
              155.17.4.196
              3

            
              155.17.122.154
              2

            
              155.17.4.63
              2

            
              155.17.122.158
              2

            
              155.17.122.200
              2

            
              155.17.3.190
              2

            
              155.17.4.67
              1

            
              155.17.6.166
              1

            
              155.17.4.66
              1

            
              155.17.4.78
              1

            
              155.17.4.101
              1

            
              155.17.4.81
              1

            
              155.17.4.186
              1

## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width: 100%; height: 100%; font-size: 10px; overflow-y: scroll; }
  </style>
</head>

<body>
  <svg></svg>

  <script src="main.js"></script>
</body>

## main.js
// Configurable params
// Click on the number and see a magic slider appears to tweak it.
var config = {
  width: 441,
  height: 500,
  textFontSize: '12px',
  csvDataFile: 's_action.csv',
//  csvDataFile: 'c_ip.csv'
};

d3.csv(config.csvDataFile, function (json) {
  data = json;
  drawChart(data);
});

function drawChart(data) {

  var svg = d3.select('svg');
  var gRoot = svg.append('svg:g')
          .attr('transform', 'translate(25, 25)');

  //var data = d3.shuffle(d3.range(1, 21));
  var colorScale1 = d3.scale.linear()
    .domain(d3.extent(data, function (d) { return d.value; }))
          .interpolate(d3.interpolateRgb)
          .range(['#ff0000', '#0000ff']);
  var colorScale = d3.scale.category20();


  var keyScale = d3.scale.ordinal()
    .domain(data.map(function(d) {
      return d.key;
    }))
    .rangeRoundBands([0, config.height], 0.3, 0.5);

  var maxValue = d3.max(data, function (d) {
    return +d.value;
  });
  var valueScale = d3.scale.linear()
    .domain([0, maxValue])
    .range([0, config.width]);


  var barEnter = gRoot.selectAll('.bar')
    .data(data)
    .enter();

  barEnter
    .append('svg:rect')
      .attr({
        x: 0,
        y: function (d, i) {
          return keyScale(d.key);
        },
        width: 0,
        height: keyScale.rangeBand(),
        fill: function (d) {
          return colorScale(d.value);
        }
      })
    .attr({
        width: function (d, i) {
          return valueScale(d.value);
        }
      })

  barEnter
    .append('svg:text')
    .attr({
        x: function (d) {
          return valueScale(d.value) + 5;
        },
        y: function (d, i) {
          return keyScale(d.key) + keyScale.rangeBand()/2;
        }
    })
    .text(function (d) {
        return d.key + ' (' + d.value + ')';
      })
    .style({
        'font-size': config.textFontSize,
        'alignment-baseline': 'middle'
      })
}


## s_action.csv

          
            key
            value

            
              TCP_NC_MISS
              5465

            
              TCP_TUNNELED
              4187

            
              TCP_HIT
              1717

            
              TCP_MISS
              1651

            
              TCP_PARTIAL_MISS
              82

            
              TCP_REFRESH_MISS
              61

            
              TCP_ERR_MISS
              32

            
              TCP_POLICY_REDIRECT
              28

            
              TCP_CLIENT_REFRESH
              25

            
              TCP_NC_MISS_RST
              1

## thumbnail.png

      
    Raw
  

              thumbnail.png
	key	value
	155.17.4.114	2044
	155.17.4.200	1728
	155.17.122.128	1662
	155.17.4.138	700
	155.17.4.53	596
	155.17.4.26	498
	155.17.122.205	428
	155.17.4.87	369
	155.17.4.222	354
	155.17.3.208	322
	155.17.4.142	297
	155.17.6.81	253
	155.17.4.130	193
	155.17.4.52	192
	155.17.4.127	178
	155.17.4.213	164
	155.17.4.212	144
	155.17.122.74	118
	155.17.4.136	114
	155.17.4.128	113
	155.17.122.121	103
	155.17.4.85	97
	155.17.6.158	95
	155.17.4.158	93
	155.17.4.154	91
	155.17.4.143	86
	155.17.4.141	85
	155.17.4.93	85
	155.17.4.168	83
	155.17.4.163	78
	155.17.7.152	77
	155.17.4.55	75
	155.17.4.189	75
	155.17.4.73	74
	155.17.4.164	72
	155.17.4.209	71
	155.17.4.206	70
	155.17.4.117	69
	155.17.4.191	69
	155.17.3.196	68
	155.17.4.139	68
	155.17.4.185	68
	155.17.4.122	67
	155.17.4.174	59
	155.17.122.100	56
	155.17.6.112	54
	155.17.122.133	52
	155.17.4.77	43
	155.17.122.60	39
	155.17.4.165	38
	155.17.4.180	34
	155.17.4.218	30
	155.17.7.80	25
	155.17.4.140	25
	155.17.122.105	22
	155.17.122.78	21
	155.17.4.221	20
	155.17.4.99	19
	155.17.4.204	18
	155.17.7.40	17
	155.17.4.126	17
	155.17.4.65	16
	155.17.122.173	16
	155.17.122.53	15
	155.17.4.208	13
	155.17.4.192	13
	155.17.4.194	13
	155.17.4.193	12
	155.17.122.102	11
	155.17.4.97	11
	155.17.4.105	11
	155.17.6.101	11
	155.17.6.48	10
	155.17.122.215	10
	155.17.4.119	10
	155.17.4.129	10
	155.17.4.25	9
	155.17.122.55	9
	155.17.122.63	9
	155.17.6.145	9
	155.17.4.220	9
	155.17.4.86	9
	155.17.4.219	8
	155.17.4.118	8
	155.17.4.82	7
	155.17.4.80	7
	155.17.4.148	6
	155.17.6.159	6
	155.17.122.87	6
	155.17.4.175	5
	155.17.4.51	5
	155.17.122.77	5
	155.17.122.101	5
	155.17.122.196	5
	155.17.4.137	5
	155.17.6.59	5
	155.17.122.85	5
	155.17.4.211	5
	10.16.23.27	4
	155.17.122.116	4
	155.17.4.237	4
	155.17.122.171	4
	155.17.122.175	3
	155.17.7.51	3
	155.17.6.167	3
	155.17.4.196	3
	155.17.122.154	2
	155.17.4.63	2
	155.17.122.158	2
	155.17.122.200	2
	155.17.3.190	2
	155.17.4.67	1
	155.17.6.166	1
	155.17.4.66	1
	155.17.4.78	1
	155.17.4.101	1
	155.17.4.81	1
	155.17.4.186	1
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	svg { width: 100%; height: 100%; font-size: 10px; overflow-y: scroll; }
	</style>
	</head>

	<body>
	<svg></svg>

	<script src="main.js"></script>
	</body>
	// Configurable params
	// Click on the number and see a magic slider appears to tweak it.
	var config = {
	width: 441,
	height: 500,
	textFontSize: '12px',
	csvDataFile: 's_action.csv',
	// csvDataFile: 'c_ip.csv'
	};

	d3.csv(config.csvDataFile, function (json) {
	data = json;
	drawChart(data);
	});

	function drawChart(data) {

	var svg = d3.select('svg');
	var gRoot = svg.append('svg:g')
	.attr('transform', 'translate(25, 25)');

	//var data = d3.shuffle(d3.range(1, 21));
	var colorScale1 = d3.scale.linear()
	.domain(d3.extent(data, function (d) { return d.value; }))
	.interpolate(d3.interpolateRgb)
	.range(['#ff0000', '#0000ff']);
	var colorScale = d3.scale.category20();


	var keyScale = d3.scale.ordinal()
	.domain(data.map(function(d) {
	return d.key;
	}))
	.rangeRoundBands([0, config.height], 0.3, 0.5);

	var maxValue = d3.max(data, function (d) {
	return +d.value;
	});
	var valueScale = d3.scale.linear()
	.domain([0, maxValue])
	.range([0, config.width]);


	var barEnter = gRoot.selectAll('.bar')
	.data(data)
	.enter();

	barEnter
	.append('svg:rect')
	.attr({
	x: 0,
	y: function (d, i) {
	return keyScale(d.key);
	},
	width: 0,
	height: keyScale.rangeBand(),
	fill: function (d) {
	return colorScale(d.value);
	}
	})
	.attr({
	width: function (d, i) {
	return valueScale(d.value);
	}
	})

	barEnter
	.append('svg:text')
	.attr({
	x: function (d) {
	return valueScale(d.value) + 5;
	},
	y: function (d, i) {
	return keyScale(d.key) + keyScale.rangeBand()/2;
	}
	})
	.text(function (d) {
	return d.key + ' (' + d.value + ')';
	})
	.style({
	'font-size': config.textFontSize,
	'alignment-baseline': 'middle'
	})
	}
	key	value
	TCP_NC_MISS	5465
	TCP_TUNNELED	4187
	TCP_HIT	1717
	TCP_MISS	1651
	TCP_PARTIAL_MISS	82
	TCP_REFRESH_MISS	61
	TCP_ERR_MISS	32
	TCP_POLICY_REDIRECT	28
	TCP_CLIENT_REFRESH	25
	TCP_NC_MISS_RST	1