Skip to content

Instantly share code, notes, and snippets.

@caravinden

caravinden/avg.csv

Last active August 13, 2019 17:42
Show Gist options
  • Save caravinden/0dd6b20e3dde824713fba975e220f2ff to your computer and use it in GitHub Desktop.
Save caravinden/0dd6b20e3dde824713fba975e220f2ff to your computer and use it in GitHub Desktop.
Download ZIP
Responsive Line Chart using d3.v5. ECMA6 STD.
Raw
avg.csv
Year Mat Inns Runs Player
2004 3 3 9.5 MSD
2005 27 24 49.72 MSD
2006 29 26 41.05 MSD
2007 37 33 44.12 MSD
2008 29 26 57.74 MSD
2009 29 24 70.47 MSD
2010 18 17 46.15 MSD
2011 24 22 58.77 MSD
2012 16 14 65.5 MSD
2013 26 20 62.75 MSD
2014 12 10 52.25 MSD
2015 20 17 45.71 MSD
2016 13 10 27.8 MSD
2017 29 22 60.62 MSD
2018 20 13 25 MSD
2019 13 12 52.13 MSD
2000 13 12 21.67 YUVI
2001 15 12 23.8 YUVI
2002 26 21 36.61 YUVI
2003 26 25 31.58 YUVI
2004 31 28 30.04 YUVI
2005 26 25 41.95 YUVI
2006 22 21 53.06 YUVI
2007 36 33 45.96 YUVI
2008 27 27 38.83 YUVI
2009 23 21 39.15 YUVI
2010 15 14 31.73 YUVI
2011 14 13 50.33 YUVI
2012 1 1 2 YUVI
2013 18 15 19.71 YUVI
2017 11 10 41.33 YUVI
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.header {
text-align: center;
font-size: 18px;
font-weight: bold;
color: #bdbdbd;
}
.line {
fill: none;
stroke-width: 2;
}
.overlay {
fill: none;
pointer-events: all;
}
.y > g > line {
stroke-opacity: 0.3;
stroke-width: .5px;
}
.stat-circle {
stroke: #fff;
stroke-width: 3px;
}
.stat-bar {
fill: #152A5E;
stroke: black;
stroke-width: .5px;
fill-opacity: 0.7;
}
.msd {
color:#152A5E;
}
.yuvi {
color:#ffab00;
}
</style>
<body onresize = "onResizeHandler()">
<div>
<div class="header"> <span class='yuvi'>Yuvraj</span> vs <span class='msd'>M S Dhoni </span> (Runs) </div>
<span id="run"></span>
<div class="header"> <span class='yuvi'>Yuvraj</span> vs <span class='msd'>M S Dhoni </span> (Average) </div>
<span id="avg"></span>
</div>
<div id='tooltip' style='position:absolute;background-color:lightgray;padding:5px'></div>
</body>
<script src="//d3js.org/d3.v5.min.js"></script>
<script>
/**
* Player class that helps to set the details.
* @constructor Player
*/
class Player {
// constructor
constructor ( fullName, age ) {
this.name = fullName;
this.age = age;
this.type = 'allrounder';
this.batting = 'lefthander';
this.bowling = 'lefthand spinner';
this.position = 'middle order';
this.topScore = '100',
this.scoredata;
this.yAxisObj = {
'series1': 'test'
}
}
/**
* To get player details
* @method getPlayerDetail
*/
getPlayerDetail() {
}
/**
* To set domain values for each axis
* @method setScoreData
*/
setScoreData( scoreData ) {
const seriesData = d3.nest()
.key( function(d) { return d.Player; } )
.entries(scoreData);
const yDomain = d3.extent( scoreData, d => Number(d.Runs) );
const xDomain = d3.extent( scoreData, d => new Date( d.Year ) );
this.scoredata = seriesData;
this.xDomain = xDomain;
this.yDomain = yDomain;
}
/**
* To set charts
* @method drawChart
*/
drawChart() {
this.fetchData( arguments[0] );
}
/**
* To draw charts
* @method draw
*/
draw() {
const me = this;
const margin = { top: 20, right: 100, bottom: 20, left: 50},
width = window.innerWidth - margin.left - margin.right ,
height = 250 - margin.top - margin.bottom;
me.xScale = d3.scaleTime()
.domain( this.xDomain )
.range( [ 5 , width ] )
.nice();
me.yScale = d3.scaleLinear()
.domain( this.yDomain )
.range( [ height, 0 ])
.nice();
const line = d3.line()
.x( d => me.xScale( new Date ( d.Year ) ) )
.y( d => me.yScale( Number ( d.Runs ) ) );
//.curve( d3.curveLinear );
d3.select("#" + arguments[0] +">svg" ).remove();
const svg = d3.select("#" + arguments[0] ).append("svg")
.attr("width", ( width + margin.left + margin.right ) )
.attr("height", height + margin.top + margin.bottom )
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(5," + height + ")")
.call( d3.axisBottom( me.xScale )
.ticks(10)
.tickSizeInner(4)
.tickSizeOuter(10)
);
svg.append("text")
.attr( "transform", "translate("+ width/2 +","+ ( height + margin.bottom ) +")" )
.text("");
svg.append("text")
.attr("transform", "rotate( -90 )" )
.attr("y", 0 - margin.left )
.attr("x", 0 - ( height/2 ) )
.text("Runs");
svg.append("g")
.attr("class", "y axis")
.call( d3.axisLeft( me.yScale )
.ticks(5)
.tickSizeInner( -width )
.tickSizeOuter(10)
);
this.scoredata.forEach( function( d ) {
const color = d.key == 'MSD' ? '#152A5E' : '#ffab00';
svg.append("path")
.attr("class", "line")
.style('stroke', color)
.attr("d", line( d.values) );
const shapes = svg.selectAll("shapes")
.data( d.values );
shapes.enter()
.append("circle")
.attr("class", "stat-circle")
.style("fill", color)
.attr("cx", d => me.xScale( new Date( d.Year ) ) )
.attr("cy", d => me.yScale( Number ( d.Runs ) ) )
.attr("r", 5)
.on('mouseenter', function( d ) {
me.drawTooltip( d )
})
.on('mouseout', function( d ) {
me.removeTooltip();
});
shapes.exit().remove();
});
}
/**
* To fetch data
*/
fetchData() {
const me = this,
container = arguments[0];
d3.csv( container+'.csv').then(function(data) {
me.setScoreData( data );
me.draw( container );
});
}
/**
* To remove tooltip
*/
removeTooltip() {
let tooltip = d3.select('#tooltip>div');
if ( tooltip ) tooltip.remove(); //style('display', 'none');
d3.select('#tooltip').style("display", "none");
}
/**
* To draw tooltip using data
*/
drawTooltip( data ) {
let tooltip = d3.select('#tooltip');
tooltip
.style('display', 'block')
.style('left', d3.event.pageX + 20 + 'px')
.style('top', d3.event.pageY - 20 + 'px')
.selectAll()
.data([data]).enter()
.append('div')
.html(d => ' Player : '+ d.Player + '<br/> Runs : ' + d.Runs + '<br/> Year :'+ d.Year );
}
}
let runObj;
let avgObj;
/**
* DOM content load event handler
*/
window.addEventListener('DOMContentLoaded', (event) => {
console.log('DOM fully loaded and parsed');
runObj = new Player( 'Yuvraj Singh', 37 );
runObj.drawChart( 'run' );
avgObj = new Player( 'M S Dhoni', 36);
avgObj.drawChart( 'avg');
});
/**
* Window resize event handler
* @method onResizeHandler
*/
function onResizeHandler() {
console.log('resize event fired...');
runObj.drawChart( 'run' );
avgObj.drawChart( 'avg');
}
</script>
</body>
</html>
Raw
run.csv
Player Year Runs
MSD 2004 19
MSD 2005 895
MSD 2006 821
MSD 2007 1103
MSD 2008 1097
MSD 2009 1198
MSD 2010 600
MSD 2011 764
MSD 2012 524
MSD 2013 753
MSD 2014 418
MSD 2015 640
MSD 2016 278
MSD 2017 788
MSD 2018 275
MSD 2019 417
YUVI 2000 260
YUVI 2001 238
YUVI 2002 659
YUVI 2003 600
YUVI 2004 841
YUVI 2005 839
YUVI 2006 849
YUVI 2007 1287
YUVI 2008 893
YUVI 2009 783
YUVI 2010 349
YUVI 2011 453
YUVI 2012 2
YUVI 2013 276
YUVI 2017 372
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment