[solved]-Variables Xdomain Xrange Ydomain Yrange Cdomain Crange Initialized Array 0 1 Modify Array Q39040716
The variables xdomain, xrange, ydomain, yrange, cdomain andcrange have been initialized with the same array [0,1]. Modifythese arrays so that the d3.scaleLinear objects xs, ys and cscorrectly map data values and indices to the desired displayvalues.
- The scale xs() should map data values so the bars extend fromzero to as much as 100 pixels.
- The scale ys() should map the top edge of the bars from 100 to250.
- The scale xs() should set the colors of the bars based on thedata value, extending from “blue” for a data value of zero, to”orange” for the maximum data value.
<html>
<scriptsrc=’https://d3js.org/d3.v5.min.js’></script>
<body>
<svg width=150 height=300>
</svg>
<script>
xdomain = [0,1];
xrange = [0,1];
ydomain = [0,1];
yrange = [0,1];
cdomain = [0,1];
crange = [0,1];
// ENTER CODE HERE ONLY
xs = d3.scaleLinear().domain(xdomain).range(xrange);
ys = d3.scaleLinear().domain(ydomain).range(yrange);
cs = d3.scaleLinear().domain(cdomain).range(crange);
d3.select(‘svg’)
.selectAll(‘rect’)
.data([4,8,15,16,23,42])
.enter()
.append(‘rect’)
.attr(‘x’,20)
.attr(‘y’,function(d,i) {return ys(i);})
.attr(‘width’,function(d,i) {return xs(d);})
.attr(‘height’,10)
.style(‘fill’,function(d,i) {return cs(d);});
</script>
</body>
</html>
Solution should look like this:
DOM should look like this:
- rect: x = “20” y = “100” width = “9.52381” height = “10” style= “fill: rgb(24, 16, 231);”
- rect: x = “20” y = “130” width = “19.0476” height = “10” style= “fill: rgb(49, 31, 206);”
- rect: x = “20” y = “160” width = “35.7143” height = “10” style= “fill: rgb(91, 59, 164);”
- rect: x = “20” y = “190” width = “38.0952” height = “10” style= “fill: rgb(97, 63, 158);”
- rect: x = “20” y = “220” width = “54.7619” height = “10” style= “fill: rgb(140, 90, 115);”
- rect: x = “20” y = “250” width = “100” height = “10” style =”fill: rgb(255, 165, 0);”
Expert Answer
Answer to The variables xdomain, xrange, ydomain, yrange, cdomain and crange have been initialized with the same array [0,1]. Modi… . . .
OR
