CODEWITHSUNDEEP
javascriptd3.jsdata-visualizationdc.jscrossfilter
ricky
ricky

Reputation: 242

Rendering a multi-line chart in DC.js

JSFiddle here: https://jsfiddle.net/ayyrickay/k1crg7xu/47/

My code is a bit of a mess right now, but essentially, I have two choropleths, and I want to render a multiline chart based on the choropleth data - I just have no idea how to wrangle the data to make it work.

The line chart is be a composite line chart. One line would be New Yorker circulation data, the other would be Saturday Evening Post circulation data. The y axis is issue_circulation, the x axis is actual_issue_date

In the current implementation I’ve set up two crossfilters (one for each data set) and I’m creating a dimension for the choropleth and one for the line chart. The choropleths render properly, but I’ve yet to get the line charts to render. I can’t tell if its because of the format of my data ({key: date, value: y-axis-value}) or if my implementation of crossfilter is just too janky. I'm trying to understand based on other StackOverflow questions, but nothing I've tried seems to work (this includes prefiltering the data like I'm doing now, creating two different crossfilters and separate dimensions, trying to be meticulous apart parsing dates, etc.)

Upvotes: 3

Views: 511

Answers (1)

Gordon
Gordon

Reputation: 20150

When you're using a time scale for the X axis, the keys of your group should be Date objects. So it won't work to format the dates as strings when creating the dimensions & groups; instead just use raw Date objects.

Since Dates are slow, I suggest doing this as a data preprocessing step:

  data.forEach(function(d) {
    d.actual_issue_date = new Date(d.actual_issue_date);
  })

Then your dimension key functions just extract the date object:

const dimension1 = title1Circulation.dimension(d => d.actual_issue_date)
const lineChartYear1 = title1Circulation.dimension(d => d.actual_issue_date)
const lineChartYear2 = title2Circulation.dimension(d => d.actual_issue_date)

This ends up looking kind of messy, because the Saturday Evening Post data fluctuates a lot by week:

raw numbers by date

Zoomed in:

circulation zoomed in

Assuming this isn't a data cleaning problem (kind of looks like it?), one way to improve the display would be to aggregate by month:

const circulationGroup1 = lineChartYear1.group(d => d3.timeMonth(d)).reduceSum(d => d.issue_circulation)
const circulationGroup2 = lineChartYear2.group(d => d3.timeMonth(d)).reduceSum(d => d.issue_circulation)
composite
  .xUnits(d3.timeMonths)

This rounds the group key down to the beginning of each month, adding together all the values for each month.

Still kind of messy, but better:

aggregated by month

Welp, you still have some work to do, but anyway, that's why the data was not displaying!

Fork of your fiddle.

Upvotes: 2

Related Questions