Skip to content

Instantly share code, notes, and snippets.

@jdutta

jdutta/.block

Last active January 18, 2017 23:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jdutta/b655b03c0e0a866caebd362750621ef0 to your computer and use it in GitHub Desktop.
Save jdutta/b655b03c0e0a866caebd362750621ef0 to your computer and use it in GitHub Desktop.
Download ZIP
Quick Chart
Raw
.block
license: mit
Raw
README.md

Quick charting basics

Toggle between multiple csv data files.

Built with blockbuilder.org

Raw
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
Raw
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>
Raw
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'
})
}
Raw
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment