Using D3.js to generate a set quantity of elements

Question

Using D3.js to generate a set quantity of elements

I am attempting to generate a specific number of elements using D3, extracting this information from a json file. Essentially, if the json data provided is n, I aim to display n elements within my svg.

This snippet showcases my code:

    // Setting up the dimensions of the svg element
    var w = 1000;
    var h = 50;

    // Establishing the dataset
    d3.json("people.json", function(dataset) {

    // Cycling through the json data
    for(var i=0; i<dataset.length; i++) {

                var svg = d3.select("body").append("svg")
                    .attr("width", w)
                    .attr("height", h);

            // Looping through the value
            for(var j=0; j<dataset[i].age; j++) {

                svg.selectAll("rect")
                        .data(dataset)
                        .enter()
                        .append("rect")
                        .attr("width", 20)
                        .attr("height", 20)
                        .attr("x", function(d, j) { return j * 55 })
            }

        }

    });

This represents an example of my json file (featuring arbitrary age values):

  [{
    "name": "Larry",
    "last": "Page",
    "country": "USA",
    "city": "Mountain View",
    "age": 32
  }, {
    "name": "Sergey",
    "last": "Bean",
    "country": "USA",
    "city": "Mountain View",
    "age": 37
  }, {
    "name": "Bill",
    "last": "Gates",
    "country": "USA",
    "city": "Seattle",
    "age": 60
  }, {
    "name": "Mark",
    "last": "Zuckemberg",
    "country": "USA",
    "city": "Palo Alto",
    "age": 35
  }, {
    "name": "Sergio",
    "last": "Marchionne",
    "country": "Italy",
    "city": "Milan",
    "age": 65
  }
]

The anticipated outcome should resemble the following ( [-] --> svg rectangle)

Larry Page: [-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-]
Sergey Bean: [-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-][-]

and so forth...

Could you assist me in identifying any errors in my approach?

Appreciate it!

javascript json d3.js svg

Answer 1

Answer №1

To implement the pure D3 approach without using any for-loops, as suggested by Gerardo Furtado in his comment on Stack Overflow, you can follow this code snippet:

d3.select("body").selectAll("svg")
  .data(dataset)              // Bind the entire dataset
  .enter().append("svg")      // Append one svg per object in dataset
  .selectAll("rect")
    .data(function(d) {       // Inherit data from svg by mapping of objects
      // Create an array of number of required rects
      return d3.range(d.age).map(function(d) { return d*15; }); 
    })
    .enter().append("rect")   // Append rects per svg
      .attr("x", function(d) {
        return d;             // Calculate position based on mapped data
      });

This code snippet is sufficient to draw the desired graph (ignoring attributes). For a complete example with all values set, refer to the following code snippet:

var dataset =   [{
    "name": "Larry",
    "last": "Page",
    "country": "USA",
    "city": "Mountain View",
    "age": 32
  }, {
    "name": "Sergey",
    "last": "Bean",
    "country": "USA",
    "city": "Mountain View",
    "age": 37
  }, {
    "name": "Bill",
    "last": "Gates",
    "country": "USA",
    "city": "Seattle",
    "age": 60
  }, {
    "name": "Mark",
    "last": "Zuckemberg",
    "country": "USA",
    "city": "Palo Alto",
    "age": 35
  }, {
    "name": "Sergio",
    "last": "Marchionne",
    "country": "Italy",
    "city": "Milan",
    "age": 65
  }
];

// Setting the size of the svg element
var w = 1000;
var h = 50;

// Including the dataset
//d3.json("people.json", function(dataset) {

  d3.select("body")
    .selectAll("svg")
    .data(dataset)              // Bind the entire dataset
    .enter().append("svg")      // Append one svg per object in dataset
      .attr("width", w)
      .attr("height", h)
    .selectAll("rect")
      .data(function(d) {       // Inherit data from svg by mapping of objects
        // Create an array of number of required rects
        return d3.range(d.age).map(function(d) { return d*15; }); 
      })
      .enter().append("rect")   // Append rects per svg
        .attr("width", 10)
        .attr("height",10)
        .attr("x", function(d) {
          return d;             // Position was calculated in above mapping in data()
        });


//});

<script src="https://d3js.org/d3.v4.js"></script>

Answer 2

To implement the pure D3 approach without using any for-loops, as suggested by Gerardo Furtado in his comment on Stack Overflow, you can follow this code snippet:

d3.select("body").selectAll("svg")
  .data(dataset)              // Bind the entire dataset
  .enter().append("svg")      // Append one svg per object in dataset
  .selectAll("rect")
    .data(function(d) {       // Inherit data from svg by mapping of objects
      // Create an array of number of required rects
      return d3.range(d.age).map(function(d) { return d*15; }); 
    })
    .enter().append("rect")   // Append rects per svg
      .attr("x", function(d) {
        return d;             // Calculate position based on mapped data
      });

This code snippet is sufficient to draw the desired graph (ignoring attributes). For a complete example with all values set, refer to the following code snippet:

