How to use Simple local variable in d3 v4 for making line chart

[Sukhjeet Singh]

How can i use simple local variable for builting line chart

eg:-

var arrData = [

  {date: "24-Apr-17", close: 198},

  {date: "24-Apr-15", close: 500},

  {date: "24-Apr-16", close: 198},

  {date: "24-Apr-13", close: 198}  

];

Above is simple array

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

i don't want to call data from any file

Please help

[steve rickus]

Sukhjeet,

The purpose of the d3.tsv() and d3.csv() methods is to parse files into a data array just like the one you are showing below (an array of objects). If you already have your data in this format, then there is no need to call the d3 functions -- just use the array directly.

Here is an example of a line chart that uses the data defined in a javascript variable: http://bl.ocks.org/crayzeewulf/9719255

[Sukhjeet Singh]

Hi steve rickus 

Very thankful for the reply.
The example you have given to me consist the V3 version of the D3 Chart,I need to use the v4 version of the D3.

[Curran]

Greetings,

Probably the trickiest part will be parsing the dates. For this you can use the formatter string "%d-%b-%y". Another thing is, your data array is not sorted by date, so that will be another step required for correct rendering. Here's how you can parse and sort the dates:

var arrData = [

  {date: "24-Apr-17", close: 198},

  {date: "24-Apr-15", close: 500},

  {date: "24-Apr-16", close: 198},

  {date: "24-Apr-13", close: 198}  

];

var parseTime = d3.timeParse("%d-%b-%y");

var data = arrData

  .map(function (d){

    return {

      date: parseTime(d.date),

      close: d.close

    };

  })

  .sort(function (a, b){

    return d3.ascending(a.date, b.date);

  });

Here's a working example line chart from your data, including the above code.

Also, here's the original D3 v4 line chart example.

Best regards,

Curran

Datavis.tech

[Sukhjeet Singh]

Hi Curran
 Well Very much thank you for the answer really it was helpful for me

Well Can i get same example for the Multiple Lines Chart?
 Same local variables and with multiple city names example in d3 v4

[Curran]

Hi Sukhjeet,

This is a case where the search functionality of http://blockbuilder.org/search would come in handy.

There are some relevant results here:

http://blockbuilder.org/search#text=lines;d3version=v4

Here's one what you are looking for:

http://bl.ocks.org/d3noob/755a069aafbe66f3fd8497b9498df643

Best regards,

Curran

[Sukhjeet Singh]

Thank you so much 

In future if i need help i will come once again

--
You received this message because you are subscribed to a topic in the Google Groups "d3-js" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/d3-js/wU0dYvbMsps/unsubscribe.
To unsubscribe from this group and all its topics, send an email to d3-js+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Sukhjeet Singh

Contact :- +91-9033920153

Email :- sukhjee...@gmail.com

[Sukhjeet Singh]

Hello,

https://bl.ocks.org/d3noob/4db972df5d7efc7d611255d1cc6f3c4f
Can i have same Example with thelocal variables without using any files