CODEWITHSUNDEEP
d3.js
Rolf Nufable
Rolf Nufable

Reputation: 1

How to count events using year and plot line graph in d3.js v3

I would like to ask how to plot a line chart using data from a csv file.

I have successfully created a line graph using a csv file from a sample data set and plotting them using a data value that represents its frequency.

eg. Date Frequency Jan 1 2000 39.81 Feb 1 2000 36.35 Mar 1 2000 43.22 Apr 1 2000 28.37 May 1 2000 25.45 Jun 1 2000 32.54 Jul 1 2000 28.4 Aug 1 2000 28.4

Next what I want to do is, to just use the date, and base from the year of the date, count how many events are there for a corresponding year.

for example : Date (this is the actual date format from the csv) 10/20/2016 10/25/2016 11/17/2016 1/25/2017 3/13/2017 4/13/2017 4/21/2017 5/4/2017 5/3/2017 6/2/2017 6/2/2017 6/8/2017 6/8/2017 6/12/2017

so for year 2016 I have 3 events or frequencies. for 2017 I have 11, and then use the result to plot it on the line graph.

Is this possible ?

note : I'm using d3.js. v3

I'm using a different CSV file in data set 1 and data set 2

I have tried and successfully implemented a code similar to the one found in the link

https://www.d3-graph-gallery.com/graph/line_several_group.html

SAMPLE CODE: 

parseDate = d3.time.format("%b %d %Y").parse;

incidentline = d3.svg.line()
    .x(function (d) { return x(d.date); })
    .y(function (d) { return y(d.frequency); });


d3.csv('/samplegraphdata.csv', function (error, data) {

     data.forEach(function (d) {
        d.date = parseDate(d.date);
        d.frequency = +d.frequency;
    });

    // Scale the range of the data
    x.domain(d3.extent(data, function (d) { return d.date; }));
    y.domain([0, d3.max(data, function (d) { return d.frequency; })]);

The Expected result should be a line chart that has the year(s) on the x axis as and count on the y-axis.

And the data is being read from a CSV.

I have no actual results yet on my end because for now I'm just trying to figure out how to do this.

Im Sorry about the format of the dates from the CSV

it should be like this

dataset1 image

(this is the actual format)

Here is the sample result

sample Graph Result

this is the data format for data set 2

dataset 2

I'm sorry if my question is difficult to read, I'm usually posting in stack overflow.

Upvotes: 0

Views: 864

Answers (1)

Rolf Nufable
Rolf Nufable

Reputation: 1

I actually successfully tallied the data.

THis is the solution 

    data.forEach(function (d) {
        var splitdate = d.Date;
        console.log(d.Date);
        var year = splitdate.split('/')[2];


        tally[year] = (tally[year] || 0) + 1;
        console.log(tally[year]);

    });

    var data = [];

    for (var year in tally) {
        if (tally.hasOwnProperty(year)) {
            data.push({
                year: year,
                frequency: tally[year]
            });
            console.log(data);

My question is how Can I sanitize the x-axis to reflect the correct year.

I don't know why is became .016 .017 etc

Graph

Upvotes: 0

Related Questions