davewood/README.md

## README.md

      
    Raw
  

              README.md
            
          
    This simple bar chart demonstrates two new features of D3 2.6:


Namespaces are now optional! You can now append an SVG element by just saying append("svg"), without specifying the namespace explicitly as "svg:svg". Adding an element whose name is a known prefix (in d3.ns.prefix) implies a namespace; similarly, appending or inserting an element will inherit the namespace from its parent.


The axis component now supports ordinal scales. The labels on the left side of the bar chart are rendered with the axis component.


## index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Bar Chart</title>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.6.0"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.csv.js?2.6.0"></script>
    <style type="text/css">

body {
  font: 10px sans-serif;
}

.bar rect {
  fill: steelblue;
}

.bar text.value {
  fill: white;
}

.axis {
  shape-rendering: crispEdges;
}

.axis path {
  fill: none;
}

.x.axis line {
  stroke: #fff;
  stroke-opacity: .8;
}

.y.axis path {
  stroke: black;
}

    </style>
  </head>
  <body>
    <script type="text/javascript">

var m = [30, 10, 10, 30],
    w = 960 - m[1] - m[3],
    h = 930 - m[0] - m[2];

var format = d3.format(",.0f");

var x = d3.scale.linear().range([0, w]),
    y = d3.scale.ordinal().rangeRoundBands([0, h], .1);

var xAxis = d3.svg.axis().scale(x).orient("top").tickSize(-h),
    yAxis = d3.svg.axis().scale(y).orient("left").tickSize(0);

var svg = d3.select("body").append("svg")
    .attr("width", w + m[1] + m[3])
    .attr("height", h + m[0] + m[2])
  .append("g")
    .attr("transform", "translate(" + m[3] + "," + m[0] + ")");

d3.csv("sample-data.csv", function(data) {

  // Parse numbers, and sort by value.
  data.forEach(function(d) { d.value = +d.value; });
  data.sort(function(a, b) { return b.value - a.value; });

  // Set the scale domain.
  x.domain([0, d3.max(data, function(d) { return d.name; })]);
  y.domain(data.map(function(d) { return d.name; }));

  var bar = svg.selectAll("g.bar")
      .data(data)
    .enter().append("g")
      .attr("class", "bar")
      .attr("transform", function(d) { return "translate(0," + y(d.name) + ")"; });

  bar.append("rect")
      .attr("width", function(d) { return x(d.value); })
      .attr("height", y.rangeBand());

  bar.append("text")
      .attr("class", "value")
      .attr("x", function(d) { return x(d.value); })
      .attr("y", y.rangeBand() / 2)
      .attr("dx", -3)
      .attr("dy", ".35em")
      .attr("text-anchor", "end")
      .text(function(d) { return d.name; });

  svg.append("g")
      .attr("class", "x axis")
      .call(xAxis);

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis);
});

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

## sample-data.csv

          
            name
            value

            
              SubTest
              14487

            
              VarVal
              6436

            
              VarQueryPath
              3783

            
              Comment
              3033

            
              VarCheck
              2140

            
              EPP
              700

            
              REST
              649

            
              VarRand
              562

            
              ClearVars
              470

            
              CountQueryPath
              432

            
              DateAdd
              239

            
              Transformation
              238

            
              SSH
              148

            
              VarCheckRegExp
              147

            
              Math
              89

            
              DateFormat
              86

            
              DateCheck
              66

            
              EPPConnect
              41

            
              EPPDisconnect
              35

            
              DB
              28

            
              SOAP
              19

            
              PrintVars
              18

            
              DBDisconnect
              8

            
              DBConnect
              8

            
              DataCmp
              3

            
              ForLoop
              3

            
              Diff
              2

            
              Multiline
              2

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html>
	<head>
	<title>Bar Chart</title>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.6.0"></script>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.csv.js?2.6.0"></script>
	<style type="text/css">

	body {
	font: 10px sans-serif;
	}

	.bar rect {
	fill: steelblue;
	}

	.bar text.value {
	fill: white;
	}

	.axis {
	shape-rendering: crispEdges;
	}

	.axis path {
	fill: none;
	}

	.x.axis line {
	stroke: #fff;
	stroke-opacity: .8;
	}

	.y.axis path {
	stroke: black;
	}

	</style>
	</head>
	<body>
	<script type="text/javascript">

	var m = [30, 10, 10, 30],
	w = 960 - m[1] - m[3],
	h = 930 - m[0] - m[2];

	var format = d3.format(",.0f");

	var x = d3.scale.linear().range([0, w]),
	y = d3.scale.ordinal().rangeRoundBands([0, h], .1);

	var xAxis = d3.svg.axis().scale(x).orient("top").tickSize(-h),
	yAxis = d3.svg.axis().scale(y).orient("left").tickSize(0);

	var svg = d3.select("body").append("svg")
	.attr("width", w + m[1] + m[3])
	.attr("height", h + m[0] + m[2])
	.append("g")
	.attr("transform", "translate(" + m[3] + "," + m[0] + ")");

	d3.csv("sample-data.csv", function(data) {

	// Parse numbers, and sort by value.
	data.forEach(function(d) { d.value = +d.value; });
	data.sort(function(a, b) { return b.value - a.value; });

	// Set the scale domain.
	x.domain([0, d3.max(data, function(d) { return d.name; })]);
	y.domain(data.map(function(d) { return d.name; }));

	var bar = svg.selectAll("g.bar")
	.data(data)
	.enter().append("g")
	.attr("class", "bar")
	.attr("transform", function(d) { return "translate(0," + y(d.name) + ")"; });

	bar.append("rect")
	.attr("width", function(d) { return x(d.value); })
	.attr("height", y.rangeBand());

	bar.append("text")
	.attr("class", "value")
	.attr("x", function(d) { return x(d.value); })
	.attr("y", y.rangeBand() / 2)
	.attr("dx", -3)
	.attr("dy", ".35em")
	.attr("text-anchor", "end")
	.text(function(d) { return d.name; });

	svg.append("g")
	.attr("class", "x axis")
	.call(xAxis);

	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis);
	});

	</script>
	</body>
	</html>
	name	value
	SubTest	14487
	VarVal	6436
	VarQueryPath	3783
	Comment	3033
	VarCheck	2140
	EPP	700
	REST	649
	VarRand	562
	ClearVars	470
	CountQueryPath	432
	DateAdd	239
	Transformation	238
	SSH	148
	VarCheckRegExp	147
	Math	89
	DateFormat	86
	DateCheck	66
	EPPConnect	41
	EPPDisconnect	35
	DB	28
	SOAP	19
	PrintVars	18
	DBDisconnect	8
	DBConnect	8
	DataCmp	3
	ForLoop	3
	Diff	2
	Multiline	2