Count of daily features in JavaScript

Question

Count of daily features in JavaScript

Suppose there is a json document structured as follows:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "time": 1438342780,
        "title": "Iran's foreign minister calls for world's nuclear weapons states to disarm",
        "author": "Julian Borger",
        "web_id": "world/2015/jul/31/iran-nuclear-weapons-states-disarm-israel"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -77.26526,
          38.90122
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "time": 1438300867,
        "title": "Big bangs over the white cliffs of Dover as unique 1915 artillery gun is fired again",
        "author": "Maev Kennedy",
        "web_id": "world/2015/jul/31/big-bangs-over-white-cliffs-dover-unique-1915-artillery-gun-fired-again"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          1.3,
          51.13333
        ]
      }
    }
  ]
}

If we need to extract the 'feature' array from the json and determine the total number of features for a specific date, we would aim for an output like this:

{
  "date": 7/31/2015,
  "number": 2
}

The current approach in handling the data involves utilizing D3.js to load the json file:

d3.json('path/to/json', function(json) {
    data = json;
});

As someone fairly new to JavaScript and D3, seeking guidance on how to achieve this task efficiently. Additional information can be provided upon request. Appreciate any assistance in advance!

javascript json d3.js

Answer 1

Answer №1

This code snippet is tailored for your needs, as it generates an array of objects with specific properties.

const input = yourJSONObject;
const map = {};
const outputArray = [];

for (let index = 0; index < input.features.length; index++) {
 const reference = new Date(input.features[index].properties.time * 1000).toDateString();
 if (map[reference] === undefined) {
  map[reference] = outputArray.push({
    date: reference,
    number: 1
  }) - 1;
 } else {
    outputArray[map[reference]].number++;
 }
}

console.log(outputArray); // Example result: [ { date: 'Sat Jan 17 1970', number: 2 } ]

Answer 2

This code snippet is tailored for your needs, as it generates an array of objects with specific properties.

const input = yourJSONObject;
const map = {};
const outputArray = [];

for (let index = 0; index < input.features.length; index++) {
 const reference = new Date(input.features[index].properties.time * 1000).toDateString();
 if (map[reference] === undefined) {
  map[reference] = outputArray.push({
    date: reference,
    number: 1
  }) - 1;
 } else {
    outputArray[map[reference]].number++;
 }
}

console.log(outputArray); // Example result: [ { date: 'Sat Jan 17 1970', number: 2 } ]

Answer 3

Answer №2

To successfully analyze your data, it is crucial to note that the time values are stored in Epoch time format. Therefore, you will need to convert them into readable dates by utilizing this method.

Once the conversion is complete, you can proceed to iterate through the features array and keep track of the occurrence count for each date.

var features = yourJSONObject.features;
var featuresByDate = {};

for (var i = 0, len = features.length; i < len; i++) {
    // retrieve the current feature's date
    var epochTime = features[0].properties.time;
    var date = new Date(0);
    date.setUTCSeconds(epochTime);

    // transform the date into '7/31/2015' format
    var dateStr = (date.getMonth() + 1) + '/' + date.getDate() + '/' + date.getFullYear();

    // check if the date has been counted before
    if (!featuresByDate.hasOwnProperty(dateStr)) {
        featuresByDate[dateStr] = 1; // first occurrence of the date
    } else {
        featuresByDate[dateStr]++; // increment counter for the date
    }
}

Answer 4

To successfully analyze your data, it is crucial to note that the time values are stored in Epoch time format. Therefore, you will need to convert them into readable dates by utilizing this method.

Once the conversion is complete, you can proceed to iterate through the features array and keep track of the occurrence count for each date.

var features = yourJSONObject.features;
var featuresByDate = {};

for (var i = 0, len = features.length; i < len; i++) {
    // retrieve the current feature's date
    var epochTime = features[0].properties.time;
    var date = new Date(0);
    date.setUTCSeconds(epochTime);

    // transform the date into '7/31/2015' format
    var dateStr = (date.getMonth() + 1) + '/' + date.getDate() + '/' + date.getFullYear();

    // check if the date has been counted before
    if (!featuresByDate.hasOwnProperty(dateStr)) {
        featuresByDate[dateStr] = 1; // first occurrence of the date
    } else {
        featuresByDate[dateStr]++; // increment counter for the date
    }
}

Answer 5

Answer №3

Two different functions are utilized in this code snippet. The first function is responsible for obtaining the accurate date based on the epoch time provided, while the second function iterates through the features to construct a temporary object. Subsequently, it further iterates through the object to generate an array containing date and number objects.

function retrieveDate(time) {
  var d = new Date(0);
  d.setUTCSeconds(time);
  return [d.getMonth() + 1, d.getDate(), d.getFullYear()].join('/');
}

function extractData(data) {
  var obj = data.features.reduce(function(prev, curr) {
    var date = retrieveDate(curr.properties.time);
    prev[date] = (prev[date] + 1) || 1;
    return prev;
  }, {});
  return Object.keys(obj).map(function (element) {
    return { date: element, number: obj[element] };
  });
}

