Skip to content

Instantly share code, notes, and snippets.

@caravinden

caravinden/index.html

Created June 13, 2019 07:07
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 caravinden/6fb59cbf2e2cea510339e7b487dccd22 to your computer and use it in GitHub Desktop.
Save caravinden/6fb59cbf2e2cea510339e7b487dccd22 to your computer and use it in GitHub Desktop.
Download ZIP
Sub axis implementation
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: geometricPrecision;
}
.x.axis path {
display: none;
}
.grouped-rect {
stroke-width: 0.5;
fill-opacity: 0.8;
stroke: gray;
cursor: pointer;
}
#chartPanel, #legendDiv {
float: left;
}
#legendPanel, #legendText {
float: right;
}
</style>
<body>
<div id="chartPanel"></div>
<div id="legendPanel">
<div id="legendDiv"></div>
<div id="legendText"></div>
</div>
</body>
<script src="//d3js.org/d3.v5.min.js"></script>
<script>
let margin = {
top: 20,
right: 20,
bottom: 30,
left: 40
},
xScale,
groupScale,
yScale,
xAxis,
yAxis,
groupAxis,
svg,
svgGroup,
svgGroupAxis,
color,
data = [{"categorie":"Student","values":[{"value":0,"rate":"Not at all"},{"value":4,"rate":"Not very much"},{"value":12,"rate":"Medium"},{"value":6,"rate":"Very much"},{"value":0,"rate":"Tremendously"}]},{"categorie":"Liberal Profession","values":[{"value":1,"rate":"Not at all"},{"value":21,"rate":"Not very much"},{"value":13,"rate":"Medium"},{"value":18,"rate":"Very much"},{"value":6,"rate":"Tremendously"}]},{"categorie":"Salaried Staff","values":[{"value":3,"rate":"Not at all"},{"value":22,"rate":"Not very much"},{"value":6,"rate":"Medium"},{"value":15,"rate":"Very much"},{"value":3,"rate":"Tremendously"}]},{"categorie":"Employee","values":[{"value":12,"rate":"Not at all"},{"value":7,"rate":"Not very much"},{"value":18,"rate":"Medium"},{"value":13,"rate":"Very much"},{"value":6,"rate":"Tremendously"}]},{"categorie":"Craftsman","values":[{"value":6,"rate":"Not at all"},{"value":15,"rate":"Not very much"},{"value":9,"rate":"Medium"},{"value":12,"rate":"Very much"},{"value":3,"rate":"Tremendously"}]},{"categorie":"Inactive","values":[{"value":6,"rate":"Not at all"},{"value":6,"rate":"Not very much"},{"value":6,"rate":"Medium"},{"value":2,"rate":"Very much"},{"value":3,"rate":"Tremendously"}]}],
categorie,
rateNames,
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
xScale = d3.scaleBand()
.range( [30, width] );
groupScale = d3.scaleBand();
yScale = d3.scaleLinear()
.range( [(height-60), 10]);
xAxis = d3.axisBottom( xScale )
.tickSize(10);
groupAxis = d3.axisBottom (groupScale)
.tickSizeOuter(20);
yAxis = d3.axisLeft( yScale )
.tickSizeInner(4)
.tickSizeOuter(8);
svg = d3.select('#chartPanel').append('svg')
.attr('width', width + margin.left + margin.right )
.attr('height', height + margin.top + margin.bottom )
.append('g')
.attr('transform', 'translate('+ margin.left + ',' + margin.right +')' );
categorie = data.map( (d) => { return d.categorie; } );
rateNames = data[0].values.map( (d) => { return d.rate; });
color = d3.scaleOrdinal()
.range(["#ca0020","#f4a582","#d5d5d5","#92c5de","#0571b0"]);
xScale.domain( categorie );
groupScale.domain( rateNames )
.range( [10, xScale.bandwidth() ] )
.paddingInner(0.2)
.paddingOuter(1);
yScale.domain( [0, d3.max(data, (categorie) => { return d3.max (categorie.values, (d)=> { return d.value; } ) } )]);
svg.append('g')
.attr('class', 'x-axis')
.attr('transform', 'translate(0,' + (height-60) + ')' )
.call(xAxis);
svgGroupAxis = svg.selectAll('.x-axis-group')
.data(categorie)
.enter()
.append('g')
.attr('class', 'x-axis-group')
// .attr('transform', 'translate(0,' + height + ')' )
svgGroupAxis
.attr('transform', (d)=> { return 'translate('+ xScale(d)+ ','+ (height-30) + ')'} )
.call(groupAxis)
.selectAll("text")
.attr("y", 0)
.attr("x", 9)
.attr("dy", ".35em")
.attr("transform", "rotate(90)")
.style("text-anchor", "start");
svg.append('g')
.attr('class', 'y-axis')
.attr('transform', 'translate(30, 0)' )
.call(yAxis)
svgGroup = svg.selectAll('bar')
.data(data)
.enter()
.append('g')
.attr('class', 'g')
.attr('transform', (d) => { return "translate(" + xScale(d.categorie) + ", 0)" });
svgGroup.selectAll('rect')
.data (function(d){ return d.values })
.enter()
.append('rect')
.attr('class', 'grouped-rect')
.attr('width', groupScale.bandwidth() )
.attr('height', (d)=> { return ((height-60) - yScale(d.value)); })
.attr('x', (d)=> { return groupScale(d.rate); })
.attr('y', (d)=> { return yScale(d.value); })
.style('fill', (d)=> { return color(d.rate); })
.on("mouseover", function(d) {
d3.select(this).style("fill", d3.rgb(color(d.rate)).darker(2));
})
.on("mouseout", function(d) {
d3.select(this).style("fill", color(d.rate));
})
.append('title')
.text( (d)=> { return 'Rate = ' + d.rate + '\nValue = ' + d.value } )
let legendPanel = d3.select('#legendDiv')
.selectAll('div')
.data(rateNames);
legendPanel
.enter()
.append('div')
.style('width', '50px')
.style('height', '50px')
.style('margin', '3px')
.style('background-color', (d)=> { return color(d); })
legendPanel.exit();
let legendText = d3.select('#legendText')
.selectAll('div')
.data(rateNames);
legendText
.enter()
.append('div')
.style('width', '200px')
.style('height', '50px')
.append('div')
.style('padding', '20px 5px 10px 5px')
.style('font-weight' , 'bold')
.text( function(d) { return d; } )
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment