Built with blockbuilder.org
Análisis mediante el framework de Tamara
What : The source of data is a json file, which can be taken as a table with columns like code and note; these data are static. The amount of data to display are few, exactly 25 rows.
Why : This grapich have as action present the exact information to estudents, this isn't interactive and the principal function is search fast of each grade by student and may be compare with the rest of course and see the trend of the all grades.
How : I try keep the graphic simple and show only the relevant information based in bar diagram with the size of bar how principal element to recognize the grades and obviously keep align all data of graphic
xxxxxxxxxx<meta charset="utf-8"><style> /* set the CSS */.bar { fill: steelblue; }</style><body> <!-- load the d3.js library --> <script src="//d3js.org/d3.v4.min.js"></script><script>// set the dimensions and margins of the graphvar margin = {top: 20, right: 20, bottom: 30, left: 40}, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom;// set the rangesvar x = d3.scaleBand() .range([0, width]) .padding(0.1);var y = d3.scaleLinear() .range([height, 0]); // append the svg object to the body of the page// append a 'group' element to 'svg'// moves the 'group' element to the top left marginvar svg = d3.select("body").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // get the datad3.json("grades.json", function(error, data) { if (error) throw error; // format the data data.forEach(function(d) { d.grade = +d.grade; }); // Scale the range of the data in the domains x.domain(data.map(function(d) { return d.code; })); y.domain([0, d3.max(data, function(d) { return d.grade; })]); // append the rectangles for the bar chart svg.selectAll(".bar") .data(data) .enter().append("rect") .attr("class", "bar") .attr("x", function(d) { return x(d.code); }) .attr("width", x.bandwidth()) .attr("y", function(d) { return y(d.grade); }) .attr("height", function(d) { return height - y(d.grade); }); // add the x Axis svg.append("g") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x)); // add the y Axis svg.append("g") .call(d3.axisLeft(y));});</script></body> https://d3js.org/d3.v4.min.js