bradfordcondon/REAMDE.md

## index.html

<!DOCTYPE html>
<style>
.axis .domain {
  display: none;
}
</style>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>

var data = [{name: "one", property: "a", value: 100},
             {name: "two", property: "a", value: 50},
              {name: "two", property: "b", value: 20},
             {name: "four", property: "b", value: 57}, ];

  var svg = d3.select("svg")

 var bars=  svg.selectAll('.bar')
    .data(data)
    .enter()
    .append('g')
   .attr('transform', function (d, i) {
  return 'translate(' + i* 20 + ',0)';
  }).append('rect')
 .style('fill', "red")
 .style("height", function (d, i) {
 return d.value})
 .attr('width', 10)


  </script>


## REAMDE.md

      
      Raw
    
  
              REAMDE.md
            
          
    A simple D3 plot for www.bradfordcondon.com.  This is for a blog series on breaking down and understanding D3.js, version 3.  This is Blog post number one.

	<!DOCTYPE html>
	<style>
	.axis .domain {
	display: none;
	}
	</style>
	<svg width="960" height="500"></svg>
	<script src="https://d3js.org/d3.v3.min.js"></script>
	<script>

	var data = [{name: "one", property: "a", value: 100},
	{name: "two", property: "a", value: 50},
	{name: "two", property: "b", value: 20},
	{name: "four", property: "b", value: 57}, ];

	var svg = d3.select("svg")

	var bars= svg.selectAll('.bar')
	.data(data)
	.enter()
	.append('g')
	.attr('transform', function (d, i) {
	return 'translate(' + i* 20 + ',0)';
	}).append('rect')
	.style('fill', "red")
	.style("height", function (d, i) {
	return d.value})
	.attr('width', 10)


	</script>