Skip to content

Instantly share code, notes, and snippets.

@MaciekLesiczka
Created April 24, 2016 11:01
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 MaciekLesiczka/29175563de2dc688144278eea3161b71 to your computer and use it in GitHub Desktop.
Save MaciekLesiczka/29175563de2dc688144278eea3161b71 to your computer and use it in GitHub Desktop.
DSP Projects barchart
var options = {
bar :{
color:'#6baed6',
padding:0.3
},
width:450,
height:350,
margin:{
left:100,
top:30
}
}
options.barWidth = options.width - options.margin.left
options.barHeight = options.height - options.margin.top
d3.csv('categories.csv',
function(d){
d.count = parseInt(d.count)
return d;
},
function(categories){
categories.sort(d3.descendingKey('count'));
var xScale =
d3.scale.linear()
.domain([0,d3.max(categories.map(function(x){return x.count}))])
.range([0,options.barWidth])
var yScale =
d3.scale.ordinal()
.domain(categories.map(function(x){return x.category}))
.rangeRoundBands([0,options.barHeight],options.bar.padding)
var yAxis = d3.svg.axis().scale(yScale).orient('left')
var chart = d3.select('#container')
.append('g')
.translate([options.margin.left,options.margin.top])
var bars = chart
.selectAll('rect')
.data(categories)
.enter()
.append('g')
.translate(function(x) {return[0,yScale(x.category)]})
bars.append('rect')
.attr('height',yScale.rangeBand())
.attr('width',function(d){return xScale(d.count); })
.style('fill',options.bar.color)
bars.append('text')
.classed('number',true)
.attr('y',yScale.rangeBand()/2)
.attr('x',function(d){return xScale(d.count)-3; })
.attr('dy','.35em')
.text(function(d){return d.count});
yAxis(chart)
d3.select('#container')
.append('text')
.classed('title',true)
.text('DSP \'16 Projects' )
.attr('y', options.margin.top/2)
.attr('dy','.35em')
})
category count
Web 121
Mobile 46
IOT 30
Game 50
Tool 53
Data 16
Windows 28
!function(t,n){"undefined"!=typeof module&&module.exports?module.exports=n(require("d3")):"function"==typeof define&&define.amd?define(["d3"],n):t.d3=n(t.d3)}(this,function(t){function n(t){if("string"==typeof t){var n,e={},r=t.split(o);for(t=r.shift();n=r.shift();)"."==n?e["class"]=e["class"]?e["class"]+" "+r.shift():r.shift():"#"==n&&(e.id=r.shift());return e.id||e["class"]?{tag:t,attr:e}:t}return t}function e(n){return"function"==typeof n?n:(n=t.ns.qualify(n)).local?function(){return this.ownerDocument.createElementNS(n.space,n.local)}:function(){return this.ownerDocument.createElementNS(this.namespaceURI,n)}}function r(t){return"function"==typeof t?t:function(){return this.querySelector(t)}}t.selection.prototype.translate=function(t){return this.attr("transform",function(n,e){return"translate("+["function"==typeof t?t.call(this,n,e):t]+")"})},t.transition.prototype.translate=function(t){return this.attr("transform",function(n,e){return"translate("+["function"==typeof t?t.call(this,n,e):t]+")"})},t.selection.prototype.tspans=function(t,n){return this.selectAll("tspan").data(t).enter().append("tspan").text(function(t){return t}).attr("x",0).attr("dy",function(t,e){return e?n||15:0})},t.selection.prototype.append=t.selection.enter.prototype.append=function(t){var r,o=n(t);return t=o.attr?o.tag:t,t=e(t),r=this.select(function(){return this.appendChild(t.apply(this,arguments))}),o.attr?r.attr(o.attr):r},t.selection.prototype.insert=t.selection.enter.prototype.insert=function(t,o){var i,u=n(t);return t=u.attr?u.tag:t,t=e(t),o=r(o),i=this.select(function(){return this.insertBefore(t.apply(this,arguments),o.apply(this,arguments)||null)}),u.attr?i.attr(u.attr):i};var o=/([\.#])/g;t.wordwrap=function(t,n){var e=t.split(" "),r=[],o=[],i=n||40,u=0;return e.forEach(function(t){u+t.length>i&&(r.push(o.join(" ")),o.length=0,u=0),u+=t.length,o.push(t)}),o.length&&r.push(o.join(" ")),r},t.ascendingKey=function(t){return"function"==typeof t?function(n,e){return t(n)<t(e)?-1:t(n)>t(e)?1:t(n)>=t(e)?0:NaN}:function(n,e){return n[t]<e[t]?-1:n[t]>e[t]?1:n[t]>=e[t]?0:NaN}},t.descendingKey=function(t){return"function"==typeof t?function(n,e){return t(e)<t(n)?-1:t(e)>t(n)?1:t(e)>=t(n)?0:NaN}:function(n,e){return e[t]<n[t]?-1:e[t]>n[t]?1:e[t]>=n[t]?0:NaN}},t.f=function(){for(var t=arguments,n=0,e=t.length;e>n;)("string"==typeof t[n]||"number"==typeof t[n])&&(t[n]=function(t){return function(n){return n[t]}}(t[n])),n++;return function(n){for(var e=0,r=t.length;e++<r;)n=t[e-1].call(this,n);return n}},"undefined"==typeof window||window.hasOwnProperty("ƒ")||(window.ƒ=t.f);var i=t.selection.prototype.on;return t.selection.prototype.on=function(t,n,e){if("string"==typeof t&&t.indexOf(" ")>-1){t=t.split(" ");for(var r=0;r<t.length;r++)i.apply(this,[t[r],n,e])}else i.apply(this,[t,n,e]);return this},t.selection.prototype.prop=t.selection.prototype.property,t});
<html>
<style>
#container *{
font-family:Calibri;
font-size:18px;
font-weight: 300;
fill:#333;
}
#container text.number{
text-anchor: end;
fill:white;
}
#container path.domain{
display: none
}
#container text.title{
font-size: 28px;
font-weight: 500;
}
</style>
<body>
<svg id='container' width='450' height='350'>
</svg>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="d3-jetpack.js" charset="utf-8"></script>
<script src='app.js'></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment