Using d3.v3.min.js (https://d3js.org/d3.v3.min.js) to create index.html. The fol

ID: 3881840 • Letter: U

Question

Using d3.v3.min.js (https://d3js.org/d3.v3.min.js) to create index.html. The following should be written in HTML: Generate and plot 50 objects: 25 circles and 25 upward-pointing equilateral triangles. Each object’s X and Y coordinates should be a random integer between 0 and 100 inclusively (i.e., [0, 100]). An object’s X and Y coordinates should be independently computed. Each object’s size will be a value between 5 and 50 inclusively (i.e., [5, 50]). You should use the “symbol.size()” function of d3 to adjust the size of the object. Use the object’s X coordinate to determine the size of the object. You should use a linear scale for the size, to map the domain of X values to the range of [5,50]. Objects with larger x coordinate values should have larger sizes. This link (https://github.com/d3/d3-3.x-api-reference/blob/master/SVG-Shapes.md#symbol_size) explains how size is interpreted by symbol.size(). You may want to look at this example (http://bl.ocks.org/kiranml1/6972900) for the usage of “symbol.size()” function.

Explanation / Answer

Try this HTML Code

<!DOCTYPE html>

<html>

<head>

<title>D3 Symbols</title>

</head>

<body>

</div>

var svg = d3.select('#wrapper')

.append('svg')

.attr({'width':900,'height':600});

var arc = d3.svg.symbol().type('triangle-up')

.size(function(d){ return scale(d); });

var data = [2.5,2,3,4,5,6,7,8,3,12,11,9,3.2,3.5,6.6,7.4,5.8,2,4,5.6,9,10.5,8.7,8,6.5,7.3];

var scale = d3.scale.linear()

.domain([1,25])

.range([100,1000]);

var colorscale = d3.scale.linear()

.domain([1,25])

.range(["red","steelblue"]);

var group = svg.append('g')

.attr('transform','translate('+ 200 +','+ 200 +')');

var line = group.selectAll('path')

.data(data)

.enter()

.append('path')

.attr('d',arc)

.attr('fill',function(d){ return colorscale(d); })

.attr('stroke','#000')

.attr('stroke-width',1)

.attr('transform',function(d,i){ return "translate("+(i*38)+","+(10)+")"; });

var arc = d3.svg.symbol().type('circle')

</script>

</body>

</html>

Navigate

Using cylindrical shells, find the volume generated by revolving the regoin boun

Using data below prepare an analysis (differential/product line) showing what th

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

Using d3.v3.min.js (https://d3js.org/d3.v3.min.js) to create index.html. The fol

Question

Explanation / Answer

Related Questions

Navigate