#### What Will I Learn? - Develop a Range Series Chart #### Requirements - Basics of HTML and CSS - JavaScript Essentials - Know the use crossfilter.js and d3.js - Knowledge about statistical data #### Difficulty - Intermediate #### Tutorial Contents - Introduction - Create Working Environment - Develop a Range Series Chart ##### Introduction Today we are going to develop a Range Series Chart using dc.js library. This will be developed using filter([]) method of ``` dc.js ``` . We will use series charts, one will be the range chart and the other will be the focus chart. For our chart we use Morley Experimental data in csv format. You can download it from [github ](https://raw.githubusercontent.com/defunctzombie/d3-examples/master/box-plot/morley.csv) . Here is the final output of our range series chart. ![range-series-chart.gif](https://res.cloudinary.com/hpiynhbhq/image/upload/v1520663237/ixtpx1v680kuqldvxzfa.gif) ##### Create Working Environment First of all we'll create working environment to work with dc.js. For this open your text editor, create a new file and save it with name ``` rangeSeries.html ```. Now write all the necessary code for the HTML file. Write this code... ``` Series Chart ``` Then link your dc.js library to your files and also other two libraries dc.js depends upon, crossfilter.js and d3.js. ``` ``` Now write the code to give heading to our page and also write the div for our charts. ```

Series Chart: Morely Experiment

