emeeks/index.html

## readme.md

      
    Raw
  

              readme.md
            
          
    An improved divided line generator. This one uses a simple search function to find the point closest to the parameterized space that determines where lines are being divided. In this example there are four parameters: Before a certain point gets a thick grey line, above a certain threshold gets a red line, below a certain threshold gets a green line and past a certain point gets a dashed line.

  
## index.html
<html>
<head>
  <title>Divided Lines II</title>
  <meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js"></script>
</head>
<style>
  svg {
    height: 500px;
    width: 500px;
    border: 1px solid gray;
  }
</style>
<body>

<div id="viz">
  <svg class="main">
  </svg>
</div>
</body>
  <footer>
<script>

function dividedLine(parameters, points) {
  var currentParameters = parameters(points[0])
  var currentPointsArray = []
  dividedLinesData = [{key: [currentParameters], points: currentPointsArray}]
  points.forEach(function (point, i) {
    var newParameters = parameters(point)

    if (newParameters === currentParameters) {
      currentPointsArray.push(point)
    }
    else {
      var lastPoint = currentPointsArray[currentPointsArray.length - 1];
      var pointA = lastPoint;
      var pointB = point;
      for (var x = 0; x<10; x++) {
        var findPoints = simpleSearchFunction(pointA, pointB, currentParameters, parameters)
        pointA = findPoints[0]
        pointB = findPoints[1]
      }
      currentPointsArray.push(pointB)
      currentPointsArray = [pointB, point]
      dividedLinesData.push({key: [newParameters], points: currentPointsArray})
      currentParameters = newParameters
    }
  })
  return dividedLinesData.filter(function (d) {return d.points.length > 1})
}

function simpleSearchFunction(pointA, pointB, current, parameters) {
  var pointCX = (pointA.x + pointB.x) / 2
  var pointCY = (pointA.y + pointB.y) / 2
  if (parameters({x: pointCX, y: pointCY}) === current) {
    return [{x: pointCX, y: pointCY}, pointB]
  }
  return [pointA, {x: pointCX, y: pointCY}]
}

function randomLineGenerator(width, height, points) {
  var pointDataSet = []
  var curY = 0.5
  for (var x = 0; x< points; x++) {
    curY += Math.random() * 0.3 - 0.15;
    curY = Math.max(curY, 0.05)
    curY = Math.min(curY, 0.95)
    pointDataSet.push({ x: x / points * width, y: curY * height })
  }
  return pointDataSet
}

function parameters(point) {
  if (point.x < 100) {
    return "before"
  }
  if (point.x > 400) {
    return "after"
  }
  if (point.y < 150) {
    return "above"
  }
  if (point.y > 350) {
    return "below"
  }
  return "normal"
}

var styleMap = {
  before: {"stroke-width": 6, "stroke-opacity": 0.5},
  after: {"stroke-dasharray": "5 5"},
  above: {stroke: "red"},
  below: {stroke: "green"},
  normal: {}
}

var lineData = randomLineGenerator(500,500,100);

var line = d3.svg.line()
  .x(function (d) {return d.x})
  .y(function (d) {return d.y})
  .interpolate("basis")

var dLineData = dividedLine(parameters, lineData);

var color = d3.scale.category20()

d3.select("svg")
  .selectAll("path.segment")
  .data(dLineData)
  .enter()
  .append("path")
  .attr("d", function (d) {return line(d.points)})
  .each(function (d){
    var baseStyle = {fill: "none", stroke: "black", "stroke-width": 2}
    d.key.forEach(function (p) {
      Object.assign(baseStyle, styleMap[p])
    })
    d3.select(this).style(baseStyle)
   })


</script>
  </footer>

</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<html>
	<head>
	<title>Divided Lines II</title>
	<meta charset="utf-8" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js"></script>
	</head>
	<style>
	svg {
	height: 500px;
	width: 500px;
	border: 1px solid gray;
	}
	</style>
	<body>

	<div id="viz">
	<svg class="main">
	</svg>
	</div>
	</body>
	<footer>
	<script>

	function dividedLine(parameters, points) {
	var currentParameters = parameters(points[0])
	var currentPointsArray = []
	dividedLinesData = [{key: [currentParameters], points: currentPointsArray}]
	points.forEach(function (point, i) {
	var newParameters = parameters(point)

	if (newParameters === currentParameters) {
	currentPointsArray.push(point)
	}
	else {
	var lastPoint = currentPointsArray[currentPointsArray.length - 1];
	var pointA = lastPoint;
	var pointB = point;
	for (var x = 0; x<10; x++) {
	var findPoints = simpleSearchFunction(pointA, pointB, currentParameters, parameters)
	pointA = findPoints[0]
	pointB = findPoints[1]
	}
	currentPointsArray.push(pointB)
	currentPointsArray = [pointB, point]
	dividedLinesData.push({key: [newParameters], points: currentPointsArray})
	currentParameters = newParameters
	}
	})
	return dividedLinesData.filter(function (d) {return d.points.length > 1})
	}

	function simpleSearchFunction(pointA, pointB, current, parameters) {
	var pointCX = (pointA.x + pointB.x) / 2
	var pointCY = (pointA.y + pointB.y) / 2
	if (parameters({x: pointCX, y: pointCY}) === current) {
	return [{x: pointCX, y: pointCY}, pointB]
	}
	return [pointA, {x: pointCX, y: pointCY}]
	}

	function randomLineGenerator(width, height, points) {
	var pointDataSet = []
	var curY = 0.5
	for (var x = 0; x< points; x++) {
	curY += Math.random() * 0.3 - 0.15;
	curY = Math.max(curY, 0.05)
	curY = Math.min(curY, 0.95)
	pointDataSet.push({ x: x / points * width, y: curY * height })
	}
	return pointDataSet
	}

	function parameters(point) {
	if (point.x < 100) {
	return "before"
	}
	if (point.x > 400) {
	return "after"
	}
	if (point.y < 150) {
	return "above"
	}
	if (point.y > 350) {
	return "below"
	}
	return "normal"
	}

	var styleMap = {
	before: {"stroke-width": 6, "stroke-opacity": 0.5},
	after: {"stroke-dasharray": "5 5"},
	above: {stroke: "red"},
	below: {stroke: "green"},
	normal: {}
	}

	var lineData = randomLineGenerator(500,500,100);

	var line = d3.svg.line()
	.x(function (d) {return d.x})
	.y(function (d) {return d.y})
	.interpolate("basis")

	var dLineData = dividedLine(parameters, lineData);

	var color = d3.scale.category20()

	d3.select("svg")
	.selectAll("path.segment")
	.data(dLineData)
	.enter()
	.append("path")
	.attr("d", function (d) {return line(d.points)})
	.each(function (d){
	var baseStyle = {fill: "none", stroke: "black", "stroke-width": 2}
	d.key.forEach(function (p) {
	Object.assign(baseStyle, styleMap[p])
	})
	d3.select(this).style(baseStyle)
	})


	</script>
	</footer>

	</html>