Old school D3 from simpler times

All examples By author By category About

tomshanley

Full window Github gist

SVG gradient angle in different view boxes

Trying out gradient fills on an angle

Built with blockbuilder.org

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <script src="https://d3js.org/d3.v4.min.js"></script>
  	<script src="triangleEquations.js"></script>

<style>
        body {
            margin: 0;
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
          	background: DarkSlateBlue;
        }

g.tick > line {
            stroke: lightgrey;
        }

g.tick > text {
            fill: lightgrey;
        }

</style>
</head>

<body>
    <script>

let width = 100;
        let height = 300;
				
      	let gradientAngleDegrees = 30;
      	let gradientAngle = 30 * (Math.PI/180);
      	
        const gradientColours = [
            { "offset": "0%", "stopColor": "yellow" },
          { "offset": "19%", "stopColor": "yellow" },
            { "offset": "20%","stopColor": "MediumVioletRed" },
          { "offset": "69%","stopColor": "MediumVioletRed" },
            { "offset": "70%", "stopColor": "Indigo" },
            { "offset": "100%", "stopColor": "Indigo" }
        ];

const margin = { "top": 50, "right": 50, "bottom": 50, "left": 50 };
        
        let svg = d3.select("body")
            .append("svg")
            .attr("width", 500 + margin.left + margin.right)
            .attr("height", 500 + margin.top + margin.bottom);
      
      	let defs = svg.append("defs");
      
      	let offset = 0;
      
				let series = [1,2,3];
        
        series.forEach(function(d){
          
         let g = svg.append("g")
            .attr("transform", "translate(" + (d * 120) +"," + (d * offset + 10) + ")");
          
          let rectHeight = (height * d/3);
          
          let bottom = (height * d/3) + (height * (3 - d)/3);
         
          let x1 = width;
          let y1 = bottom;
          let x2 = -(oppositeSin(gradientAngle, height));
          let y2 = height - (adjacentCos(gradientAngle, height));
                
          	let gradient = defs.append("linearGradient")
                .attr("id", "gradient" + d)
                .attr("x1", 0)
                .attr("y1", 0)
                .attr("x2", 1)
                .attr("y2", 0)
            		.attr("gradientUnits", "userSpaceOnUse")
            		.attr("gradientTransform","rotate(45,0,300)")
            		
            gradient.selectAll("stop")
                .data(gradientColours)
                .enter()
                .append("stop")
                .attr("offset", function (d) { return d.offset; })
                .attr("stop-color", function (d) { return d.stopColor; });

let rect = g.append("rect")
                .attr("x", 0)
                .attr("y", height - rectHeight)
            		.attr("width", width)
            		.attr("height", rectHeight)
                .style("fill", "url(#gradient" + d + ")")
            		//.attr("transform", "skewY(-45)")

})

</script>
</body>

https://d3js.org/d3.v4.min.js