bumbeishvili · February 19, 2018 12:53
diff --git a/.block b/.block
 height: 600
 border: no 
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <head>
  <title>Mezzo</title>
 </head>

 <script src="https://d3js.org/d3.v4.min.js"></script>

 <body>

  <button type="button" name="start_button" onclick="isAnimating=true; animateData(0);">start</button>
  <button type="button" name="stop_button" onclick="isAnimating=false">stop</button>

  <script src="script-mezzo.js" type="text/javascript"></script>

  <script>
    setTimeout(function() { animateData(0); }, 1000);
  </script>

 </body>
diff --git a/script-mezzo.js b/script-mezzo.js
 /* script-mezzo.js

    transition a bunch of points from their current
    location to somewhere else. change color during transition.

    image -> halftone using simplistic algorithm a la
    https://en.wikipedia.org/wiki/Halftone

    ds: 2017-04-22 - 2017-04-25

 */

 // geometry of inner svg plotting area
 var margin = {
    top: 20,
    right: 20,
    bottom: 20,
    left: 20
 };

 //  in line with aspect ratio of image (based on image)
 var width = 1.5 * 241 - margin.left - margin.right;
 var height = 1.5 * 299 - margin.top - margin.bottom;

 // details about the data
 var dataFileName = "zlogo-cart+pol.csv"
 var varNames = {
    "xData": "y", // swap!
    "yData": "x",
    "xData1": "y1", // swap!
    "yData1": "x1",
    "szData": "sz",
 };

 // details about the transition
 var isAnimating = true;
 var transitionTime = 500; // ms
 var delayTime = 200; // ms
 var spiralJitter = 0.02; // proportion

 var iTransition = 0; // transition counter

 // setup x mapping
 var xValue = function(d) {
    return d[varNames.xData];
 }; // data -> value
 var xScale = d3.scaleLinear().range([0, width]), // value -> display
    xMap = function(d) {
        return xScale(xValue(d));
    }; // data -> display

 // setup y mapping
 var yValue = function(d) {
    return d[varNames.yData];
 }; // data -> value
 var yScale = d3.scaleLinear().range([0, height]), // value -> display
    yMap = function(d) {
        return yScale(yValue(d));
    }; // data -> display

 // dot matrix stuff
 var scatterRange = [10, 0.2]; // halftone points size
 var scatterScale = d3.scaleSqrt().domain([0, 1]).range(scatterRange);
 var scatterMap = function(d) {
    return scatterScale(d[varNames.szData]);
 };

 // create SVG
 var svg = d3.select("body")
    .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

 function setupData() {
    d3.csv(dataFileName, type, function(error, data) {
        console.log("loading data from csv")
        console.log(d3.extent(data, function(d) {
            return d.x;
        }));

        // global vars
        xExtent = d3.extent(data, function(d) {
            return d[varNames.xData];
        });
        yExtent = d3.extent(data, function(d) {
            return d[varNames.yData];
        });
        szExtent = d3.extent(data, function(d) {
            return d[varNames.szData];
        });

        // keep a copy of the data around.
        picData = data;

        // set domain
        xScale.domain(xExtent);
        yScale.domain(yExtent);

        // create dot pattern
        svg.append("g").selectAll(".circle")
            .data(data)
            .enter().append("circle")
            .attr("transform", "translate(" + margin.left + ", 0)")
            .attr("cx", xMap)
            .attr("cy", yMap)
            .attr("r", scatterMap);

        /* hook for making this interactive
        d3.select("body")
            .append("svg").append("g")
            .on("mouseover", function() {console.log('in');} )
            .on("mouseout", function() {console.log('out');} );
        */
    });

 }

 // type conversion - helper
 function type(d) {
    // numeric data
    d[varNames.xData] = +d[varNames.xData];
    d[varNames.yData] = +d[varNames.yData];
    d[varNames.xData1] = +d[varNames.xData1] * 0.8;
    d[varNames.yData1] = +d[varNames.yData1] * 0.8;
    d[varNames.szData] = +d[varNames.szData];

    return d;
 }

 function getData( update ) {
  var numValues = d3.selectAll('circle').data().length;

  if (+update == 0) {
    for (var i = 0; i < numValues; i++) {
        // Random # pairs
        var newNumber1 = Math.random() * xExtent[1];
        var newNumber2 = Math.random() * yExtent[1];
        dataset.push([newNumber1, newNumber2]);
      }
  } else if (+update == 1) {
    dataset = picData.map(function(i) {
        return [i.y, i.x];
    });
  } else  {
    dataset = picData.map(function(i) {
        return [i.y1 + spiralJitter * xExtent[1] * Math.random(),
                i.x1 + spiralJitter * yExtent[1] * Math.random()];
    });
  }

 return dataset;
 }

 // On click, update with new data
 var animateData = function(update) {

    console.log("update " + update);
    iTransition += 1; // update counter

    dataset = []; // Initialize empty array

    dataset = getData( update ) ;

    // Update circles
    svg.selectAll("circle")
        .data(dataset) // Update with new data
        .transition()
        .delay(delayTime)
        .duration(transitionTime)
        .attr("fill", function() {return iTransition % 2 ? "red" : "black";} ) // Change color
        // .attr("r", scatterSize * 5) // Change size
        .ease(d3.easeCubic)
        .attr("cx", function(d) {
            return xScale(d[0]); // Circle's X
        })
        .attr("cy", function(d) {
            return yScale(d[1]); // Circle's Y
        })
        .on("end", function(d, i) {
          // only execute this once. the trick is to check for one, e.g. the first (sentinel) element in the array!
            if (i === 1 & isAnimating === true) {
                animateData(iTransition % 3);
            }
        })
 }

 // call the setup.
 setupData();
