Skip to content

Instantly share code, notes, and snippets.

@laxmikanta415

laxmikanta415/.block

Created May 14, 2018 17:30
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 laxmikanta415/48e82768799d925a53c7f8ffa2563d53 to your computer and use it in GitHub Desktop.
Save laxmikanta415/48e82768799d925a53c7f8ffa2563d53 to your computer and use it in GitHub Desktop.
Download ZIP
bar chart with negative value
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<script>
var data = [
{
"date": "2018-04-24",
"institution": "FAS",
"value": "0.01886792452830188679245283019"
},
{
"date": "2018-04-24",
"institution": "NUGT",
"value": "0.03189420458965383119408790354"
},
{
"date": "2018-04-24",
"institution": "SPXL",
"value": "0.03901631591392764246866871601"
},
{
"date": "2018-04-24",
"institution": "TNA",
"value": "0.01653355751716407454112372145"
},
{
"date": "2018-04-24",
"institution": "SOXL",
"value": "0.02432194575566045283622689815"
},
{
"date": "2018-04-24",
"institution": "JNUG",
"value": "0.03142458100558659217877094972"
},
{
"date": "2018-04-24",
"institution": "TECL",
"value": "0.05218216318785578747628083491"
},
{
"date": "2018-04-24",
"institution": "ERX",
"value": "0.03156708004509582863585118377"
},
{
"date": "2018-04-24",
"institution": "LABU",
"value": "0.05291548933984073978936552787"
},
{
"date": "2018-04-24",
"institution": "TMV",
"value": "0.01569933396764985727878211227"
},
{
"date": "2018-04-24",
"institution": "TZA",
"value": "0.01821493624772313296903460838"
},
{
"date": "2018-04-24",
"institution": "DUST",
"value": "0.03702163061564059900166389351"
},
{
"date": "2018-04-24",
"institution": "EDC",
"value": "0.01588260681916271040138109625"
},
{
"date": "2018-04-24",
"institution": "YINN",
"value": "0.03460207612456747404844290657"
},
{
"date": "2018-04-24",
"institution": "SPXS",
"value": "0.04"
},
{
"date": "2018-04-24",
"institution": "KNOW",
"value": "0.01054955839057899901864573111"
},
{
"date": "2018-04-24",
"institution": "JDST",
"value": "0.03274807654369698165318603275"
},
{
"date": "2018-04-24",
"institution": "CURE",
"value": "0.02330316742081447963800904977"
},
{
"date": "2018-04-24",
"institution": "RUSL",
"value": "0.009114279037158214536106566955"
},
{
"date": "2018-04-24",
"institution": "QQQE",
"value": "0.01278246975576352430951837480"
},
{
"date": "2018-04-24",
"institution": "BRZU",
"value": "0.01460361613351877607788595271"
},
{
"date": "2018-04-24",
"institution": "FAZ",
"value": "0.01989150090415913200723327306"
},
{
"date": "2018-04-24",
"institution": "GUSH",
"value": "0.03508771929824561403508771930"
},
{
"date": "2018-04-24",
"institution": "CWEB",
"value": "0.02366381068951448388412892697"
},
{
"date": "2018-04-24",
"institution": "INDL",
"value": "0.004543823986607676671051058233"
},
{
"date": "2018-04-24",
"institution": "TMF",
"value": "0.01558152476349471341124095715"
},
{
"date": "2018-04-24",
"institution": "DFEN",
"value": "0.06876371616678858814923189466"
},
{
"date": "2018-04-24",
"institution": "CHAD",
"value": "0.02072213500784929356357927786"
},
{
"date": "2018-04-24",
"institution": "DRIP",
"value": "0.03376018626309662398137369034"
},
{
"date": "2018-04-24",
"institution": "PPLC",
"value": "0.005279244234509585996110030564"
},
{
"date": "2018-04-24",
"institution": "EURL",
"value": "0.01589783685170706280948657806"
},
{
"date": "2018-04-24",
"institution": "LABD",
"value": "0.05465116279069767441860465116"
},
{
"date": "2018-04-24",
"institution": "DRN",
"value": "0.01314965560425798371947401378"
},
{
"date": "2018-04-24",
"institution": "EDZ",
"value": "0.01591827037301021620337372297"
},
{
"date": "2018-04-24",
"institution": "CHAU",
"value": "0.04530138524897042306252339948"
},
{
"date": "2018-04-24",
"institution": "MIDU",
"value": "0.02118171683389074693422519509"
},
{
"date": "2018-04-24",
"institution": "NAIL",
"value": "-0.02864363942712721145745577085"
},
{
"date": "2018-04-24",
"institution": "ZMLP",
"value": "0.01211305518169582772543741588"
},
{
"date": "2018-04-24",
"institution": "YANG",
"value": "0.03473312401883830455259026688"
},
{
"date": "2018-04-24",
"institution": "DPST",
"value": "-0.02406586447118429385687143762"
},
{
"date": "2018-04-24",
"institution": "COM",
"value": "0.002016129032258064516129032258"
},
{
"date": "2018-04-24",
"institution": "ERY",
"value": "0.03240252897787144362486828240"
},
{
"date": "2018-04-24",
"institution": "SOXS",
"value": "0.02393038433647570703408266860"
},
{
"date": "2018-04-24",
"institution": "GASL",
"value": "-0.04227336777829967120713950211"
},
{
"date": "2018-04-24",
"institution": "DZK",
"value": "-0.01082011557850731587360137711"
},
{
"date": "2018-04-24",
"institution": "TECS",
"value": "-0.05153547476173667490292975644"
},
{
"date": "2018-04-24",
"institution": "JPNL",
"value": "0.0491267010173074"
},
{
"date": "2018-04-23",
"institution": "PPMC",
"value": "0.04"
},
{
"date": "2018-04-20",
"institution": "PPDM",
"value": "0.05"
},
{
"date": "2018-04-11",
"institution": "PPTB",
"value": "0.002787733970529669454400637196"
}
];
var margin = {top: 20, right: 20, bottom: 50, left: 70};
var width = 500 - margin.left - margin.right;
var height = 400 - margin.top - margin.bottom;
//add svg with margin !important
//this is svg is actually group
var svg = d3.select("body").append("svg")
.attr("width",width+margin.left+margin.right)
.attr("height",height+margin.top+margin.bottom)
.append("g") //add group to leave margin for axis
.attr("transform","translate("+margin.left+","+margin.top+")");
var dataset = data;
var maxHeight=d3.max(dataset,function(d){return Math.abs(+d.value)});
var minHeight=d3.min(dataset,function(d){return Math.abs(+d.value)})
//set y scale
var yScale = d3.scaleLinear().rangeRound([0,height]).domain([maxHeight,-maxHeight]);//show negative
//add x axis
var xScale = d3.scaleBand().rangeRound([0,width]).padding(0.1);//scaleBand is used for bar chart
xScale.domain(
dataset.map(function(d) { return d.institution; }));
//value in this array must be unique
/*if domain is specified, sets the domain to the specified array of values. The first element in domain will be mapped to the first band, the second domain value to the second band, and so on. Domain values are stored internally in a map from stringified value to index; the resulting index is then used to determine the band. Thus, a band scale’s values must be coercible to a string, and the stringified version of the domain value uniquely identifies the corresponding band. If domain is not specified, this method returns the current domain.*/
var barpadding = 1;
var bars = svg.selectAll("rect").data(dataset).enter().append("rect");
bars
.attr("x", function(d) { return xScale(d.institution); })
.attr("y",function(d){
if(+d.value<0){
return height/2;
}
else{
return yScale(+d.value);
}
})//for bottom to top
.attr("width", xScale.bandwidth()/*width/dataset.length-barpadding*/)
.attr("height", function(d){
return height/2 -yScale(Math.abs(+d.value));
});
bars.attr("fill",function(d){
if(+d.value>=0){
return "green";
}
else{
return "orange";
}
});
//add x and y axis
var yAxis = d3.axisLeft(yScale);
svg.append("g").call(yAxis);
var xAxis = d3.axisBottom(xScale);/*.tickFormat("");remove tick label*/
svg.append("g").call(xAxis).attr("transform", "translate(0,"+height/2+")")
.selectAll('text')
.attr('transform', 'translate(-11,20) rotate(-90)')
;
//add label for x axis and y axis
svg.append("text").text("Y Label")
.attr("x",0-height/2)
.attr("y",0-margin.left)
.attr("dy","1em")
.style("text-anchor", "middle")
.attr("transform","rotate(-90)");
svg.append("text").text("X Label")
.attr("x",width/2)
.attr("y",height+margin.bottom)
.style("text-anchor", "middle");
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment