score:2

Accepted answer

Here you go.

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<style>

body {
  font: 10px sans-serif;
 margin:auto;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.bar1 {
  fill: #00FF66;

}

.bar1:hover {
  fill: black ;
}

.x.axis path {
  display: none;
}

.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
}

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}

/* Style northward tooltips differently */
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}
</style>
<body>

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<script>

var margin = {top: 80, right: 90, bottom: 30, left: 90},
    width = 1000 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var formatPercent = d3.format(".0%");
//יצירת X
//יאכלס את סוגי הרכב השונים
var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1);
//יצירת ציר y
//יציג בר עבור מחיר הרכב המוצע לדילרים
var y = d3.scale.linear()
    .range([height, 0]);


var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

//יצירת ציר הY
//והצמדתו לצד שמאל
var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left").ticks(4)

var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-10, 0])
  .html(function(d) {
    return "<strong></strong>"+d.Type+"<br><strong></strong> <span style='color:#00FF66'>" + d.Sum + "</span>";
  })




var 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 + ")");

svg.call(tip);
//קליטת הטבלה והגדרת הטווחים על הצירים
d3.csv("Targil2.csv", type, function(error, data) {
  window.dataSet = data;
  data.sort(function(x,y){
    var a = x.Sum; 
    var b = y.Sum; 
    return a > b ? -1 : a < b ? 1 : 0
  })
  x.domain(data.map(function(d) { return d.Type; }));
  y.domain([0, d3.max(data, function(d) { return d.Sum*2; })]);


  var stack = d3.layout.stack()
  .x(function(d) { return d.Type }) // tell d3 to use Type as x value
  .y(function(d) { return d.Sum }); // tell d3 to use Sum as y value
  // var stackData = stack(data);

 //הוספה של 2 הצירים
  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  svg.append("g")
  .attr("class", "y axis axisLeft")
  .attr("transform", "translate(0,0)")
  .call(yAxis)
.append("text")
  .attr("y", 6)
  .attr("dy", "-2em")
  .style("text-anchor", "end")
  .style("text-anchor", "end")
  .text("Price");



  var stackSoFar = 0;

//הוספת בר הנתונים
  svg.selectAll(".bar")
      .data(data)
    .enter().append("rect")
      .attr("x", function(d) { return x(d.Type); })
      .attr("width", x.rangeBand())
      .attr("y", function(d){
        d3.select(this)
          .attr("height", function(d2){
            var thisHeight = height - y(d.Sum);
            stackSoFar += thisHeight
            return thisHeight
          });
        return (height - stackSoFar)
      })
      .style("fill", function(d){
         if(d["Color"] == "green"){  return "green";}

         else return "#0066FF";})

      .on('mouseover', tip.show)
      .on('mouseout', tip.hide)

});

function type(d) {
  d.Sum = +d.Sum;

  return d;
}

</script>
</body>
</html>

score:1

first of all, I guess that when you say

for example in this photo, the blue area should start in y=9756 until y=39512

You actually mean

for example in this photo, the blue area should start in y=29756 until y=39512

What happens is that your green area is painted from 0 to 29756 then your blue area on top of it from 0 to 9756. You need to shift each area on top of the previous one. Easiest is to preprocess your data to do it. D3.js can do it for you, see Stack Layout. This computes the y0 and y for all of your layers.

EDIT:

var stack = d3.layout.stack()
    .x(function(d) { return d.Type }) // tell d3 to use Type as x value
    .y(function(d) { return d.Sum }); // tell d3 to use Sum as y value
var stackData = stack(data);

After that, you data is augmented, i.e. each entry contains an additional y and y0 values that you can use directly to plot (in your y and height attribute).


Related Query