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

Injecting services differently in specific scenarios in AngularJS

The 'npm start' command is failing to recognize the changes made to the

Disabling $routeprovider while implementing bootstrap

Determine if a specific checkbox with a particular id has been selected using JQuery

Utilizing Asynchronous Functions within a Loop

What is the best way to prevent certain search terms from appearing in search results on my website's search form

Transform your HTML audio player into a Vue component

What is the process of converting TypeScript to JavaScript in Angular 2?

Does the PHP include function act as an HTTP request?

ProgressMeterJS Plugin - Full-width Progress Bar

retrieveSourceData(), postmodification of Handsontable with Vue

"Image Reactor: Unleashing the Power

What is the best way to reach nested iframes?

Using JavaScript's regular expressions to identify a code block that commences with a specified pattern

Endless [React Native] onFlatList onEndReached callback invoked

Updating ng-model with the values from a property in a collection in AngularJS

The latest update to the Server Stats code mistakenly changes the channel to "undefined" instead of displaying the total number

Pattern for identifying text that exclusively consists of whitespace characters and `<br>` tags

The reason why Express is not directing to the static React build files is due to the absence of a specific URL slug

Attempting to abbreviate repetitive Javascript instructions