Ideenmanagement

D3.js

by Fiddel

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js"></script>
<h1>Ideenmanagement, Stand: <mark>7. April 2016</mark></h1>
    <p>("data_ideeneingang.txt" und "data_einsparung.txt". ".txt" weil für ".json" kein MIME eingetragen )</p>
    <div class="wrapper">
    
        <div id="Ideeneingang"></div>
        <div id="Einsparung"></div>      
    </div>

CSS

body {
  font-family: Arial, sans-serif;
}
    svg {border:1px solid red;}
    
    
  .axis_y line{
    fill: none;
    stroke: #666;
  }

  .line{
    fill: none;
    stroke-width: 2px;
  }

  .tick text{
    font-size: 12px;
  }

  .tick line{
    opacity: 0.15;
  }

JavaScript

var daten = [
//{jahr:'2013',ideen:219},
{jahr:'2014',ideen:522},
{jahr:'2015',ideen:368}
];

var fontsize = 20; // Texthöhe oberhalb der Balken nicht vergessen!
    
var margin = {top: 30, right: 10, bottom: 20, left: 50},
    width = 300 - margin.left - margin.right,
    height = 700 - margin.top - margin.bottom + fontsize;
  
var colorGray1 = '#d7dbdb';
var colorGray2 = '#b4b7b7';
var colorOGE = '#003d85';
    
var yScale = d3.scale.linear()
    .domain([0, d3.max(daten, function(d){ return d.ideen; })])
    .range([height, 0]);

var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left")
    .innerTickSize(-width)
    .outerTickSize(0)
    .tickPadding(10);

// var line = d3.svg.line().ideen(function(d) { return yScale(d.ideen); });

    

var svgElement = d3.select('#Ideeneingang').append('svg')
    .attr({
            'width': width + margin.left + margin.right,
            'height': height + margin.top + margin.bottom,
            'class':'ideeneingang'
        });

    
    
svgElement.append("g")
    .attr("class", "axis_y")
    .call(yAxis)
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
;

svgElement.append("path")
      .data([daten])
      .attr("class", "line")
     //.attr("d", line);
    
 

var Balken = svgElement.append("g")

    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")

	.selectAll('rect')

	.data(daten)
	.enter()
	.append('rect')
		.attr('x',function(d,i) {
			return i * (width / daten.length);
		})
		.attr('width', width / daten.length)
		.attr('y',function(d) {
			return height - (d.ideen);
		})
		.attr('height',function(d){
			return d.ideen;
		})
		.attr('fill', colorOGE)


    d3.select(Balken[0][0]).attr("fill",colorGray1).attr("transform", "translate(30,0)")
    d3.select(Balken[0][1]).attr("fill",colorOGE).attr("transform", "translate(-30,0)")

;



    
var Text = svgElement.append("g")

    .attr("transform", "translate(" + margin.left + "," + margin.top +...