using array like object (Node List) with in SVG element - d3 Java Script

Question

I am quite new to java script and using d3 library to my dashboard development. I am trying to develop a scatter plot with values in y axis and time in x axis.

I have data stored in array like format(Node List) as follows (PFA)enter image description here,

data = [
0: {value:"2351", date:"5/12/2019 6:06:06 AM", type: "3"}
1: {value: "2670", date: "5/12/2019 6:06:07 AM", type: "2"}
2: {value: "2670", date: "5/12/2019 6:06:07 AM", type: "2"}
]

I want to pass this data to plot scatter plot for which i am using code as follows,

d3.csv("data.csv", function(error, data) {

data = processedData;

var parser = d3.timeParse("%d-%m-%Y %H:%M:%S");  

data.date = parser(data.date); 

debugger;


//data.date = parser(data.date);

  // Add X axis --> it is a date format
    var x = d3.scaleTime()
      .domain(d3.extent(data, function(d) { return parser(d.date); }))
      .range([ 0, width ]);
    svg.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x).ticks(15));

    // Add Y axis
    var y = d3.scaleLinear()
      .domain([1200, d3.max(data, function(d) { return +d.value; })])
      .range([ height, 0 ]);
    svg.append("g")
      .call(d3.axisLeft(y));
    // Color scale: give me a specie name, I return a color
    var color = d3.scaleOrdinal()
      .domain(["1", "2", "3", "4" ])
      .range([ "#402D54", "#D18975", "#8FD175", "#69b3a2"]);

      // Add dots
    svg.append('g')
      .selectAll("dot")
      .data(data)
      .enter()
      .append("circle")
        .attr("cx", function (d) { return x(parser(d.date)); } )
        .attr("cy", function (d) { return y(d.value); } )
        .attr("r", 1.3)
        .style("fill", function (d) { return color(d.type); });


});

While running this script, the graph is not getting plotted as expected. I guess the problem is, in svg element I am trying to use d.date function to call it values. But in node list, this functions are not working. Can anyone suggest me how we can convert the above nodelist data to array and use it in my svg element.

Gerardo Furtado · Accepted Answer · 2020-02-24 08:54:52Z

1

Your specifier is incorrect. Given your date string structure ("5/12/2019 6:06:06 AM"), it should be:

var parser = d3.timeParse("%d/%m/%Y %I:%M:%S %p");

PS: Besides that main problem, you have an issue with the margins, specially when translating the axes. I suggest you set the margins (top, bottom, left and right) and then change the scales and the axes' groups accordingly.

answered Feb 24, 2020 at 8:54

Gerardo Furtado

102k9 gold badges128 silver badges178 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

karthik Over a year ago

Many thanks Gerardo. Yep, now it works. Sure, I will set margins as well.

Collectives™ on Stack Overflow

using array like object (Node List) with in SVG element - d3 Java Script

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related