iosonosempreio/index.html

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

                // dimensions
                var margin = {top: 20, right: 20, bottom: 30, left: 40},
                    svg_dx = 960,
                    svg_dy = 500
                    chart_dx = svg_dx - margin.right - margin.left,
                    chart_dy = svg_dy - margin.top - margin.bottom;

                var xScale = d3.scaleLinear()
                            .domain([0,9])
                            .range([margin.left, svg_dx])

                // data
                var y = d3.randomNormal(400, 100);
                var x_jitter = d3.randomUniform(-100, 100);


                var d = d3.range(250)
                          .map(function() {
                              const line = [0,1,2,3,4,5,6,7,8,9].map((d)=>([xScale(d), d3.randomUniform(-5,5)()]))
                              return [x_jitter(), y(), line];
                          });

                console.log(d)

                // fill
                var colorScale = d3.scaleLinear()
                                   .domain(d3.extent(d, function(d) { return d[1]; }))
                                   .range([0, 1]);


                // y position
                var yScale = d3.scaleLinear()
                               .domain(d3.extent(d, function(d) { return d[1]; }))
                               .range([chart_dy, margin.top]);

                // y-axis
                var yAxis = d3.axisLeft(yScale);

                // zoom
                var svg = d3.select("#block")
                            .append("svg")
                            .attr("width", svg_dx)
                            .attr("height", svg_dy)
                            .call(d3.zoom().on("zoom", zoom));      // ref [1]

               // plot data
               var line = svg.append("g")
                                .attr("id", "lines")
                                // .attr("transform", "translate(200, 0)")
                                .selectAll("path")
                                .data(d)
                                .enter()
                                .append("path")
                                .attr("transform", d=>"translate(0, "+yScale(d[1])+")")
                                .attr('d', d=>d3.line().curve(d3.curveMonotoneX)(d[2]))
                                .attr("fill","transparent")
                                .attr("stroke", function(d) {
                                    var norm_color = colorScale(d[1]);
                                    return d3.interpolateInferno(norm_color)
                                });

               // add y-axis
               var y_axis = svg.append("g")
                               .attr("id", "y_axis")
                               .attr("transform", 'translate('+margin.left+',0)')
                               .call(yAxis)

               function zoom() {

                   // re-scale y axis during zoom; ref [2]
                   y_axis.transition()
                         .duration(50)
                         .call(yAxis.scale(d3.event.transform.rescaleY(yScale)));

                   // re-draw circles using new y-axis scale; ref [3]
                   var new_yScale = d3.event.transform.rescaleY(yScale);
                   line
                        .attr("transform", d=>"translate(0, "+new_yScale(d[1])+")");
               }

            // references
            // [1]: http://bl.ocks.org/mbostock/3680999
            // [2]: http://bl.ocks.org/mbostock/db6b4335bf1662b413e7968910104f0f
            // [3]: http://stackoverflow.com/questions/22355565/d3-prevent-distortion-when-zooming

        </script>
</body>

## thumbnail.png

      
    Raw
  

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

	// dimensions
	var margin = {top: 20, right: 20, bottom: 30, left: 40},
	svg_dx = 960,
	svg_dy = 500
	chart_dx = svg_dx - margin.right - margin.left,
	chart_dy = svg_dy - margin.top - margin.bottom;

	var xScale = d3.scaleLinear()
	.domain([0,9])
	.range([margin.left, svg_dx])

	// data
	var y = d3.randomNormal(400, 100);
	var x_jitter = d3.randomUniform(-100, 100);


	var d = d3.range(250)
	.map(function() {
	const line = [0,1,2,3,4,5,6,7,8,9].map((d)=>([xScale(d), d3.randomUniform(-5,5)()]))
	return [x_jitter(), y(), line];
	});

	console.log(d)

	// fill
	var colorScale = d3.scaleLinear()
	.domain(d3.extent(d, function(d) { return d[1]; }))
	.range([0, 1]);


	// y position
	var yScale = d3.scaleLinear()
	.domain(d3.extent(d, function(d) { return d[1]; }))
	.range([chart_dy, margin.top]);

	// y-axis
	var yAxis = d3.axisLeft(yScale);

	// zoom
	var svg = d3.select("#block")
	.append("svg")
	.attr("width", svg_dx)
	.attr("height", svg_dy)
	.call(d3.zoom().on("zoom", zoom)); // ref [1]

	// plot data
	var line = svg.append("g")
	.attr("id", "lines")
	// .attr("transform", "translate(200, 0)")
	.selectAll("path")
	.data(d)
	.enter()
	.append("path")
	.attr("transform", d=>"translate(0, "+yScale(d[1])+")")
	.attr('d', d=>d3.line().curve(d3.curveMonotoneX)(d[2]))
	.attr("fill","transparent")
	.attr("stroke", function(d) {
	var norm_color = colorScale(d[1]);
	return d3.interpolateInferno(norm_color)
	});

	// add y-axis
	var y_axis = svg.append("g")
	.attr("id", "y_axis")
	.attr("transform", 'translate('+margin.left+',0)')
	.call(yAxis)

	function zoom() {

	// re-scale y axis during zoom; ref [2]
	y_axis.transition()
	.duration(50)
	.call(yAxis.scale(d3.event.transform.rescaleY(yScale)));

	// re-draw circles using new y-axis scale; ref [3]
	var new_yScale = d3.event.transform.rescaleY(yScale);
	line
	.attr("transform", d=>"translate(0, "+new_yScale(d[1])+")");
	}

	// references
	// [1]: http://bl.ocks.org/mbostock/3680999
	// [2]: http://bl.ocks.org/mbostock/db6b4335bf1662b413e7968910104f0f
	// [3]: http://stackoverflow.com/questions/22355565/d3-prevent-distortion-when-zooming

	</script>
	</body>