Assigning random color forEach

Community Help
1

I am new to d3 and trying to understand how to do things in d3 which can be done in javascript. For example, in javascript I can create data-driven rectangles and assign random color for each element with forEach loop, like folllowing

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>
</head>

<script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>

<body>
   
   <!--
    <script src="_d3.js"></script>-->
    <nav>
        <h1>Hello Reader</h1>
        <h2>Day1</h2>
        <p>Monday</p>
        <h2>Day2</h2>
        <p>Tuesday</p>
        <h2>Day3</h2>
        <p>Wednesday</p>
        <h2>Day4</h2>
        <p>Thursday</p>
    </nav>
    <main>
        <h1>Current Period</h1>

        <svg width="900" height="600">

        </svg>

        <h1>YTD</h1>

    </main>
<script>
//dataset
var array = [];
for (var i=0; i<5; i++) {
    array.push({});};
array.forEach((_x,i,r)=>{_x.colA='Day'+' '+(i+1);
                     _x.colB=Math.floor(500 * Math.random());});

var maxH = Math.max(...array.map(o => o.colB), 0);				 
					 
// console.log(array);

//creating svg				 

const svg = document.querySelector('svg');

// variable for the namespace 
const svgns = "http://www.w3.org/2000/svg"

//data driven rect


array.forEach((x,i)=>{
const hue = 360 * Math.random()    
var rect = document.createElementNS(svgns, 'rect');
    rect.setAttribute('class', 'cl' + i);
    rect.setAttribute('id', 'id' + i);
    rect.setAttribute('x', 10);
    rect.setAttribute('y', x.colB+100);
    rect.setAttribute('width', x.colB);
    rect.setAttribute('height', '20')
	rect.setAttribute("fill",`hsl(${hue}  100% 50%)`)
	svg.appendChild(rect);}
	);
	

	
</script>

</body>

</html>

How can I do the same in d3?

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>
</head>

<script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>

<body>
   
   <!--
    <script src="_d3.js"></script>-->
    <nav>
        <h1>Hello Reader</h1>
        <h2>Day1</h2>
        <p>Monday</p>
        <h2>Day2</h2>
        <p>Tuesday</p>
        <h2>Day3</h2>
        <p>Wednesday</p>
        <h2>Day4</h2>
        <p>Thursday</p>
    </nav>
    <main>
        <h1>Current Period</h1>

        <svg width="900" height="600">

        </svg>

        <h1>YTD</h1>

    </main>
<script>
//dataset
var array = [];
for (var i=0; i<5; i++) {
    array.push({});};
array.forEach((_x,i,r)=>{_x.colA='Day'+' '+(i+1);
                     _x.colB=Math.floor(500 * Math.random());});

var maxH = Math.max(...array.map(o => o.colB), 0);				 
					 

const start = d3.select("svg")


start
    .selectAll("rect")
    .data(array)
    .enter()
    .append("rect")
	.attr('class',(d,i)=>{return 'cl' + i})
	.attr('id',(d,i)=>{return 'id' + i})
    .attr("x", 10)
    .attr("y", (d) => { return d.colB+100 })
    .attr("height", '20')
    .attr("width", (d,i)=> { return d.colB})	

	
	
</script>

</body>

</html>

Thank you in advance.

2

I figured out

d3.select("svg").selectAll("g")
    .data(array)
    .enter()
    .append("g")
    .attr("fill",()=>{ const c1 = 360 * Math.random(); return `hsl(${c1}, 100%, 50%)`})
	.append("rect")
	.attr("x", 10)
    .attr("y", (d) => { return d.colB+100 })
    .attr("height", '20')
    .attr("width", (d,i)=> { return d.colB})
1 Like