Skip to content

Instantly share code, notes, and snippets.

View caravinden's full-sized avatar
🎯
Focusing

Aravind Cheekkallur caravinden

🎯
Focusing
View GitHub Profile
@caravinden
caravinden / index.html
Last active July 30, 2021 07:29
Horizontal stacked bar chart implementation in d3.v4
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.axis text {
font: 10px sans-serif;
}
.axis line,
.axis path {
fill: none;
stroke: #000;
@caravinden
caravinden / avg.csv
Last active August 13, 2019 17:42
Responsive Line Chart using d3.v5. ECMA6 STD.
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
@caravinden
caravinden / index.html
Created June 13, 2019 07:07
Sub axis implementation
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
@caravinden
caravinden / index.html
Last active December 19, 2018 11:09
D3.v4 Sunburst chart with line focus on over
<!DOCTYPE html>
<meta charset="utf-8">
<style>
path { stroke: #fff;}
</style>
<body>
<h2 style='margin-left: 20%'>D3.v4 Sunburst chart with line focus on over</h2>
<div id='sunburst-chart-div'></div>
</body>
<script src="//d3js.org/d3.v4.min.js"></script>
@caravinden
caravinden / index.html
Last active December 19, 2018 11:07
OOP approach in d3.v4
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.bar {
fill: #74BBFB;
}
</style>
<body>
<div id="barChart"></div>
</body>
@caravinden
caravinden / index.html
Last active May 10, 2018 14:11
Bar chart implementation using d3.v5
<!DOCTYPE html>
<svg width="960" height="500"></svg>
<style>
.bar {
fill: steelblue;
}
.bar:hover {
fill: brown;
}
@caravinden
caravinden / index.html
Last active April 5, 2018 14:25
Horizontal Bar chart d3.v4
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.bar { fill: steelblue; }
</style>
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
@caravinden
caravinden / README.md
Last active June 8, 2017 23:13
D3 Min-Max slider

Min max slider example

@caravinden
caravinden / index.html
Last active May 24, 2017 01:39
Stacked Bar Chart - d3.v4 implementation
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.axis text {
font: 10px sans-serif;
}
.axis line,
.axis path {
fill: none;
stroke: #000;
@caravinden
caravinden / index.html
Last active February 7, 2017 11:04
Navigator Implementation using d3.js
<html>
<head>
<title>Navigator</title>
</head>
<script src="//d3js.org/d3.v3.min.js"></script>
<style>
.navi-text {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 10px;
font-weight: 200;