micahstubbs/.block

## .block
license: CC0-1.0

## README.md

      
      Raw
    
  
              README.md
            
          
    datasana #2
forked from micahstubbs's block: building blocks svg flag

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
</head>
<style>
  body {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
</style>

<body>
  <svg width=100% height=100%>
    <rect id="base" x=100 y=300 width=600 height=6></rect>
    <rect id="box" x=100 y=0 width=600 height=300 fill="none" stroke="#000"></rect>

  </svg>
  <script>
    var list = [
      5, 19, -10, 6, 29
    ]

    var chartX = 121;
    var chartWidth = 675;
    var chartHeight = 485;
    var xMargin = 15;

    d3.select("#box").attr({
      width: chartWidth,
      height: chartHeight,
      x: chartX
    })
    d3.select("#base").attr({
      width: chartWidth,
      x: chartX,
      y: chartHeight
    })

    var xscale = d3.scale.linear()
      .domain([0, list.length-1])
      .range([chartX + xMargin, chartX + chartWidth - xMargin])

    var yscale = d3.scale.linear()
      .domain([0, d3.max(list, function(d) { return d })])
      .range([chartHeight, 0])

    var svg = d3.select("svg");

    var circles = svg.selectAll("circle")
      .data(list)
      .enter()
      .append("circle")
      .attr({
        r: 10,
        cx: function(d,i) {
          return xscale(i);
        },
        cy: function(d,i) {
          return yscale(d);
        }
      })

    var bars = svg.selectAll("rect.bar")
      .data(list)
      .enter()
      .append("rect").classed("bar", true)
      .attr({
        x: function(d,i) {
          return xscale(i);
        },
        y: function(d,i) {
          return yscale(d);
        },
        width: 10,
        height: function(d,i) {
          return chartHeight - yscale(d)
        },
        fill: "orange"
      })

    var barLines = svg.selectAll("line")
    .data(list)
    .enter()
    .append("line")
    .attr({
      x1: function(d,i) {
        return xscale(i)
      },
      y1: function(d,i) {
        return yscale(d);
      },
      x2: function(d,i) {
        return xscale(i)
      },
      y2: function(d,i) {
        return yscale.range()[0] //chartHeight
      },
      stroke: "#7a7a7a",
      "stroke-width": 10
    })

    var line = svg.selectAll("path")
      .data([list])
      .enter()
      .append("path")
      .attr({
        d: function(entries,index) {
          var x = xscale(0);
          var y = yscale(entries[0]);
          var string = "M" + [x,y];
          console.log("STRING", string);
          for(var i = 1; i < entries.length; i++) {
            x = xscale(i);
          	y = yscale(entries[i]);
            string += "L" + [x,y];
          }
          console.log("STRING AFTER", string)
          return string
        },
        fill: "none",
        stroke: "#000"
      })


  </script>
</body>

## thumbnail.png

      
      Raw
    
  
              thumbnail.png
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	</head>
	<style>
	body {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	}
	</style>

	<body>
	<svg width=100% height=100%>
	<rect id="base" x=100 y=300 width=600 height=6></rect>
	<rect id="box" x=100 y=0 width=600 height=300 fill="none" stroke="#000"></rect>

	</svg>
	<script>
	var list = [
	5, 19, -10, 6, 29
	]

	var chartX = 121;
	var chartWidth = 675;
	var chartHeight = 485;
	var xMargin = 15;

	d3.select("#box").attr({
	width: chartWidth,
	height: chartHeight,
	x: chartX
	})
	d3.select("#base").attr({
	width: chartWidth,
	x: chartX,
	y: chartHeight
	})

	var xscale = d3.scale.linear()
	.domain([0, list.length-1])
	.range([chartX + xMargin, chartX + chartWidth - xMargin])

	var yscale = d3.scale.linear()
	.domain([0, d3.max(list, function(d) { return d })])
	.range([chartHeight, 0])

	var svg = d3.select("svg");

	var circles = svg.selectAll("circle")
	.data(list)
	.enter()
	.append("circle")
	.attr({
	r: 10,
	cx: function(d,i) {
	return xscale(i);
	},
	cy: function(d,i) {
	return yscale(d);
	}
	})

	var bars = svg.selectAll("rect.bar")
	.data(list)
	.enter()
	.append("rect").classed("bar", true)
	.attr({
	x: function(d,i) {
	return xscale(i);
	},
	y: function(d,i) {
	return yscale(d);
	},
	width: 10,
	height: function(d,i) {
	return chartHeight - yscale(d)
	},
	fill: "orange"
	})

	var barLines = svg.selectAll("line")
	.data(list)
	.enter()
	.append("line")
	.attr({
	x1: function(d,i) {
	return xscale(i)
	},
	y1: function(d,i) {
	return yscale(d);
	},
	x2: function(d,i) {
	return xscale(i)
	},
	y2: function(d,i) {
	return yscale.range()[0] //chartHeight
	},
	stroke: "#7a7a7a",
	"stroke-width": 10
	})

	var line = svg.selectAll("path")
	.data([list])
	.enter()
	.append("path")
	.attr({
	d: function(entries,index) {
	var x = xscale(0);
	var y = yscale(entries[0]);
	var string = "M" + [x,y];
	console.log("STRING", string);
	for(var i = 1; i < entries.length; i++) {
	x = xscale(i);
	y = yscale(entries[i]);
	string += "L" + [x,y];
	}
	console.log("STRING AFTER", string)
	return string
	},
	fill: "none",
	stroke: "#000"
	})



	</script>
	</body>