This simple bar chart is constructed from a TSV file storing the frequency of letters in the English language. The chart employs conventional margins and a number of D3 features:
forked from mbostock's block: Bar Chart
forked from anaeliaovalle's block: Bar Chart
xxxxxxxxxx<meta charset="utf-8"><style> body { font: 10px avenir;} /* .bar { fill: steelblue;} */.bar:hover { fill: brown;}.axis--x path { display: none;} .axis--y path { display: none;}</style><body><svg width="960" height="500"></svg><script src="https://d3js.org/d3.v4.min.js"></script><script>var svg = d3.select("svg"), margin = {top: 55, right: 60, bottom: 111, left: 94}, width = +svg.attr("width") - margin.left - margin.right, height = +svg.attr("height") - margin.top - margin.bottom;var x = d3.scaleLinear().rangeRound([0, width]), y = d3.scaleBand().rangeRound([height, 0]).padding(0.1);// color = d3.scale.category20(); svg.append("text") .attr("x", 0) .attr("y", 11) .attr("dy", "0.71em") .attr("fill", "#000") .text("SFPD Incidents in Dec 2016") .style("font", "23px avenir") .style("fill", "#000000"); svg.append("text") .attr("x", 33) .attr("y", 50) .attr("dy", "0.71em") .attr("fill", "#000") .text("Category") .style("font", "12px avenir") .style("fill", "#000000") .style("font-weight", "bold"); svg.append("text") .attr("x", 33) .attr("y", 450) .attr("dy", "0em") .style("font", "12px avenir") .style("fill", "#000000") .text("This visualization depicts the number of SFPD incidents that occurred in December 2016. Larceny was the most common indicident while liquor law violations "); svg.append("text") .attr("x", 33) .attr("y", 450) .attr("dy", "1em") .style("font", "12px avenir") .style("fill", "#000000") .text("and suicide were observed less frequently."); svg.append("text") .attr("x", 33) .attr("y", 450) .attr("dy", "3em") .style("font", "12px avenir") .style("fill", "#000000") .text("By Anaelia Ovalle") .style("font-weight", "bold"); var chart = svg.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")");d3.csv("data.csv", function(d) { d.count = +d.count; return d;}, function(error, data) { if (error) throw error; x.domain([0, 4000]) y.domain(data.map(function(d) {return d.category; })); chart.append("g") .attr("class", "axis axis--x") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x)); chart.append("g") .attr("class", "axis axis--y") .call(d3.axisLeft(y)) chart.selectAll(".bar") .data(data) .enter().append("rect") .attr("class", "bar") .attr("y", function(d) { return y(d.category); }) .attr("width", function(d) { return x(d.count);} ) .attr("height", 13) .style("fill","#0396ec"); chart.append("text") .attr("x", 350) .attr("y", 365) .attr("dy", "0.71em") .attr("fill", "#000") .text("Number of Records") .style("font", "12px avenir") .style("fill", "#000000") .style("font-weight", "bold");});</script> https://d3js.org/d3.v4.min.js