diff --git a/thumbnail.png b/thumbnail.png
diff --git a/zlogo-cart+pol.csv b/zlogo-cart+pol.csv
	<!DOCTYPE html>
	<meta charset="utf-8">
	<head>
	<title>Mezzo</title>
	</head>

	<script src="https://d3js.org/d3.v4.min.js"></script>

	<body>

	<button type="button" name="start_button" onclick="isAnimating=true; animateData(0);">start</button>
	<button type="button" name="stop_button" onclick="isAnimating=false">stop</button>

	<script src="script-mezzo.js" type="text/javascript"></script>

	<script>
	setTimeout(function() { animateData(0); }, 1000);
	</script>

	</body>
	/* script-mezzo.js

	transition a bunch of points from their current
	location to somewhere else. change color during transition.

	image -> halftone using simplistic algorithm a la
	https://en.wikipedia.org/wiki/Halftone

	ds: 2017-04-22 - 2017-04-25

	*/

	// geometry of inner svg plotting area
	var margin = {
	top: 20,
	right: 20,
	bottom: 20,
	left: 20
	};

	// in line with aspect ratio of image (based on image)
	var width = 1.5 * 241 - margin.left - margin.right;
	var height = 1.5 * 299 - margin.top - margin.bottom;

	// details about the data
	var dataFileName = "zlogo-cart+pol.csv"
	var varNames = {
	"xData": "y", // swap!
	"yData": "x",
	"xData1": "y1", // swap!
	"yData1": "x1",
	"szData": "sz",
	};

	// details about the transition
	var isAnimating = true;
	var transitionTime = 500; // ms
	var delayTime = 200; // ms
	var spiralJitter = 0.02; // proportion

	var iTransition = 0; // transition counter

	// setup x mapping
	var xValue = function(d) {
	return d[varNames.xData];
	}; // data -> value
	var xScale = d3.scaleLinear().range([0, width]), // value -> display
	xMap = function(d) {
	return xScale(xValue(d));
	}; // data -> display

	// setup y mapping
	var yValue = function(d) {
	return d[varNames.yData];
	}; // data -> value
	var yScale = d3.scaleLinear().range([0, height]), // value -> display
	yMap = function(d) {
	return yScale(yValue(d));
	}; // data -> display

	// dot matrix stuff
	var scatterRange = [10, 0.2]; // halftone points size
	var scatterScale = d3.scaleSqrt().domain([0, 1]).range(scatterRange);
	var scatterMap = function(d) {
	return scatterScale(d[varNames.szData]);
	};

	// create SVG
	var svg = d3.select("body")
	.append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	function setupData() {
	d3.csv(dataFileName, type, function(error, data) {
	console.log("loading data from csv")
	console.log(d3.extent(data, function(d) {
	return d.x;
	}));

	// global vars
	xExtent = d3.extent(data, function(d) {
	return d[varNames.xData];
	});
	yExtent = d3.extent(data, function(d) {
	return d[varNames.yData];
	});
	szExtent = d3.extent(data, function(d) {
	return d[varNames.szData];
	});

	// keep a copy of the data around.
	picData = data;

	// set domain
	xScale.domain(xExtent);
	yScale.domain(yExtent);

	// create dot pattern
	svg.append("g").selectAll(".circle")
	.data(data)
	.enter().append("circle")
	.attr("transform", "translate(" + margin.left + ", 0)")
	.attr("cx", xMap)
	.attr("cy", yMap)
	.attr("r", scatterMap);

	/* hook for making this interactive
	d3.select("body")
	.append("svg").append("g")
	.on("mouseover", function() {console.log('in');} )
	.on("mouseout", function() {console.log('out');} );
	*/
	});

	}

	// type conversion - helper
	function type(d) {
	// numeric data
	d[varNames.xData] = +d[varNames.xData];
	d[varNames.yData] = +d[varNames.yData];
	d[varNames.xData1] = +d[varNames.xData1] * 0.8;
	d[varNames.yData1] = +d[varNames.yData1] * 0.8;
	d[varNames.szData] = +d[varNames.szData];

	return d;
	}

	function getData( update ) {
	var numValues = d3.selectAll('circle').data().length;

	if (+update == 0) {
	for (var i = 0; i < numValues; i++) {
	// Random # pairs
	var newNumber1 = Math.random() * xExtent[1];
	var newNumber2 = Math.random() * yExtent[1];
	dataset.push([newNumber1, newNumber2]);
	}
	} else if (+update == 1) {
	dataset = picData.map(function(i) {
	return [i.y, i.x];
	});
	} else {
	dataset = picData.map(function(i) {
	return [i.y1 + spiralJitter * xExtent[1] * Math.random(),
	i.x1 + spiralJitter * yExtent[1] * Math.random()];
	});
	}

	return dataset;
	}

	// On click, update with new data
	var animateData = function(update) {

	console.log("update " + update);
	iTransition += 1; // update counter

	dataset = []; // Initialize empty array

	dataset = getData( update ) ;

	// Update circles
	svg.selectAll("circle")
	.data(dataset) // Update with new data
	.transition()
	.delay(delayTime)
	.duration(transitionTime)
	.attr("fill", function() {return iTransition % 2 ? "red" : "black";} ) // Change color
	// .attr("r", scatterSize * 5) // Change size
	.ease(d3.easeCubic)
	.attr("cx", function(d) {
	return xScale(d[0]); // Circle's X
	})
	.attr("cy", function(d) {
	return yScale(d[1]); // Circle's Y
	})
	.on("end", function(d, i) {
	// only execute this once. the trick is to check for one, e.g. the first (sentinel) element in the array!
	if (i === 1 & isAnimating === true) {
	animateData(iTransition % 3);
	}
	})
	}

	// call the setup.
	setupData();