cyrilcherian/README.md

## README.md

      
    Raw
  

              README.md
            
          
    This ranged bar chart uses D3 to  visualize the price range.
In the dataset Car&Vehicle will have a cost range from 55$ to 190$
Television & Video will have a cost range from 75$ to 190$  so on.
For demo check here

  
## index.html
<!DOCTYPE html>
<html>

<head>
  <title>Ranged D3 Bar - Charts</title>
  <style>
    #xaxis .domain {
      fill: none;
      stroke: #000;
    }

    #xaxis text,
    #yaxis text {
      font-size: 12px;
    }
  </style>
</head>

<body>
  <div id="wrapper">
  </div>
  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <script>
    var categories = ['', 'Accessories', 'Audiophile', 'Camera & Photo', 'Cell Phones', 'Computers', 'eBook Readers', 'Gadgets', 'GPS & Navigation', 'Home Audio', 'Office Electronics', 'Portable Audio', 'Portable Video', 'Security & Surveillance', 'Service', 'Television & Video', 'Car & Vehicle'];

    var dollars = [
      [100, 213],
      [75, 209],
      [50, 190],
      [100, 179],
      [140, 156],
      [138, 209],
      [90, 190],
      [65, 179],
      [100, 213],
      [100, 209],
      [50, 190],
      [76, 179],
      [45, 156],
      [80, 209],
      [75, 190],
      [55, 190]
    ];

    var colors = ['#0000b4', '#0082ca', '#0094ff', '#0d4bcf', '#0066AE', '#074285', '#00187B', '#285964', '#405F83', '#416545', '#4D7069', '#6E9985', '#7EBC89', '#0283AF', '#79BCBF', '#99C19E'];

    var grid = d3.range(25).map(function(i) {
      return {
        'x1': 0,
        'y1': 0,
        'x2': 0,
        'y2': 480
      };
    });


    var xscale = d3.scale.linear()
      .domain([10, 250])
      .range([0, 722]);

    var yscale = d3.scale.linear()
      .domain([0, categories.length])
      .range([0, 480]);

    var colorScale = d3.scale.quantize()
      .domain([0, categories.length])
      .range(colors);

    var canvas = d3.select('#wrapper')
      .append('svg')
      .attr({
        'width': 900,
        'height': 550
      });

    var grids = canvas.append('g')
      .attr('id', 'grid')
      .attr('transform', 'translate(150,10)')
      .selectAll('line')
      .data(grid)
      .enter()
      .append('line')
      .attr({
        'x1': function(d, i) {
          return i * 30;
        },
        'y1': function(d) {
          return d.y1;
        },
        'x2': function(d, i) {
          return i * 30;
        },
        'y2': function(d) {
          return d.y2;
        },
      })
      .style({
        'stroke': '#adadad',
        'stroke-width': '1px'
      });

    var xAxis = d3.svg.axis();
    xAxis
      .orient('bottom')
      .scale(xscale)

    var yAxis = d3.svg.axis();
    yAxis
      .orient('left')
      .scale(yscale)
      .tickSize(2)
      .tickFormat(function(d, i) {
        return categories[i];
      })
      .tickValues(d3.range(17));

    var y_xis = canvas.append('g')
      .attr("transform", "translate(150,0)")
      .attr('id', 'yaxis')
      .call(yAxis);

    var x_xis = canvas.append('g')
      .attr("transform", "translate(150,480)")
      .attr('id', 'xaxis')
      .call(xAxis);

    var chart = canvas.append('g')
      .attr("transform", "translate(150,0)")
      .attr('id', 'bars')
      .selectAll('rect')
      .data(dollars)
      .enter()
      .append('rect')
      .attr('height', 19)
      .attr({
        'x': function(d) {
          return xscale(d[0]);
        },
        'y': function(d, i) {
          return yscale(i) + 19;
        }
      })
      .style('fill', function(d, i) {
        return colorScale(i);
      })
      .attr('width', function(d) {
        return 0;
      });


    var transit = d3.select("svg").selectAll("rect")
      .data(dollars)
      .transition()
      .duration(1000)
      .attr("width", function(d) {
        return xscale(d[1]) - xscale(d[0]);
      });
    //setting the text to the bars
    var transitext = d3.select('#bars')
      .selectAll('text')
      .data(dollars)
      .enter();
    //start text
    transitext.append('text')
      .attr({
        'x': function(d) {
          return xscale(d[0]) - 30;
        },
        'y': function(d, i) {
          return yscale(i) + 35;
        }
      })
      .text(function(d) {
        return d[0] + "$";
      }).style({
        'fill': 'black',
        'font-size': '14px'
      });
    //end text
    transitext.append('text')
      .attr({
        'x': function(d) {
          return xscale(d[1]) + 10;
        },
        'y': function(d, i) {
          return yscale(i) + 35;
        }
      })
      .text(function(d) {
        return d[1] + "$";
      }).style({
        'fill': 'black',
        'font-size': '14px'
      });
  </script>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<title>Ranged D3 Bar - Charts</title>
	<style>
	#xaxis .domain {
	fill: none;
	stroke: #000;
	}

	#xaxis text,
	#yaxis text {
	font-size: 12px;
	}
	</style>
	</head>

	<body>
	<div id="wrapper">
	</div>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script>
	var categories = ['', 'Accessories', 'Audiophile', 'Camera & Photo', 'Cell Phones', 'Computers', 'eBook Readers', 'Gadgets', 'GPS & Navigation', 'Home Audio', 'Office Electronics', 'Portable Audio', 'Portable Video', 'Security & Surveillance', 'Service', 'Television & Video', 'Car & Vehicle'];

	var dollars = [
	[100, 213],
	[75, 209],
	[50, 190],
	[100, 179],
	[140, 156],
	[138, 209],
	[90, 190],
	[65, 179],
	[100, 213],
	[100, 209],
	[50, 190],
	[76, 179],
	[45, 156],
	[80, 209],
	[75, 190],
	[55, 190]
	];

	var colors = ['#0000b4', '#0082ca', '#0094ff', '#0d4bcf', '#0066AE', '#074285', '#00187B', '#285964', '#405F83', '#416545', '#4D7069', '#6E9985', '#7EBC89', '#0283AF', '#79BCBF', '#99C19E'];

	var grid = d3.range(25).map(function(i) {
	return {
	'x1': 0,
	'y1': 0,
	'x2': 0,
	'y2': 480
	};
	});


	var xscale = d3.scale.linear()
	.domain([10, 250])
	.range([0, 722]);

	var yscale = d3.scale.linear()
	.domain([0, categories.length])
	.range([0, 480]);

	var colorScale = d3.scale.quantize()
	.domain([0, categories.length])
	.range(colors);

	var canvas = d3.select('#wrapper')
	.append('svg')
	.attr({
	'width': 900,
	'height': 550
	});

	var grids = canvas.append('g')
	.attr('id', 'grid')
	.attr('transform', 'translate(150,10)')
	.selectAll('line')
	.data(grid)
	.enter()
	.append('line')
	.attr({
	'x1': function(d, i) {
	return i * 30;
	},
	'y1': function(d) {
	return d.y1;
	},
	'x2': function(d, i) {
	return i * 30;
	},
	'y2': function(d) {
	return d.y2;
	},
	})
	.style({
	'stroke': '#adadad',
	'stroke-width': '1px'
	});

	var xAxis = d3.svg.axis();
	xAxis
	.orient('bottom')
	.scale(xscale)

	var yAxis = d3.svg.axis();
	yAxis
	.orient('left')
	.scale(yscale)
	.tickSize(2)
	.tickFormat(function(d, i) {
	return categories[i];
	})
	.tickValues(d3.range(17));

	var y_xis = canvas.append('g')
	.attr("transform", "translate(150,0)")
	.attr('id', 'yaxis')
	.call(yAxis);

	var x_xis = canvas.append('g')
	.attr("transform", "translate(150,480)")
	.attr('id', 'xaxis')
	.call(xAxis);

	var chart = canvas.append('g')
	.attr("transform", "translate(150,0)")
	.attr('id', 'bars')
	.selectAll('rect')
	.data(dollars)
	.enter()
	.append('rect')
	.attr('height', 19)
	.attr({
	'x': function(d) {
	return xscale(d[0]);
	},
	'y': function(d, i) {
	return yscale(i) + 19;
	}
	})
	.style('fill', function(d, i) {
	return colorScale(i);
	})
	.attr('width', function(d) {
	return 0;
	});


	var transit = d3.select("svg").selectAll("rect")
	.data(dollars)
	.transition()
	.duration(1000)
	.attr("width", function(d) {
	return xscale(d[1]) - xscale(d[0]);
	});
	//setting the text to the bars
	var transitext = d3.select('#bars')
	.selectAll('text')
	.data(dollars)
	.enter();
	//start text
	transitext.append('text')
	.attr({
	'x': function(d) {
	return xscale(d[0]) - 30;
	},
	'y': function(d, i) {
	return yscale(i) + 35;
	}
	})
	.text(function(d) {
	return d[0] + "$";
	}).style({
	'fill': 'black',
	'font-size': '14px'
	});
	//end text
	transitext.append('text')
	.attr({
	'x': function(d) {
	return xscale(d[1]) + 10;
	},
	'y': function(d, i) {
	return yscale(i) + 35;
	}
	})
	.text(function(d) {
	return d[1] + "$";
	}).style({
	'fill': 'black',
	'font-size': '14px'
	});
	</script>
	</body>

	</html>