You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
66 lines
1.9 KiB
66 lines
1.9 KiB
var WIDTH = 800;
|
|
var HEIGHT = 600;
|
|
|
|
d3.select('svg')
|
|
.style('width', WIDTH)
|
|
.style('height', HEIGHT);
|
|
|
|
d3.json('data.json').then(function(data){
|
|
d3.select('svg').selectAll('rect')
|
|
.data(data)
|
|
.enter()
|
|
.append('rect');
|
|
var yScale = d3.scaleLinear();
|
|
yScale.range([HEIGHT, 0]);
|
|
var yMin = d3.min(data, function(datum, index){
|
|
return datum.count;
|
|
})
|
|
var yMax = d3.max(data, function(datum, index){
|
|
return datum.count;
|
|
})
|
|
yScale.domain([yMin-1, yMax]);
|
|
d3.selectAll('rect')
|
|
.attr('height', function(datum, index){
|
|
return HEIGHT-yScale(datum.count);
|
|
});
|
|
var xScale = d3.scaleLinear();
|
|
xScale.range([0, WIDTH]);
|
|
xScale.domain([0, data.length]);
|
|
d3.selectAll('rect')
|
|
.attr('x', function(datum, index){
|
|
return xScale(index);
|
|
});
|
|
d3.selectAll('rect')
|
|
.attr('y', function(datum, index){
|
|
return yScale(datum.count);
|
|
});
|
|
d3.selectAll('rect')
|
|
.attr('width', WIDTH/data.length);
|
|
var yDomain = d3.extent(data, function(datum, index){
|
|
return datum.count;
|
|
})
|
|
var colorScale = d3.scaleLinear();
|
|
colorScale.domain(yDomain)
|
|
colorScale.range(['#00cc00', 'blue'])
|
|
d3.selectAll('rect')
|
|
.attr('fill', function(datum, index){
|
|
return colorScale(datum.count)
|
|
})
|
|
var leftAxis = d3.axisLeft(yScale);
|
|
d3.select('svg')
|
|
.append('g').attr('id', 'left-axis')
|
|
.call(leftAxis);
|
|
var skillScale = d3.scaleBand();
|
|
var skillDomain = data.map(function(skill){
|
|
return skill.name
|
|
});
|
|
skillScale.range([0, WIDTH]);
|
|
skillScale.domain(skillDomain);
|
|
var bottomAxis = d3.axisBottom(skillScale);
|
|
d3.select('svg')
|
|
.append('g').attr('id', 'bottom-axis')
|
|
.call(bottomAxis)
|
|
.attr('transform', 'translate(0,'+HEIGHT+')');
|
|
|
|
});
|