extractData(data);

OUTPUT

[
  {
    "date": "7/31/2015",
    "number": 2
  }
]

DEMO

Answer 6

Two different functions are utilized in this code snippet. The first function is responsible for obtaining the accurate date based on the epoch time provided, while the second function iterates through the features to construct a temporary object. Subsequently, it further iterates through the object to generate an array containing date and number objects.

function retrieveDate(time) {
  var d = new Date(0);
  d.setUTCSeconds(time);
  return [d.getMonth() + 1, d.getDate(), d.getFullYear()].join('/');
}

function extractData(data) {
  var obj = data.features.reduce(function(prev, curr) {
    var date = retrieveDate(curr.properties.time);
    prev[date] = (prev[date] + 1) || 1;
    return prev;
  }, {});
  return Object.keys(obj).map(function (element) {
    return { date: element, number: obj[element] };
  });
}

extractData(data);

OUTPUT

[
  {
    "date": "7/31/2015",
    "number": 2
  }
]

DEMO

Answer 7

Answer №4

Although I am not familiar with D3, you can achieve this using pure JS:

var json = {
    "features": [{
        "type": "Feature",
        "properties": {
            "time": 1438342780,
            "title": "Iran's foreign minister calls for world's nuclear weapons states to disarm"
        }
    }, {
        "type": "Feature",
        "properties": {
            "time": 1438300867,
            "title": "Big bangs over the white cliffs of Dover as unique 1915 artillery gun is fired again"
        }
    }, {
        "type": "Feature same date",
        "properties": {
            "time": 1448300867,
            "title": "Big bangs over the white cliffs of Dover as unique 1915 artillery gun is fired again"
        }
    }]
}

var counts = {}

function secondsToDate(seconds) {
    var date = new Date(1970,0,1);
    date.setSeconds(seconds);
    return date.toDateString();
}

json.features.reduce((counts, feature) => {
    var date = secondsToDate(feature.properties.time)
    if (counts[date]) {
        counts[date]++
    } else {
        counts[date] = 1
    }
    return counts
}, counts)

console.log(counts) // {'Fri Jul 31 2015': 2, 'Mon Nov 23 2015': 1}

~~The missing bit is parsing your timestamp into a date.~~

Now grouping on dates. Maybe now the downvoter can undo that!

I added an object with a replicated timestamp to highlight the count going up.

Answer 8

Although I am not familiar with D3, you can achieve this using pure JS:

var json = {
    "features": [{
        "type": "Feature",
        "properties": {
            "time": 1438342780,
            "title": "Iran's foreign minister calls for world's nuclear weapons states to disarm"
        }
    }, {
        "type": "Feature",
        "properties": {
            "time": 1438300867,
            "title": "Big bangs over the white cliffs of Dover as unique 1915 artillery gun is fired again"
        }
    }, {
        "type": "Feature same date",
        "properties": {
            "time": 1448300867,
            "title": "Big bangs over the white cliffs of Dover as unique 1915 artillery gun is fired again"
        }
    }]
}

var counts = {}

function secondsToDate(seconds) {
    var date = new Date(1970,0,1);
    date.setSeconds(seconds);
    return date.toDateString();
}

json.features.reduce((counts, feature) => {
    var date = secondsToDate(feature.properties.time)
    if (counts[date]) {
        counts[date]++
    } else {
        counts[date] = 1
    }
    return counts
}, counts)

console.log(counts) // {'Fri Jul 31 2015': 2, 'Mon Nov 23 2015': 1}

~~The missing bit is parsing your timestamp into a date.~~

Now grouping on dates. Maybe now the downvoter can undo that!

I added an object with a replicated timestamp to highlight the count going up.

Count of daily features in JavaScript

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Search and extract JSON data in MySQL

Leveraging the "dialogclose" event within jQuery Mobile

Assign a value to the Angular directive for the SharePoint People Picker

Switch between accordion items

"Use jquerytools to create a dynamic play/pause button functionality for scrollable content

"Single-use: Ajax event executes only on the first attempt

Playing audio from local blob data is not supported on mobile browsers

Retrieve the current state of the toggle component by extracting its value from the HTML

When trying to export a JSON file from an Angular app, the URL is prefixed with 'unsafe' and the download fails with a network error message

The properly grouped image failed to load

Executing the command causes an error when res.download() is called, resulting in a request

get the value from an array by applying jq

How can you include a multi-layered array within another multi-layered array using TypeScript?

Inject the code snippet from CodePen into a WordPress webpage

What are some methods to improve the performance of this jQuery-powered webpage?

Is there a way to personalize the chart tooltip in jqplot to fit my preferences?

AngularJS - Refreshing Controller when Route Changes

Symfony's DataTables is encountering an issue with the JSON response, showing

What is the best way to pass a single object from an array of objects to zingchart?

Populate the existing SQL view with data from the Json table