Skip to content

Instantly share code, notes, and snippets.

@dungsaga

dungsaga/README.md

Last active March 18, 2019 02:35
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 dungsaga/2e09bc1ff570fec2ecb77250d8ffb2fe to your computer and use it in GitHub Desktop.
Save dungsaga/2e09bc1ff570fec2ecb77250d8ffb2fe to your computer and use it in GitHub Desktop.
Download ZIP
Line chart with tag cloud
Raw
README.md
Raw
data.csv
Year Paris Amsterdam London Hanoi New York Detroit
1940 9640 1134 1579 6788 1261 1735
1941 6337 4348 2215 4250 4244 4261
1942 6366 3436 2782 4319 4735 5712
1943 6745 5359 2207 4334 3651 3415
1944 6662 6342 2632 4787 3221 7812
1945 6823 5359 2205 4308 3599 3796
1946 6395 8417 2756 4630 4528 1247
1947 6584 5430 2351 4383 4269 2985
1948 6339 1414 2462 4351 4779 4278
1949 6465 4654 5648 8323 7287 2837
1950 1318 3213 7281 3875 4646 4445
1951 2176 1627 1628 7392 8374 2936
1952 2487 2376 4293 8957 0237 5899
1953 2342 8734 9827 3985 7237 5892
1954 2398 4728 9374 8923 7897 2398
1955 2348 2738 9528 9510 9379 5247
1956 9882 6436 3587 4905 7023 7359
1957 3984 7283 9572 7592 7905 7927
1958 2987 5982 3758 9275 7275 9074
1959 3492 5734 9573 9450 4809 8290
Raw
index.html
<html>
<head>
<meta charset="utf-8">
<title>Line chart</title>
<style>
body {
font: 10px sans-serif;
}
text {
fill: #000;
}
#names {
display: inline-block;
height: 250px;
width: 200px;
vertical-align: top;
}
#names a {
display: inline-block;
vertical-align: baseline;
height: 40px;
width: auto;
padding: 10px;
pointer: cursor;
}
#names a:hover {
background: #ddd;
}
#names a.huge {
font-size: 400%;
color: #4c92b9;
}
#names a.big {
font-size: 300%;
color: #4c92b9;
}
#names a.normal {
font-size: 250%;
color: #4c92b9;
}
#names a.small {
font-size: 150%;
color: #d57599;
}
#names a.tiny {
font-size: 100%;
color: #d57599;
}
#chart {
display: inline-block;
height: 400px;
width: 700px;
}
#years {
display: inline-block;
margin-left: 300px;
height: 50px;
width: 700px;
}
#years a {
display: inline-block;
height: 12px;
width: auto;
padding: 10px;
margin: 10px;
pointer: cursor;
background: #ddd;
}
</style>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.13/c3.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.9.2/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.13/c3.min.js"></script>
</head>
<body>
<div id="names"></div>
<div id="chart"></div>
<div id="years"></div>
<script>
var chart = c3.generate({
data: {
url: 'data.csv',
x: 'Year',
type: 'line'
},
grid: {
x: {
show: true
},
y: {
show: true
}
},
axis: {
x: {
tick: {
culling: false
},
padding: {left: 1, right: 1}
},
},
legend: {
show: false
}
});
var originalData = [];
setTimeout(function(){
chart.hide();
chart.show('Hanoi');
var data = chart.data();
originalData = data.map(d => ({
id: d.id,
id_org: d.id_org,
values: d.values.map(v => v),
}));
var years = data[0].values.map(d => d.x);
var names = data.map(d => ({
id: d.id,
weight: d.values[0].value,
}));
var tagCloud = document.getElementById('names');
var yearsFilter = document.getElementById('years');
var totalWeight = 0;
for (i in names) {
totalWeight += names[i].weight;
}
var weightClasses = ['tiny','small','normal','big','huge',];
for (i in names) {
var name = names[i];
var relativeWeight = (name.weight / totalWeight) * weightClasses.length;
var weight = weightClasses[Math.round(relativeWeight)];
tagCloud.innerHTML += '<a class='+weight+' onclick="showItem(this)" data-nameId="'+name.id+'">'+name.id+'</a>';
}
for (i in years) {
if (Math.floor(i/4)===i/4) {
var year1 = years[i];
var year2 = years[+i+3];
if (year2) {
yearsFilter.innerHTML += '<a onclick="filterYear(this)" data-year1="'+year1+'" data-year2="'+year2+'">'+year1+'-'+(year2)+'</a>';
}
}
}
yearsFilter.innerHTML += '<a onclick="filterYear(this)" data-year1="'+years[0]+'" data-year2="'+years[years.length-1]+'">(all)</a>';
}, 2000);
function filterYear(el) {
var year1 = el.getAttribute('data-year1');
var year2 = el.getAttribute('data-year2');
var data = originalData;
console.log(year1,year2,originalData);
var values = data.map(d => [d.id].concat(d.values
.filter(v => (v.x >= year1 && v.x <= year2))
.map(v => v.value)
));
var years = data[0].values
.filter(v => (v.x >= year1 && v.x <= year2))
.map(v => v.x)
;
var columns = [['Year'].concat(years)].concat(values);
console.log(columns);
chart.load({
columns: columns,
});
}
function showItem(el) {
chart.toggle(el.getAttribute('data-nameId'));
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment