JSFiddle - React, Tailwind, and code Playground

HTML

<div class="span5" id="LPUgraph"></div>

JavaScript

var width=920,
		height=300,
		radius=100,
		padding=20;
var margin = {
    top: 20,
    right: 20,
    bottom: 30,
    left: 50
};
var xLPU = d3.scale.ordinal();
var yLPU = d3.scale.linear();
var xLPUAxis = d3.svg.axis()
    .scale(xLPU)
    .orient("bottom");

var yLPUAxis = d3.svg.axis()
    .scale(yLPU)
    .orient("left")
    .ticks(10, "чел.");
var LPUdivision = d3.select("#LPUgraph").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 + ")");
var LPUdivisionJSON = '';
data = '[{"lpu":"Some very Long Name (VERY VERY LONG) #1","amount":"1"},{"lpu":"Some very Long Name (VERY VERY LONG) #2","amount":"0"},{"lpu":"Some very Long Name (VERY VERY LONG) #3","amount":"0"},{"lpu":"Some very Long Name (VERY VERY LONG)","amount":"1"}]';
LPUdivisionJSON = data;
root2 = JSON.parse(LPUdivisionJSON);
xLPU.domain(root2.map(function (d) {
    return d.lpu;
}))
    .rangeBands([0, width]);
yLPU.domain([0, d3.max(root2, function (d) {
    return d.amount;
})])
    .range([height, 0]);
LPUdivision.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xLPUAxis);
LPUdivision.append("g")
    .attr("class", "y axis")
    .call(yLPUAxis)
    .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text("Численность состава");
LPUdivision.selectAll(".bar")
    .data(root2)
    .enter()
    .append("rect")
    .attr("class", "bar")
    .attr("x", function (d) {
    return xLPU(d.lpu)
})
    .attr("width", xLPU.rangeBand() - 5)
    .attr("y", function (d) {
    return yLPU(d.amount);
})
    .attr("height", function (d) {
    return height - yLPU(d.amount);
})
    .attr("fill", "steelblue");