Custom Data Visualizations Using D3 and React

Challenge #3: Reusability

In case you missed the first or second blog in our custom data visualization series, feel free to catch up on them now. Or, if you prefer, simply skip ahead to the end of this article to skip to the end to see the code for all of the parameters passed through the customized timeline component.

The third challenge is to make the data visualization software reusable to other developers on the team. The data visualization is meant to be reused in multiple different projects, with varying data sets, that don’t necessarily match the type of data in the original data visualization which this is built for. Although it’s extra work up front to create this data visualization to be reusable, there are multiple benefits long-term.

One of the most important things to prioritize when discussing reusability is the data set. As discussed in the second blog post, we have three pieces of data that need to be plotted against the x-axis, time. We have two y axes and categorized icons for major events. The two y axes are quantity, represented by a bar, and cost, represented by a line. This visualization code will be reused for other data sets that aren’t represented by quantity and cost, so naming the data parameters by data and cost aren’t a feasible solution. For reusability purposes, the data set parameters will be bar and line, so that the same code for the data visualization can be reused with other data sets.

Because we have a bar graph, a line graph, and icons sporadically throughout the timeline, the icons need to be placed above the bar and line graph, as to not clutter the visualization. Some of the subsequent data sets will not use icons for important events, so I needed to create some parameters to pass through to the visualization for height of different sections. One parameter for the height of the icons, one for the height of the overlapping line and bar graphs, and a final height parameter for the x axis values and title.

It was also necessary to create parameters for horizontal placement. While the data will be placed on the x-axis for date placement, there need to be several parameters for horizontal placement so that it’s easily customizable between multiple applications. There needs to be a parameter for the first y axis, one for the data visualization itself, and one for the second y axis. Especially considering not all data sets and visualizations will need a second y axis, it’s important to be able to set that parameter to 0, so space isn’t saved for it.

Also, in order to make the visualization completely customizable and reusable, the developer needs to be able to customize the colors used for the data visualization software. Parameters are added for the bar and line, as well as the y axes colors to correspond to the bar and line graphs. For 508 accommodations, text has to have a 4.5:1 ratio foreground to background, but visualization pieces only need to have a 3:1 ratio. Therefore, the line and bar colors can be a lighter color (same hue, just a lighter shade) than the corresponding text color.

Since this data visualization will also be reused for multiple applications, we need to pass through parameters for the x axis title, both y axes titles, and the format of the text for all three axes (i.e. date, text and number value formats).

View All of the Parameters used in React Below:

<Timeline

data={data}iconSectionHeight={50} graphHeight={250} xAxisHeight={50} yAxisLeftWidth={50} yAxisRightWidth={70} paddingLeft={20} paddingRight={20} //barColor and lineColor must be compliant with 508 icon colors //these can be a lighter shade of the same color as the corresponding legend colors //best practice is to import theme colors; don't use hex values or RGB values barColor={lightBlue[500]} barHighlightColor={lightBlue[900]} lineColor={green[500]} //barLegendColor and lineLegendColor must be compliant with 508 text colors barLegendColor={lightBlue[700]} lineLegendColor={green[700]} //must be an integer lineWidth={2} //if barWidth = 1, then no spacing b/w the bars. barWidth={0.6} //the following MUST be included, even if they're blank quotes, or it will crash the timeline yRightLabelBefore="$" yRightLabelAfter="" xLabelBefore="" xLabelAfter="" yLeftLabelBefore="" yLeftLabelAfter="" //date format reference: https://github.com/d3/d3-time-format#locale_format xAxisDateFormat="%b %Y" dateLabelFormat="%b %d, %Y"//number format reference, visit http://bl.ocks.org/zanarmstrong/05c1e95bf7aa16c4768e yLeftAxisNumberFormat=",.0f" yRightAxisNumberFormat=",.0f" barLabelNumberFormat=",.0f" lineLabelNumberFormat=",.0f" barLabelBefore="" barLabelAfter=" " barLegend="" lineLabelBefore="$" lineLabelAfter="" lineLegend=""