# # # {{ escape(main_title) }} # # # # # # # #

#
#

# #

# {% block content %} # {% end block %} #

# # # # {{ escape(main_title) }} # #

# {% block content %} # # {% end block %} #

# {% extends "template.html" %} # {% block content %} # # {% end block %} # {% extends "template.html" %} # {% block content %} # # {% end block %} # {% extends "template.html" %} # {% block content %} # # # # {% end block %} # # // Anything past the two slashes will be ignored # // Create Global Variable # var dataset; # // Add data to variable # dataset = [1,2,3,4,5,6,7,8,9,10] # // Print to console # console.log(dataset) # // Create Global Variable # var dataset; # # // Load csv file # d3.csv("{{ static_url('data/SingleColumn.csv') }}", function(data) { # # dataset = data; # # // Call function # Graph(dataset); # # }); # # // Create function # function Graph(input) { # # // Print to console # console.log(dataset) # # }; # // Convert from string to numeric # dataset.forEach(function(d) { # d.Revenue = +d.Revenue; # }); # //Create SVG element # var svg = d3.select("body") # .append("svg") # .attr("width", 1200) # .attr("height", 800); # If you go to "inspect element" you will see: # # //Add rectangles # svg.selectAll("rect") # .data(input) # .enter() # .append("rect") # .attr("fill", "red") # .attr("x", 0) # .attr("y", 0) # .attr("width", 20) # .attr("height", 50); # // Declare Variables # var margin = {top: 40, right: 40, bottom: 40, left:40}, # w = 960 - margin.left - margin.right, # h = 500 - margin.top - margin.bottom; # //Create X Scale # var xScale = d3.scale.linear() # .domain([0, input.length]) # .range([0, w]); # //Create SVG element # var svg = d3.select("body") # .append("svg") # .attr("width", w + margin.left + margin.right) # .attr("height", h + margin.top + margin.bottom) # .append('g') # .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); # .attr("x", function(d, i) { return xScale(i); }) # //Create Y Scale # var yScale = d3.scale.linear() # .domain([0,d3.max(input, function(d) { return d.Revenue; })]) # .range([h, 0]); # .attr("height", function(d) { return h - yScale(d.Revenue) }); # .attr("y", function(d) { return yScale(d.Revenue) }) # //Create Y Axis # var yAxis = d3.svg.axis() # .scale(yScale) # .orient('left'); # //Draw Y axis # svg.append("g") # .attr("class", "y axis") # .call(yAxis); # //Create X Scale # var xScale = d3.scale.ordinal() # .domain(input.map(function (d){ return d.State;})) # .rangeRoundBands([0, w], 0.5); # //Create X Axis # var xAxis = d3.svg.axis() # .scale(xScale) # .orient("bottom"); # //Draw X axis # svg.append("g") # .attr("class", "x axis") # .attr("transform", "translate(0," + h + ")") # .call(xAxis); # //Add rectangles # svg.selectAll("rect") # .data(input) # .enter() # .append("rect") # //Add rectangles # svg.selectAll(".bar") # .data(input) # .enter() # .append("rect") # .attr("class", "bar") # //Create color scale # var cScale = d3.scale.linear() # .domain([0,d3.max(input, function(d) { return d.CustomerCount; })]) # .range(["blue","red"]); # .attr("fill",function(d) {return cScale(d.CustomerCount);}) # // Add Legend # var legend = svg.append("g") # .attr("class", "legend") # .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; }); # legend.selectAll('rect') # .data(input) # .enter() # .append('rect') # .attr("x", d3.max(xScale.range()) + xScale.rangeBand() + 40 ) # .attr("y", function(d, i){ return i * 25;}) # .attr("width", 18) # .attr("height", 18) # .attr("fill",function(d) {return cScale(d.CustomerCount);}); # legend.selectAll('text') # .data(input) # .enter() # .append('text') # .attr("x", d3.max(xScale.range()) + xScale.rangeBand() + 40 ) # .attr("y", function(d, i){ return (i * 25) + 8;}) # .attr("dy", ".35em") # .style("text-anchor", "end") # .text(function(d) { return d.State; }); # //Draw title # svg.append("text") # .attr("x", w / 2 ) # .attr("y", yScale(d3.max(input, function(d) { return d.CustomerCount; })) - 40 ) # .style("text-anchor", "middle") # .text("Title of Graph"); # //Create X axis label # svg.append("text") # .attr("x", w / 2 ) # .attr("y", yScale(0) + 40 ) # .style("text-anchor", "middle") # .text("State"); # //Create Y axis label # svg.append("text") # .attr("transform", "rotate(-90)") # .attr("y", xScale(0) - 80 ) # .attr("x",0 - (h / 2)) # .attr("dy", "1em") # .style("text-anchor", "middle") # .text("Revenue");

{{ escape(page_title) }}

{{ escape(page_title) }}