mahuntington
/
d3-notes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

commenting bar graph

Browse Source
master
Matt Huntington 7 years ago
parent 99bd6035d1
commit cd81b0482b
2 changed files with 61 additions and 51 deletions
Show Stats Download Patch File Download Diff File

10
examples/bar/app.css
Unescape View File

@ -1,12 +1,12 @@
svg {
overflow: visible;
margin-left: 20px; /* add this line */
overflow: visible; /* show axes that extend beyond svg */
margin-left: 20px; /* move bar to the right to see left axis */
}
rect {
stroke: white;
stroke: white; /* space between bars */
stroke-width:1px;
}
#bottom-axis text {
transform:rotate(45deg);
text-anchor: start;
transform:rotate(45deg); /* rotate bottom axis text so it's visble */
text-anchor: start; /* point of rotation should be beginning of text, not middle */
}

102
examples/bar/app.js
Unescape View File

@ -1,65 +1,75 @@
var WIDTH = 800;
var HEIGHT = 600;
// set width and height of svg
d3.select('svg')
.style('width', WIDTH)
.style('height', HEIGHT);
// fetch data
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;
//once data is retrieved...
d3.select('svg').selectAll('rect') //select rectangles within svg (even if none exist)
.data(data) //attach data to the rectangles
.enter() //find the data elements that are not attached to rectangles
.append('rect'); //append rectangles for each data not attached to a rectangle
var yScale = d3.scaleLinear(); //create a linear scale
yScale.range([HEIGHT, 0]); //set its visual range to 600 -> 0 (remember bottom of svg is 600px down from top)
var yMin = d3.min(data, function(datum, index){ //get the minimum y data value...
return datum.count; //by looking at the count property of each datum
})
var yMax = d3.max(data, function(datum, index){
return datum.count;
var yMax = d3.max(data, function(datum, index){ //get the maximum y data value...
return datum.count; //by looking at the count property of each datum
})
yScale.domain([yMin-1, yMax]);
d3.selectAll('rect')
.attr('height', function(datum, index){
yScale.domain([yMin-1, yMax]); //set the domain of yScale from yMin and yMax
d3.selectAll('rect') //find all rectangles
.attr('height', function(datum, index){ //set the height of each rectangle...
//...by getting the count property of each datum
//converting it to a visual value, using yScale
//(remember, when using yScale as it is set up, a large data value will give you a small visual value and vice versa)
//then subtract that value from HEIGHT
//this will make a large bar for a large data value
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);
var xScale = d3.scaleLinear(); //create the xScale
xScale.range([0, WIDTH]); //set the range to 0->800
xScale.domain([0, data.length]); //set the domain from 0 to the number of data elements retrieved
d3.selectAll('rect') //select all rectangles
.attr('x', function(datum, index){ //set the x position of each rectangle...
return xScale(index);//by converting the index of the elemnt in the array to a point between 0->800
});
d3.selectAll('rect')
.attr('y', function(datum, index){
d3.selectAll('rect') //select all rectangles
.attr('y', function(datum, index){ //set the y position of each rectangle...
//by converting the count property of the datum to a visual value
//(remember, when using yScale as it is set up, a large data value will give you a small visual value and vice versa)
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)
d3.selectAll('rect') //select all rectangles
.attr('width', WIDTH/data.length); //set the width of all rectangles to be the width of the SVG divided by the number of data elements
var yDomain = d3.extent(data, function(datum, index){ //set the y domain by getting the min/max with d3.extent
return datum.count; //... and examining the count property of each datum
})
var colorScale = d3.scaleLinear();//create a linear scale
colorScale.domain(yDomain) //the domain is the yDomain
colorScale.range(['#00cc00', 'blue']) //the visual range goes from green->blue
d3.selectAll('rect') //select all rectangles
.attr('fill', function(datum, index){ //set the fill of each rectangle
return colorScale(datum.count) //by converting the count property of the datum to a color
})
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){
var leftAxis = d3.axisLeft(yScale); //create a left axis generator using the yScale
d3.select('svg') //select the svg
.append('g').attr('id', 'left-axis') //append a <g> tag to it with id=left-axis
.call(leftAxis); // create a left axis within that <g>
var skillScale = d3.scaleBand(); //create a scale band that will map skills to horizontal positions
var skillDomain = data.map(function(skill){ //create an array of skill strings
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+')');
skillScale.range([0, WIDTH]); //set the range of the skillScale to 0->800
skillScale.domain(skillDomain); //set the domain to be the array of skill strings
var bottomAxis = d3.axisBottom(skillScale); //create a bottom axis generator that uses the skillScale
d3.select('svg') //select the svg
.append('g').attr('id', 'bottom-axis') //append a <g> tag to it with id=bottom-axis
.call(bottomAxis) // create a bottom axis within that <g>
.attr('transform', 'translate(0,'+HEIGHT+')'); //move it to the bottom of the svg
});

Write Preview
Loading…
Cancel
Save