diff --git a/examples/bar/app.css b/examples/bar/app.css index 8a7bb0e..323be10 100644 --- a/examples/bar/app.css +++ b/examples/bar/app.css @@ -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 */ } diff --git a/examples/bar/app.js b/examples/bar/app.js index 3eb2c62..02ba664 100644 --- a/examples/bar/app.js +++ b/examples/bar/app.js @@ -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 tag to it with id=left-axis + .call(leftAxis); // create a left axis within that + 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 tag to it with id=bottom-axis + .call(bottomAxis) // create a bottom axis within that + .attr('transform', 'translate(0,'+HEIGHT+')'); //move it to the bottom of the svg + });