var dataset =   [{
    "name": "Larry",
    "last": "Page",
    "country": "USA",
    "city": "Mountain View",
    "age": 32
  }, {
    "name": "Sergey",
    "last": "Bean",
    "country": "USA",
    "city": "Mountain View",
    "age": 37
  }, {
    "name": "Bill",
    "last": "Gates",
    "country": "USA",
    "city": "Seattle",
    "age": 60
  }, {
    "name": "Mark",
    "last": "Zuckemberg",
    "country": "USA",
    "city": "Palo Alto",
    "age": 35
  }, {
    "name": "Sergio",
    "last": "Marchionne",
    "country": "Italy",
    "city": "Milan",
    "age": 65
  }
];

// Setting the size of the svg element
var w = 1000;
var h = 50;

// Including the dataset
//d3.json("people.json", function(dataset) {

  d3.select("body")
    .selectAll("svg")
    .data(dataset)              // Bind the entire dataset
    .enter().append("svg")      // Append one svg per object in dataset
      .attr("width", w)
      .attr("height", h)
    .selectAll("rect")
      .data(function(d) {       // Inherit data from svg by mapping of objects
        // Create an array of number of required rects
        return d3.range(d.age).map(function(d) { return d*15; }); 
      })
      .enter().append("rect")   // Append rects per svg
        .attr("width", 10)
        .attr("height",10)
        .attr("x", function(d) {
          return d;             // Position was calculated in above mapping in data()
        });


//});

<script src="https://d3js.org/d3.v4.js"></script>

Answer 3

Answer №2

Here's a way to achieve it:

var dataset = [{
  "name": "John",
  "last": "Doe",
  "country": "USA",
  "city": "New York",
  "age": 45
}, {
  "name": "Jane",
  "last": "Smith",
  "country": "Canada",
  "city": "Toronto",
  "age": 30
}, {
  "name": "Michael",
  "last": "Johnson",
  "country": "UK",
  "city": "London",
  "age": 50
}];

// Setting up the svg element dimensions
var w = 800;
var h = 400;
var itemH = 15;
var itemW = 5;
var padding = 2;

// Append the svg element
var svg = d3.select("body").append("svg")
  .attr("width", w)
  .attr("height", h);

// Add groups for each data point in the dataset
var group = svg.selectAll("g")
  .data(dataset)
  .enter()
  .append('g');

// Iterate over each group
group.each(function(d, i) {

  var age = d.age;

  var self = d3.select(this);

  // Positioning the group vertically
  self.attr('transform', function() {
    return 'translate(0,' + (i * (itemH + padding)) + ')';
  });

  // Adding rectangles based on age
  d3.range(age).forEach(function(i) {
    self.append('rect')
      .attr('width', itemW)
      .attr('height', itemH)
      .attr('x', function() {
        return i * (itemW + padding);
      });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>


<body></body>

Answer 4

Here's a way to achieve it:

var dataset = [{
  "name": "John",
  "last": "Doe",
  "country": "USA",
  "city": "New York",
  "age": 45
}, {
  "name": "Jane",
  "last": "Smith",
  "country": "Canada",
  "city": "Toronto",
  "age": 30
}, {
  "name": "Michael",
  "last": "Johnson",
  "country": "UK",
  "city": "London",
  "age": 50
}];

// Setting up the svg element dimensions
var w = 800;
var h = 400;
var itemH = 15;
var itemW = 5;
var padding = 2;

// Append the svg element
var svg = d3.select("body").append("svg")
  .attr("width", w)
  .attr("height", h);

// Add groups for each data point in the dataset
var group = svg.selectAll("g")
  .data(dataset)
  .enter()
  .append('g');

// Iterate over each group
group.each(function(d, i) {

  var age = d.age;

  var self = d3.select(this);

  // Positioning the group vertically
  self.attr('transform', function() {
    return 'translate(0,' + (i * (itemH + padding)) + ')';
  });

  // Adding rectangles based on age
  d3.range(age).forEach(function(i) {
    self.append('rect')
      .attr('width', itemW)
      .attr('height', itemH)
      .attr('x', function() {
        return i * (itemW + padding);
      });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>


<body></body>

Using D3.js to generate a set quantity of elements

Answer №1

Answer №2

Similar questions

Accessing a specific child div within a parent div using JavaScript and CSS

Is there a way to use javascript to ensure that CSS variables stick even when overwritten by onclick events?

Issue with jsPDF: PNG file is either incomplete or corrupted

Switching React Icons when Clicked

Using Jquery selectors along with variables to perform targeted search operations

What is the process for validating dates using JavaScript?

Having trouble retrieving accurate data in jQuery ajax post success when running on localhost with XAMPP

Is there a way to incorporate an additional property into an existing JSON object within Azure Functions using C#?

Executing Puppeteer on a Cloud Platform and Transferring Its Output to JavaScript

.env file cannot be utilized in JavaScript

Is there a way to utilize a cookie in order for the website to recognize that I have already agreed to the terms?

Merging SCSS and CSS into a unified file using WebPack

Is it possible for me to return a function reference as a response to an API call?

Is it possible to turn off GPU rasterization for a particular SVG element in Google Chrome?

Display the URL with proper formatting in the print function

What is the best approach to implementing a blur function for a specific input within a parent component?

To toggle between two scope variables within a view when one is not defined

What could be the reason for the appearance of Next.js compile indicator in my final production build?

Update the value of a table cell with jQuery

Tips for refreshing a template with a click event