D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
fergusie
Full window
Github gist
TeamD_Assignment_3
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>CSS Example</title> <link href="https://fonts.google.com/?selection.family=Black+Ops+One" rel="stylesheet"> <style> .my-text { font-size: 1.5em; font-family: 'Black Ops One', cursive; fill:#fe2323; } <meta charset="utf-8"> .bar { fill: #71df3e; } .bar:hover { fill: white; } .axis--x path { display: none; } body { background-color: steelblue; } .axisx text{ fill: white; } .axisy text{ fill: white; } .axisx line{ stroke: white; } .axisy line{ stroke: white; } .axisx path{ stroke: white; } .axisy path{ stroke: white; } </style> </head> <body> <svg width="1200" height="500"> <text class="my-text" x="72" y="20">No. of Senseless War Deaths / per Hour 1862 to 1945</text> </svg> </body> <meta charset="utf-8"> <style> .bar { fill: #71df3e; } .bar:hover { fill: white; } .axis--x path { display: none; } body { background-color: black; } .axisx text{ fill: white; } .axisy text{ fill: white; } .axisx line{ stroke: white; } .axisy line{ stroke: white; } .axisx path{ stroke: white; } .axisy path{ stroke: white; } </style> <svg width="960" height="500"></svg> <script src="https://d3js.org/d3.v4.min.js"></script> <script> var svg = d3.select("svg"), margin = {top: 20, right: 20, bottom: 30, left: 40}, width = +svg.attr("width") - margin.left - margin.right, height = +svg.attr("height") - margin.top - margin.bottom; svg.append("text") .attr("transform", "translate(100,0)") .attr("x", 50) .attr("y", 50) .attr("font-size", "20px") .text("War Deaths Per Hour") var x = d3.scaleBand().rangeRound([0, width]).padding(0.2), y = d3.scaleLinear().rangeRound([height, 0]); var g = svg.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); d3.tsv("WarDeaths_Data.tsv", function(d) { d.deaths_per_hour = +d.deaths_per_hour; return d; }, function(error, data) { if (error) throw error; x.domain(data.map(function(d) { return d.war; })); y.domain([0, d3.max(data, function(d) { return d.deaths_per_hour; })]); g.select(".x.axis") .selectAll("text") .attr("transform"," translate(0,15) rotate(-65)") .style("font-size","10px"); g.append("g") .attr("class", "axisx") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x)); g.append("g") .attr("class", "axisy") .call(d3.axisLeft(y).ticks(10)) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", "0.71em") .attr("text-anchor", "end") .text("No. of Deaths per Hour"); g.selectAll(".bar") .data(data) .enter().append("rect") .attr("class", "bar") .attr("x", function(d) { return x(d.war); }) .attr("y", function(d) { return y(d.deaths_per_hour); }) .attr("width", x.bandwidth()) .attr("height", function(d) { return height - y(d.deaths_per_hour);}); //adding labels to the bars g.selectAll(".text") .data(data) .enter().append("text") .attr("x", function(d) { return x(d.war)+54; }) .attr("y", function(d) { return y(d.deaths_per_hour)+0.5; }) .attr("dy", ".55em") .attr("text-anchor", "end") .attr("font-family", "sans-serif") .attr("font-size", "22px") .attr("fill", "red") .text(function(d) {return d.deaths_per_hour; }); }); </script>
https://d3js.org/d3.v4.min.js