bradfordcondon/REAMDE.md

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


  var svg = d3.select("svg")
  var width = 960
  var height = 500
  var margin = {horizontal: 10, top: 20, bottom: 40}

  var data = [{name: "one", property: "a", value: 100},
             {name: "two", property: "a", value: 50},
              {name: "two", property: "a", value: 50},
             {name: "FDJSL", property: "a", value: 57},
             {name: "MCLKDSM", property: "a", value: 1},
             {name: "NJKN", property: "a", value: 101},
             {name: "LKJ", property: "a", value: 52},
             {name: "OI", property: "a", value: 83},
             {name: "UOU", property: "a", value: 7},
              {name: "three", property: "b", value: 50},
               {name: "three", property: "b", value: 50},
              {name: "three", property: "b", value: 30},
              {name: "three", property: "b", value: 20},
              {name: "three", property: "b", value: 0},
              {name: "four", property: "c", value: 40},
              {name: "four", property: "c", value: 108},
              {name: "four", property: "c", value: 140},
              {name: "four", property: "c", value: 140},
              {name: "four", property: "c", value: 10}
             ]

  var colorDomain = ["a", "b", "c"]


//next data based on property

var nested = d3.nest()
    .key(function (d) {
        return d.property;
    }).entries(data);

  var color = d3.scale.ordinal()
            .domain(colorDomain)
            .range(['#A6CEE3', '#1F78B4', '#B2DF8A', '#33A02C', '#FB9A99', '#E31A1C', '#FDBF6F',
                '#FF7F00', '#CAB2D6', '#6A3D9A', '#FFFF99', '#B15928'
            ]);

  var x0 = d3.scale.ordinal()
    .rangeRoundBands([margin.horizontal, width]);

  var y = d3.scale.linear()
    .range([height, (margin.top + margin.bottom)]);//reverse because 0 is the top.


//set the domains based on the nested data
x0.domain(nested.map(function (d) {
    return d.key;
}));
y.domain([0, 200]);


var propertyGroups = svg.selectAll('.propertyGroups')
    .data(nested)
    .enter()
    .append('g')
    .attr('transform', function (d) {
        return 'translate(' + x0(d.key) + ',0)';
    });


var text = propertyGroups.append('text')
    .attr('class', 'label')
    .style('font-size', '12px')
    .style('font-weight', 'normal')
    .style('padding', '5px')
    .attr('x', 0)
    .attr('y', 0)
    .text(function(d) {
    return d.key})
    .attr('transform', function (d) {
    return ' translate( 0,' + (height - margin.bottom + 10) + ' ),rotate(45)'
  })


var bars = propertyGroups.selectAll('.bar')
    .data(function (d) {
        return d.values;
    })
    .enter().append('rect')
    .style('fill', function (d) { // fill depends on if user is doing expression based or property based
            return color(d.property);
    })
    .attr('y', function (d) {
        return y(d.value);
    })
    .attr('x', function (d, i) {
        numberObjects = Object.keys(d).length;
        return 10 * i - (1 / numberObjects * 10);
    })
    .attr('width', 9)
    .attr('height', function (d) {
        return y(0) - y(d.value);
    })
    .attr('transform', 'translate(0,' + (-margin.bottom) + ')');


</script>

## REAMDE.md

      
    Raw
  

              REAMDE.md
            
          
    Still under construction.  Converting my v3 d3 plot to a bl.ock.
This plot demonstrates how to create a very simple grouped bar plot.
	<!DOCTYPE html>
	<style>
	.axis .domain {
	display: none;
	}
	</style>
	<div class="propertySortDiv"/>
	<svg width="960" height="500"></svg>
	<script src="https://d3js.org/d3.v3.min.js"></script>
	<script>


	var svg = d3.select("svg")
	var width = 960
	var height = 500
	var margin = {horizontal: 10, top: 20, bottom: 40}

	var data = [{name: "one", property: "a", value: 100},
	{name: "two", property: "a", value: 50},
	{name: "two", property: "a", value: 50},
	{name: "FDJSL", property: "a", value: 57},
	{name: "MCLKDSM", property: "a", value: 1},
	{name: "NJKN", property: "a", value: 101},
	{name: "LKJ", property: "a", value: 52},
	{name: "OI", property: "a", value: 83},
	{name: "UOU", property: "a", value: 7},
	{name: "three", property: "b", value: 50},
	{name: "three", property: "b", value: 50},
	{name: "three", property: "b", value: 30},
	{name: "three", property: "b", value: 20},
	{name: "three", property: "b", value: 0},
	{name: "four", property: "c", value: 40},
	{name: "four", property: "c", value: 108},
	{name: "four", property: "c", value: 140},
	{name: "four", property: "c", value: 140},
	{name: "four", property: "c", value: 10}
	]

	var colorDomain = ["a", "b", "c"]


	//next data based on property

	var nested = d3.nest()
	.key(function (d) {
	return d.property;
	}).entries(data);

	var color = d3.scale.ordinal()
	.domain(colorDomain)
	.range(['#A6CEE3', '#1F78B4', '#B2DF8A', '#33A02C', '#FB9A99', '#E31A1C', '#FDBF6F',
	'#FF7F00', '#CAB2D6', '#6A3D9A', '#FFFF99', '#B15928'
	]);

	var x0 = d3.scale.ordinal()
	.rangeRoundBands([margin.horizontal, width]);

	var y = d3.scale.linear()
	.range([height, (margin.top + margin.bottom)]);//reverse because 0 is the top.


	//set the domains based on the nested data
	x0.domain(nested.map(function (d) {
	return d.key;
	}));
	y.domain([0, 200]);


	var propertyGroups = svg.selectAll('.propertyGroups')
	.data(nested)
	.enter()
	.append('g')
	.attr('transform', function (d) {
	return 'translate(' + x0(d.key) + ',0)';
	});



	var text = propertyGroups.append('text')
	.attr('class', 'label')
	.style('font-size', '12px')
	.style('font-weight', 'normal')
	.style('padding', '5px')
	.attr('x', 0)
	.attr('y', 0)
	.text(function(d) {
	return d.key})
	.attr('transform', function (d) {
	return ' translate( 0,' + (height - margin.bottom + 10) + ' ),rotate(45)'
	})


	var bars = propertyGroups.selectAll('.bar')
	.data(function (d) {
	return d.values;
	})
	.enter().append('rect')
	.style('fill', function (d) { // fill depends on if user is doing expression based or property based
	return color(d.property);
	})
	.attr('y', function (d) {
	return y(d.value);
	})
	.attr('x', function (d, i) {
	numberObjects = Object.keys(d).length;
	return 10 * i - (1 / numberObjects * 10);
	})
	.attr('width', 9)
	.attr('height', function (d) {
	return y(0) - y(d.value);
	})
	.attr('transform', 'translate(0,' + (-margin.bottom) + ')');


	</script>