``` ##### Develop Range Series Chart Now its time to move toward our chart, first create two objects of of seriesChart class, and pass them the ids of the div we developed above. ``` var seriesChart = dc.seriesChart("#seriesChart"); var seriesChart2 = dc.seriesChart("#seriesChart2"); ``` Now take your csv file and paste it in your working directory. To use the data from a csv file, we'll have to parse it first. This can be done through d3.js, this library give us a method csv([]) - allow us to parse the csv file. ``` d3.csv("morley.csv", function(error, exp){ // the rest of the code will be written here ... }); ``` As I already written about the cvs method, it returns the data in string, this creates a problem for a numeric data. We've to do type conversion. Write this code to do this .... ``` exp.forEach(function(d){ d.Speed = +d.Speed; d.Expt = +d.Expt; d.Run = +d.Run; }); ``` Now feed the parsed data to the crosssfilter.js library, this allow us to create dimension and group the data. ``` var facts = crossfilter(exp); ``` Now create dimension and then grouped the data. Our both chart are the same, so we use same dimension and group for the chart. ``` var dimensionByRun = facts.dimension(function(d){ return [d.Expt, d.Run]; }); var groupByRun = dimensionByRun.group().reduceSum(function(d){ return d.Speed;}) ``` As we create the objects of our charts now use these objects to develop our chart. Create our first chart. set the with and height and pass the dimension and group that we created above. ``` seriesChart .width(1350) .height(300) .margins({top:40,bottom:60,right:80,left:60}) .dimension(dimensionByRun) .chart(function(chart){ return .group(groupByRun) ``` We'll use line chart fro our series chart. So create the sub charts in series chart with .chart([]) method ``` .chart(function(chart){ return dc.lineChart(chart)}) ``` Now write all the other necessary methods require to create our series chart. For more details you can check our [Series Chart Tutorials](https://utopian.io/utopian-io/@faad/tutorial-9-dive-into-dc-js-a-javascript-library-series-chart) ``` .brushOn(false) .keyAccessor(function(d){ return d.key[1]; }) .valueAccessor(function(d){ return d.value; }) .seriesAccessor(function(d){ return d.key[0]; }) .x(d3.scale.linear().domain([1,25])) .legend(dc.legend().x(100).y(150).itemHeight(10).gap(5).horizontal(3)) .xAxisLabel("X Axis") .yAxisLabel("Y Axis") .mouseZoomable(true) .elasticX = function() { return arguments.length ? this : false; }; ``` output: ![range-series-chart-1.JPG](https://res.cloudinary.com/hpiynhbhq/image/upload/v1520665932/q3hvyrzxbwn4q7p2jycw.jpg) As you know we are creating range series chart, it contains the two charts focus chart and range chart. Our above chart will be our focus chart, and focus chart contains an extra method ``` .rangeChart([]) ``` and takes an argument the object of rangeChart. So, add this method to our above chart. ``` .rangeChart(seriesChart2) // seriesChart2is our range Chart ``` Now its time to create our range chart, use the ``` seriesChart2 ``` object to create our range chart. our range chart will be same like our focus chart but we decrease the width and height of the range chart. First, set the width and height of the chart and pass it the dimension and group data. ``` seriesChart2 .width(700) .height(200) .margins({top:40,bottom:60,right:80,left:60}) .dimension(dimensionByRun) ``` Now create the sub chart usign the ``` .chart([]) ``` method. ``` .chart(function(chart,_,_,i) { var chart = dc.lineChart(chart); return chart; }) ``` Now write all the other necessary methods. ``` .group(groupByRun) .keyAccessor(function(d){ return d.key[1]; }) .valueAccessor(function(d){ return d.value; }) .seriesAccessor(function(d){ return d.key[0]; }) .x(d3.scale.linear().domain([1,25])) .legend(dc.legend().x(100).y(150).itemHeight(10).gap(5).horizontal(3)) .xAxisLabel("X Axis") .yAxisLabel("Y Axis"); ``` You can see, its the same like our focus chart except the .chart([]) method. This is because our both chart are the same. If we see the out put ![range-series-chart-2.JPG](https://res.cloudinary.com/hpiynhbhq/image/upload/v1520666565/wv7ohvldz7ptydv2yxm5.jpg) Now its time to filter focus chart when we brush on our range chart. For this take our ``` .chart([]) ``` method of ``` seriesChart2 ``` and replace it with this code. ``` .chart(function(chart,_,_,i) { var chart = dc.lineChart(chart); if(i===0) chart.on('filtered', function (chart) { if (!chart.filter()) { dc.events.trigger(function () { seriesChart2.focusChart().x().domain(seriesChart2.focusChart().xOriginalDomain()); seriesChart2.focusChart().redraw(); }); } else if (!ranges(chart.filter(), seriesChart2.focusChart().filter())) { dc.events.trigger(function () { seriesChart2.focusChart().focus(chart.filter()); }); } }); return chart; }) ``` Here you can see we use the ``` ranges([]) ```method in the ``` if else() ``` body. We'll develop this method to compare the ranges of ``` focusChart ``` and ``` rangeChart ```. ``` function ranges(r1, r2){ if (!r1 && !r2) { return true; } else if (!r1 || !r2) { return false; } else if (r1.length === 0 && r2.length === 0) { return true; } else if (r1[0].valueOf() === r2[0].valueOf() && r1[1].valueOf() === r2[1].valueOf()) { return true; } return false; } ``` Now our charts are ready to work fine. See the output. ![range-series-chart-3.JPG](https://res.cloudinary.com/hpiynhbhq/image/upload/v1520667157/lyltraog01b0nvpqqzbc.jpg) Our chart is working as expected but here is one problem, the series line in the chart are not looks good, they aren't is the smooth. Here you've to add ``` .interpolate('basis') ``` method to your .chart([]) methos, replace old code with this code in both charts. ``` dc.lineChart(chart).interpolate('basis').evadeDomainFilter(true); ``` ![range-series-chart-4.JPG](https://res.cloudinary.com/hpiynhbhq/image/upload/v1520667665/fsyr0qedmlkjnitdotiz.jpg) After make changes you can see it looks fine. .interpolate([]) method gets or sets the interpolator to use for lines drawn, this method takes string as an argument, by default it is set to 'linear', there are number of options available that you can use . you can check the [list](https://github.com/d3/d3-3.x-api-reference/blob/master/SVG-Shapes.md#line_interpolate). Source Code: ``` Series Chart

Series Chart: Morely Experiment

``` #### Curriculum - [Tutorial #16 Dive into DC.JS a JavaScript Library - Link two Charts](https://utopian.io/utopian-io/@faad/tutorial-16-dive-into-dc-js-a-javascript-library-link-two-charts) - [Tutorial #15 Dive into DC.JS a JavaScript Library - Range Chart](https://utopian.io/utopian-io/@faad/tutorial-15-dive-into-dc-js-a-javascript-library-range-chart) - [Tutorial #14 Dive into DC.JS a JavaScript Library - Row Chart](https://utopian.io/utopian-io/@faad/tutorial-14-dive-into-dc-js-a-javascript-library-row-chart) - [Tutorial #13 Dive into DC.JS a JavaScript Library - Data Table Pagination](https://utopian.io/utopian-io/@faad/tutorial-13-dive-into-dc-js-a-javascript-library-data-table-pagination) - [Tutorial #12 Dive into DC.JS a JavaScript Library - Heat Map Chart](https://utopian.io/utopian-io/@faad/tutorial-12-dive-into-dc-js-a-javascript-library-heat-map-chart) - [Tutorial #11 Dive into DC.JS a JavaScript Library - Geo Choropleth Chart](https://utopian.io/utopian-io/@faad/tutorial-11-dive-into-dc-js-a-javascript-library-geo-choropleth-chart) - [Tutorial #10 Dive into DC.JS a JavaScript Library - Box Plot](https://utopian.io/utopian-io/@faad/tutorial-10-dive-into-dc-js-a-javascript-library-box-plot) - [Tutorial #9 Dive into DC.JS a JavaScript Library - Series Chart](https://utopian.io/utopian-io/@faad/tutorial-9-dive-into-dc-js-a-javascript-library-series-chart) - [Tutorial #8 Dive into DC.JS a JavaScript Library - Bubble Chart](https://utopian.io/utopian-io/@faad/tutorial-8-dive-into-dc-js-a-javascript-library-bubble-chart) - [Tutorial #7 Dive into DC.JS a JavaScript Library - Data Table](https://utopian.io/utopian-io/@faad/tutorial-7-dive-into-dc-js-a-javascript-library-data-table) - [Tutorial #6 Dive into DC.JS a JavaScript Library - Stacked Bar Chart](https://utopian.io/utopian-io/@faad/tutorial-6-dive-into-dc-js-a-javascript-library-stacked-bar-chart) - [Tutorial #5 Dive into DC.JS a JavaScript Library - Scatter Plot](https://utopian.io/utopian-io/@faad/tutorial-5-dive-into-dc-js-a-javascript-library-scatter-plot) - [Tutorial #4 Dive into DC.JS a JavaScript Library - Composite Chart [Left, Right]](https://utopian.io/utopian-io/@faad/tutorial-4-dive-into-dc-js-a-javascript-library-composite-chart-left-right) - [Tutorial #3 Dive into DC.JS a JavaScript Library - Line Chart](https://utopian.io/utopian-io/@faad/tutorial-3-dive-into-dc-js-a-javascript-library-line-chart) - [Tutorial #2 Dive into DC.JS a JavaScript Library - Pie Chart](https://utopian.io/utopian-io/@faad/tutorial-2-dive-into-dc-js-a-javascript-library-pie-chart) - [Tutorial #1 Dive into DC.JS a JavaScript Library - Bar Chart](https://utopian.io/utopian-io/@faad/tutorial-1-dive-into-dc-js-a-javascript-library-bar-chart)

Posted on Utopian.io - Rewarding Open Source Contributors

Topics