curran/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    A pseudo-bar chart for demonstrating basic D3 usage, including:

d3-selection
d3-scale

Built with blockbuilder.org
forked from curran's block: Pseudo Bar Chart II

  
## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>SVG Example</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
  </head>
  <body>
    <script>

      var width = 960,
          height = 500,
          data = [
            { name: "A", value: 5 },
            { name: "B", value: 4 },
            { name: "C", value: 3 },
            { name: "D", value: 2 },
            { name: "E", value: 1 }
          ];

      var xScale = d3.scaleBand()
            .domain(data.map(function (d){ return d.name; }))
            .range([0, width])
            .padding(0.1),
          yScale = d3.scaleLinear()
            .domain([0, d3.max(data, function (d){ return d.value; })])
            .range([height, 0]);

      var svg = d3.select("body").append("svg")
          .attr("width", width)
          .attr("height", height);

      svg.selectAll("rect").data(data)
        .enter().append("rect")
          .attr("x", function (d){ return xScale(d.name); })
          .attr("y", function (d){ return yScale(d.value); })
          .attr("width", xScale.bandwidth())
          .attr("height", function (d){ return height - yScale(d.value); });

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

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>SVG Example</title>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	</head>
	<body>
	<script>

	var width = 960,
	height = 500,
	data = [
	{ name: "A", value: 5 },
	{ name: "B", value: 4 },
	{ name: "C", value: 3 },
	{ name: "D", value: 2 },
	{ name: "E", value: 1 }
	];

	var xScale = d3.scaleBand()
	.domain(data.map(function (d){ return d.name; }))
	.range([0, width])
	.padding(0.1),
	yScale = d3.scaleLinear()
	.domain([0, d3.max(data, function (d){ return d.value; })])
	.range([height, 0]);

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

	svg.selectAll("rect").data(data)
	.enter().append("rect")
	.attr("x", function (d){ return xScale(d.name); })
	.attr("y", function (d){ return yScale(d.value); })
	.attr("width", xScale.bandwidth())
	.attr("height", function (d){ return height - yScale(d.value); });

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