CODEWITHSUNDEEP
javascriptd3.jsdata-visualizationdc.jscrossfilter
ricky
ricky

Reputation: 242

Why doesn't the same group render a correct line chart and corresponding range chart?

Fiddle here: https://jsfiddle.net/8yf7j3k6/11/

I'm trying to bring in a similar representation of my data for my range chart so that I can scrub on the range chart, but use the tooltip in the actual line chart of circulation data. Currently, I think I have two issues that are breaking my crossfilter and causing the range chart to look screwy:

  1. If I use the standard group generated by crossfilter, I end up with a value that's (circulation data * number_of_regions_in_which_magazine_was_circulated). To bypass this, I created a map that keeps track of the number of regions, and divides the represented values. I could not figure out how to create a group for this, and handle it at the data level. As a result, I'm just doing the correction at the render step - could this be the cause of my woes?

  2. I am using the exact same group for the line chart and the range chart. In the NASDAQ sample they appear to process the data differently, but it seems like they're just binning it differently, not doing a dramatic change. I don't understand why my graph has such a dramatic negative value at point zero.

Code for the offending charts below. Note that there's some boilerplate to muck through in the fiddle because there's no CDN for dateformat

    lineChart1
      .width(lineChart1Width-50)
      .height(lineChart1Height-50)
      .xUnits(d3.timeMonths)
      .margins({ top: 10, right: 10, bottom: 20, left: 80 })
      .dimension(dimension1)
      .rangeChart(lineChart1Range)
      .group(circulationGroup1)
      .colors(colorScales.blue[colorScales.blue.length - 1])
      .elasticY(true)
      .brushOn(false)
      .valueAccessor(function (d) {
          return d.value / circulationValuesMap[d.key]
      })
      .title(function (d) {
          return `${d.key.format('mmm dd, yyyy')}\nCirculation: ${d.value / circulationValuesMap[d.key]} `
      })
      .x(d3.scaleTime().domain([new Date(1925, 0, 1), new Date(1927, 0, 1)]))
      .render()


    lineChart1Range
      .width(getWidth('line-chart-1-range')) /* dc.barChart('#monthly-volume-chart', 'chartGroup'); */
      .height(40)
      .margins({top: 0, right: 50, bottom: 20, left: 80})
      .dimension(dimension1)
      .group(circulationGroup1)
      .valueAccessor(d => d.value / circulationValuesMap[d.key])
      .centerBar(true)
      .x(d3.scaleTime().domain([new Date(1925, 0, 1), new Date(1927, 0, 1)]))
      .round(d3.timeMonth.round)
      .alwaysUseRounding(true)
      .xUnits(() => 200);

    lineChart1Range.yAxis().ticks(0)

Upvotes: 1

Views: 41

Answers (1)

rioV8
rioV8

Reputation: 28643

The problem is your CSS.

This rule applies to every first child of any element that is inside a .line-chart-container, also to the brush overlay.

.line-chart-container :nth-child(1) {
  height: 15em;
}

This is also true for the :nth-child(2).

Replacing the 2 CSS height rules for the actual div elements

#line-chart-1 {
  height: 15em;
}
#line-chart-1-range {
  height: 2em;
}

removes the 2 large bars.

Also your line chart and range chart are not aligned, they have different widths and margins.

lineChart1Range
  //.width(getWidth('line-chart-1-range')) /* dc.barChart('#monthly-volume-chart', 'chartGroup'); */
  .width(lineChart1Width-50)
  .height(40)
  //.margins({top: 0, right: 50, bottom: 20, left: 80})
  .margins({top: 0, right: 10, bottom: 20, left: 80})
  .dimension(dimension1)
  .group(circulationGroup1)
  .valueAccessor(d => d.value / circulationValuesMap[d.key])
  .centerBar(true)
  .x(d3.scaleTime().domain([new Date(1925, 0, 1), new Date(1927, 0, 1)]))
  .round(d3.timeMonth.round)
  .alwaysUseRounding(true)
  .xUnits(() => 200);

All the bars have tool tips, you can't see them because the brush is catching all the mouse events. Maybe it is possible to disable tool tips for this chart

Upvotes: 2

Related Questions