Generating numerous circular elements for each item in the dataset using D3

Question

Generating numerous circular elements for each item in the dataset using D3

My dataset consists of various years and corresponding numerical values for each year as shown below:

    "data":[
            ["1951","306","27","159","34","82","4"],
            ["1956","426","41","203","47","119","16"],
            ["1959","562","67","267","48","148","32"],
            ["1960","605","76","282","54","157","36"],
            ["1961","665","88","310","57","168","42"],
            ["1962","749","116","340","60","189","44"],
            ["1963","847","140","375","63","215","54"],
            ...

The first element in each sub-array represents the year. I have set up two coordinate axes based on this data. Now, I am looking to create 6 circle elements for each of these entries. How can I achieve this by modifying the given code snippet?

var circles = svg.selectAll("circle")
                .data(data.data)
                .enter()
                .append("circle");

var circleAttr = circles. //Attributes defined here

javascript d3.js

Answer 1

Answer №1

To achieve the desired outcome, you can apply the

.selectAll(...).data(...).enter(...).append(...)

pattern consecutively by passing a function to the .data method during the second and subsequent iterations. This function will accept data from the previous level and produce an array of data items for that specific level.

Below is a simple example utilizing your dataset:

var colors = d3.scale.category10().domain([2000, 2010]);

var data = [
  ["2001", "100", "20", "50", "30"],
  ["2005", "150", "25", "70", "45"],
  ["2008", "200", "35", "90", "60"],
];

d3.select("body")
  .append("svg")
  .attr("width", 800)
  .attr("height", 600)
  .selectAll("g")
  .data(data)
  .enter()
  .append("g")
  .selectAll("circle")
  .data(function(d) {
    var year = +d[0];
    return d.slice(1).map(function(value) {
      return {
        year: year,
        value: +value
      };
    });
  })
  .enter()
  .append("circle")
  .attr("r", 4)
  .attr("cx", function(d) {
    return d.value;
  })
  .attr("cy", function(d) {
    return d.value;
  })
  .attr("fill", function(d) {
    return colors(d.year);
  });

Example: https://example.com/

Answer 2

To achieve the desired outcome, you can apply the

.selectAll(...).data(...).enter(...).append(...)

pattern consecutively by passing a function to the .data method during the second and subsequent iterations. This function will accept data from the previous level and produce an array of data items for that specific level.

Below is a simple example utilizing your dataset:

var colors = d3.scale.category10().domain([2000, 2010]);

var data = [
  ["2001", "100", "20", "50", "30"],
  ["2005", "150", "25", "70", "45"],
  ["2008", "200", "35", "90", "60"],
];

d3.select("body")
  .append("svg")
  .attr("width", 800)
  .attr("height", 600)
  .selectAll("g")
  .data(data)
  .enter()
  .append("g")
  .selectAll("circle")
  .data(function(d) {
    var year = +d[0];
    return d.slice(1).map(function(value) {
      return {
        year: year,
        value: +value
      };
    });
  })
  .enter()
  .append("circle")
  .attr("r", 4)
  .attr("cx", function(d) {
    return d.value;
  })
  .attr("cy", function(d) {
    return d.value;
  })
  .attr("fill", function(d) {
    return colors(d.year);
  });

Example: https://example.com/

Generating numerous circular elements for each item in the dataset using D3

Answer №1

Similar questions

Error message: AngularJS Jasmine spyOn: number has no functionality

Is there a way to continuously send out this ajax request?

Combining two JSON objects in JavaScript is simple when their IDs correspond to each other in both objects

In the year 2021, eliminate linked documents using mongoose/MongoDB middleware

What are some ways to enhance the opacity of a Material UI backdrop?

Anticipated a task or procedure but encountered an expression instead

Parse JSON files from a folder and concatenate them to a CSV using Node.js

Creating a Next.js dynamic route that takes in a user-submitted URL for customization

Transmit a data point from JavaScript to PHP

Accessing information from RESTful Web Service with Angular 2's Http functionality

Effortlessly sending multiple values from text fields using jQuery

What is the best way to customize Node.js configuration when it is executed through npm?

What is the best way to incorporate template literals (` `) into existing template literals?

What is the best way to create a smooth sliding effect using CSS?

Uncovering components generated by React JS with BeautifulSoup

The declaration file for the module 'bootstrap/dist/js/bootstrap' could not be located

Converting an HTML ul-li structure into a JavaScript object: Steps to save the structure

Opposite path matching with Next.js middleware

Tips for building a versatile client-server application with separate codebases for the JavaScript components

Understanding Java and JavaScript variables within a JSP webpage