Last week we took a , the open-source charting library, and built up our first bar chart using the data set. This week, we’ll expand on our initial example and show how we can begin to incorporate basic interactions. As a refresher, our data set includes rows of data that look like this:

{
  "Year of Birth": "2016",
  "Gender": "FEMALE",
  "Ethnicity": "ASIAN AND PACIFIC ISLANDER",
  "Child's First Name": "Olivia",
  "Count": "172",
  "Rank": "1"
}

The first visualization we built was a bar chart that showed the total number of children’s names accounted for in the data by year, which looked like this:

IDG

For our next visualization, let’s see if we can map the popularity of a name over time. To start off, we’ll build a simple line chart using the LineMarkSeries component. In order to get the popularity of the name Olivia over time, we can use the same filtering logic we used to get yearly totals if we add a filtering step ahead of time:

    const oliviaData = data.filter(d => d.firstName === 'Olivia');
    const oliviasByYear = Object.entries(oliviaData.reduce((acc, row) => {
      if(row.yearOfBirth in acc) {
        acc[row.yearOfBirth] = acc[row.yearOfBirth] + row.count
      } else {
        acc[row.yearOfBirth] = row.count
      }
      return acc;
    }, {})).map(([k, v]) => ({x: +k, y: v}));