Category: dcjs

DC.js – baseMixin ”; Previous Next baseMixin provides basic methods needed to create any type of a chart. It ranges from setting the width of the chart to advanced filtering of the chart. General Chart Options The basicMixin provides many chart methods to get / set the properties of the charts. They are as follows, chartID() − Returns the internal numeric ID of the chart. chartGroup( [chartGroup]) − Gets or sets the group to which the chart belongs. In DC.js, charts can be grouped into a single set. All charts in a group are expected to share the same Crossfilter dataset. They are rendered as well as redrawn simultaneously. mychart.chartGroup(”dashboard”); minWidth( [minWidth]) − Sets the minimum width of the chart. mychart.minWidth(300); width( [width]) − Gets or sets the width of the chart. mychart.width(600); minHeight( [minHeight]) − Gets or sets the minimum height of the chart. mychart.minHeight(300); height( [height]) − Gets or sets the height of the chart. mychart.height(300); title( [titleFunction]) − Gets or sets the title function. Title is the SVG Element”s title of the child element in the chart (e.g. a single bar in a bar chart). Title in the charts are represented as tooltip in the browser. mychart.title(function(data) { return d.key + ”: ” + d.value; }); label( labelFunction[??]) − Similar to the title() method, but it sets the label instead of the title. mychart.label(function(data) { return d.key + ”: ” + d.value; }); options(opts) − Sets any chart option using the JavaScript object. Each key represents the corresponding method available in the charts and the matched method will be invoked with the relevant value. mychart.options ({ ”width” : 300, ”height” : 300 }); Here, width() and height() method will be fired with the specified value. legend( [legend]) − Attaches a legend to the chart. The legend can be created using the d3.legend() method. mychart.legend ( dc.legend() .x(500) .y(50) .itemHeight(12) .gap(4)) anchor( parent[??]) − Sets the root SVGElement to be either an existing chart”s root or any valid D3 single selectors. Optionally, the chart group can also be set using the second argument. anchorName() − Gets the DOM ID of the chart”s anchored location. svg( [svgElement]) − Returns the SVGElement of the chart. resetSvg() − Resets the SVG container in the DOM. root( [rootElement]) − Gets the root container of the chart. Data Options basicMixin provides methods to set the data for the charts. The data is set as Crossfilter dimension and group. In addition, it provides an option to get the underlying dataset. dimension( [dimension]) − Sets or gets the dimension of the chart. A dimension is any valid Crossfilter dimension. var mycrossfilter = crossfilter([]); var ageDimension = mycrossfilter.dimension(dc.pluck(”age”)); mychart.dimension(ageDimension); group( group[??]) − Sets or gets the group of the chart. A group is any valid Crossfilter group. The group can be named using the second argument to use it later in the code. var mycrossfilter = crossfilter([]); var ageDimension = mycrossfilter.dimension(dc.pluck(”age”)); mychart.dimension(ageDimension); mychart.group(ageDimension.group(crossfilter.reduceCount())); data( [callback]) − Sets the data callback and enables us to get the underlying chart”s data set. // get all groups mychart.data(function (group) { return group.all(); }); // get top five groups mychart.data(function (group) { return group.top(5); }); keyAccessor( [keyAccessor]) − Gets or sets the key accessor function. It is used to retrieve the key from the underlying Crossfilter group. The key is used for slices in a pie chart and x-axis in the line / bar chart. The default key accessor function is as follows − chart.keyAccessor(function(d) { return d.key; }); valueAccessor( [valueAccessor]) − Gets or sets the value accessor function. It is used to retrieve the value from the underlying Crossfilter group. The value is used for slice size in the pie chart and y-axis position in the line / bar chart. The default value accessor function is as follows − chart.valueAccessor(function(d) { return d.value; }); ordering( [orderFunction]) − Gets or sets an ordering function to order ordinal dimension. By default, a chart uses crossfilter.quicksort.by to sort the elements. _chart.ordering(dc.pluck(”key”)); Filter Options Filtering is one of the highlights of DC.js. We can apply one or more filters directly on the chart object using the filter() method and call chart”s redrawGroup() or dc.redrawAll() method to see the filtering effect on the chart. By default, a chart object takes one or more filters using the filter() method, applies it on the underlying Crossfilter() data set, gets the filtered data from the Crossfilter and redraws the charts using the filtered data. DC.js provides the following methods to handle filtering in the chart. Filter( [filter]) Gets or sets the filter for the chart. If a supplied filter is new, then it will be added to the chart”s filter collection and applied on the underlying dataset. If the filter supplied is already available in the chart”s filter collection, then it will remove the filter and do the relevant filtering on the underlying data. In short, filter method will toggle the supplied filters. mychart.filter(10); To remove all filters, call the filter method with null value. The filter may be any one of the following items − null − Chart will remove all the filters previously applied. single value − Chart will call the underlying Crossfilter”s filter method and send the supplied value. dc.filters.RangedFilter − It accepts two values, low and high. Chart will filter out all the data, except the value in the range between low and high value. dc.filters.TwoDimensionalFilter − It accepts two-dimensional values that are used in the heat map. dc.filters.RangedTwoDimensionalFilter − It is similar to the dc.filters.RangedFilter, except that it accepts a two-dimensional value only used in scatter plots. hasFilter( [filter]) Checks whether the supplied filter is available or not in the chart. replaceFilter( [filter]) Replaces the current filter of the chart with the supplied filter. filters() Returns all current filters associated with the chart. filterAll() Clears all filters associated with the chart. filterHandler( [filterHandler]) Gets or sets a filter handler function. Filter handler function is used by the chart to filter the underlying dataset using the filter. Chart has

DC.js – colorMixin ”; Previous Next colorMixin provides the color support for all the charts, which need to visualize using colors. The hierarchy of the colorMixin is defined in the diagram below. colorMixin provides the following list of methods to work with colors and they are as follows − colorAccessor( [colorAccessor]) Gets or sets the color accessor function. This will map a distinct color value in the color scale for each data point in the underlying Crossfilter group. The default color accessor is as follows − mychart.colorAccessor(function (d, i){return i;}) colorDomain( [domain]) Gets or sets the current domain for the color mapping function and it must be supplied as an array. calculateColorDomain() Sets the color domain by determining the min and max values of the data element found using the colorAccessor() function. colors( [colorScale]) Gets or sets a color scale. It accepts the d3.scale. chart.colors(d3.scale.category20b()); chart.colors(d3.scale.ordinal().range([”red”,”green”,”blue”])); linearColors(r) A shortcut method to set interpolated linear color scale. chart.linearColors([“#4575b4”, “#ffffbf”, “#a50026″]); ordinalColors(r) A shortcut method to set the ordinal color scale. chart.ordinalColors([”red”,”green”,”blue”]); Print Page Previous Next Advertisements ”;

DC.js – Useful Resources ”; Previous Next The following resources contain additional information on DC.js. Please use them to get more in-depth knowledge on this. Python Programming Certification 2024 Most Popular  9 Courses     1 eBooks Tutorialspoint More Detail Artificial Intelligence and Machine Learning Certification 2024 Most Popular  7 Courses     1 eBooks Tutorialspoint More Detail Java Certification 2024 Best Seller  7 Courses     1 eBooks Tutorialspoint More Detail Print Page Previous Next Advertisements ”;

DC.js – Data Table ”; Previous Next Data table is used to display the records in a tabular format. It lists out the crossfilter dataset records as explained in this chapter in detail. Data Table Methods Before moving on to draw a data table, we should understand the dc.dataTable class and its methods. It uses a mixin to get the basic functionality of drawing a data table chart, which is defined below − dc.baseMixin The dc.dataTable gets all the methods of this mixin and has its own methods to draw the data table, which are explained as follows. beginSlice( [slice]) This method is used to get or set the index of the beginning slice. This method is useful when implementing pagination. Similarly, you can perform the endSlice() function as well. columns( [columns]) This method is used to get or set the column functions. It uses the following method to specify the columns to display. chart.columns([ function(d) { return d.mark; }, function(d) { return d.low; }, function(d) { return d.high; }, function(d) { return numberFormat(d.high – d.low); }, function(d) { return d.volume; } ]); Here, d represents a row in the data set. We can use HTML to display columns in the data table. group(groupFunction) This method is used to perform the group function for the data table. order( [order]) It is used to sort the order function. If the order is ascending, then the dimension() will use .bottom() to fetch the data, otherwise it will use dimension().top(). Data Table Example Let us make a data table in DC. To do this, we need to follow the steps given below − Step 1: Add styles Let us add styles in the CSS using the coding given below − .dc-chart { font-size: 12px; } .dc-table-group { padding-left: 10px; font-size: 14px; font-weight: bold; } .dc-table-column { padding-left: 10px; font-size: 12px; font-weight: normal; } Here, we have assigned styles for the chart, table-group and the grid-column. Step 2: Create a variable Let us create a variable in DC as shown below − var barChart = dc.barChart(”#line”); // var countChart = dc.dataCount(“#mystats”); var tableChart = dc.dataTable(“#mytable”); Here, we have assigned a barChart variable id in line, countChart id is mystats and the tableChart id is mytable. Step 3: Read the data Read the data from the people.csv file as shown below − d3.csv(“data/people.csv”, function(errors, people) { var mycrossfilter = crossfilter(people); } If the data is not present, then it returns an error. Now, assign the data to a crossfilter. Here, we have used the same people.csv file, which was used in our previous charting examples. It looks like as follows − id,name,gender,DOB,MaritalStatus,CreditCardType 1,Damaris,Female,1973-02-18,false,visa-electron 2,Barbe,Female,1969-04-10,true,americanexpress 3,Belia,Female,1960-04-16,false,maestro 4,Leoline,Female,1995-01-19,true,bankcard 5,Valentine,Female,1992-04-16,false, 6,Rosanne,Female,1985-01-05,true,bankcard 7,Shalna,Female,1956-11-01,false,jcb 8,Mordy,Male,1990-03-27,true,china-unionpay …………………………………… …………………………………… Step 4: Set the dimension You can set the dimension using the coding given below − var ageDimension = mycrossfilter.dimension(function(data) { return ~~((Date.now() – new Date(data.DOB)) / (31557600000)) }); After the dimension has been assigned, group the age using the coding given below − var ageGroup = ageDimension.group().reduceCount(); Step 5: Generate a chart Now, generate a bar chart using the coding given below − barChart .width(400) .height(200) .x(d3.scale.linear().domain([15,70])) .yAxisLabel(“Count”) .xAxisLabel(“Age”) .elasticY(true) .elasticX(true) .dimension(ageDimension) .group(ageGroup); Here, We have assigned the chart width as 400 and height as 200. Next, we have specified the domain range as [15,70]. We have set the x-axis label as age and y-axis label as count. We have specified the elasticY and X function as true. Step 6: Create the data table Now, create the data table using the coding given below − countChart .dimension(mycrossfilter) .group(mycrossfilter.groupAll()); tableChart .dimension(ageDimension) .group(function (data) { return ~~((Date.now() – new Date(data.DOB)) / (31557600000)); }) Here, we have specified the age dimension and group the data. Step 7: Render the table Now, render the grid using the coding below − .size(Infinity) .columns([”name”, ”DOB”]) .sortBy(function (d) { return d.value; }) .order(d3.ascending); barChart.render(); countChart.render(); tableChart.render(); Here, we have sorted the columns using the DOB and sort the records. Step 8: Working example The complete code is as follows. Create a web page datatable.html and add the following changes to it. <html> <head> <title>DC datatable sample</title> <link rel = “stylesheet” type = “text/css” href = “css/bootstrap.css”> <link rel = “stylesheet” type = “text/css” href = “css/dc.css”/> <style> .dc-chart { font-size: 12px; } .dc-table-group { padding-left: 10px; font-size: 14px; font-weight: bold; } .dc-table-column { padding-left: 10px; font-size: 12px; font-weight: normal; } </style> <script src = “js/d3.js”></script> <script src = “js/crossfilter.js”></script> <script src = “js/dc.js”></script> </head> <body> <div> <div style = “width: 600px;”> <div id = “mystats” class = “dc-data-count” style = “float: right”> <span class = “filter-count”></span> selected out of <span class = “total-count”></span> | <a href = “javascript:dc.filterAll(); dc.renderAll();”>Reset All</a> </div> </div> <div style = “clear: both; padding-top: 20px;”> <div> <div id = “line”></div> </div> </div> <div style = “clear: both”> <div id = “mytable”></div> </div> </div> <script language = “javascript”> var barChart = dc.barChart(”#line”); // , ”myChartGroup”); var countChart = dc.dataCount(“#mystats”); var tableChart = dc.dataTable(“#mytable”); d3.csv(“data/people.csv”, function(errors, people) { var mycrossfilter = crossfilter(people); // age dimension var ageDimension = mycrossfilter.dimension(function(data) { return ~~((Date.now() – new Date(data.DOB)) / (31557600000)) }); var ageGroup = ageDimension.group().reduceCount(); barChart .width(400) .height(200) .x(d3.scale.linear().domain([15,70])) .yAxisLabel(“Count”) .xAxisLabel(“Age”) .elasticY(true) .elasticX(true) .dimension(ageDimension) .group(ageGroup); countChart .dimension(mycrossfilter) .group(mycrossfilter.groupAll()); tableChart .dimension(ageDimension) .group(function (data) { return ~~((Date.now() – new Date(data.DOB)) / (31557600000)); }) .size(Infinity) .columns([”name”, ”DOB”]) .sortBy(function (d) { return d.value; }) .order(d3.ascending); barChart.render(); countChart.render(); tableChart.render(); }); </script> </body> </html> Now, request the browser and you will see the following response. After selecting an age between 20 and 30, it displays the table records as shown in the screenshot below − Print Page Previous Next Advertisements ”;

DC.js – Pie Chart ”; Previous Next A pie chart is a circular statistical graph. It is divided into slices to show a numerical proportion. This chapter explains how to draw a pie chart using DC.js in detail. Pie Chart Methods Before moving on to draw a pie chart, we should understand the dc.pieChart class and its methods. The dc.pieChart uses mixins to get the basic functionality of drawing a chart. The mixins used by dc.pieChart are as follows − baseMixin capMixin colorMixin The complete class diagram of a dc.pieChart is as follows − The dc.pieChart gets all the methods of the above specified mixins as well as has its own methods to specifically draw the pie chart. They are as follows − cx( [cx]) drawPaths( [path]) emptyTitle( [title]) externalLabels( [label]) innerRadius( [innerRadius]) minAngleForLabel( [minAngleForLabel]) radius( [radius]) slicesCap( [cap]) Let us discuss each of these in detail. cx( [cx]) It is used to get or set the center x coordinate position, which is defined below − chart.cx = function (cx) { if (!arguments.length) { return (_cx || _chart.width() / 2); } }; Similarly, you can perform the y-coordinate position. drawPaths( [path]) This method is used to draw paths for a pie chart and is defined below − chart.drawPaths = function (path) { if (arguments.length === 0) { return path; } }; emptyTitle( [title]) This method is used to set the title when there is no data. It is defined below − chart.emptyTitle = function (title) { if (arguments.length === 0) { return title; } }; externalLabels( [label]) It is used to position slice labels offset from the outer edge of the chart. It is defined below − chart.externalLabels = function (label) { if (arguments.length === 0) { return label; } }; innerRadius( [innerRadius]) This method is used to get or set the inner radius of the pie chart. If the inner radius is greater than 0px, then the pie chart will be rendered as a doughnut chart. It is defined below − _chart.innerRadius = function (innerRadius) { if (!arguments.length) { return _innerRadius; } }; minAngleForLabel( [minAngleForLabel]) This method is used to get or set the minimal slice angle for label rendering. It is defined below − _chart.minAngleForLabel = function (minAngleForLabel) { if (!arguments.length) { return _minAngleForLabel; } _minAngleForLabel = minAngleForLabel; return _chart; }; radius( [radius]) This method is used to get or set the outer radius. If the radius is not specified, then it will take half of the minimum chart width and height. It is defined below − _chart.radius = function (radius) { if (!arguments.length) { return _givenRadius; } _givenRadius = radius; return _chart; }; slicesCap( [cap]) Gets or sets the maximum number of slices the pie chart will generate. The top slices are determined by a value from high to low. Other slices exceeding the cap will be rolled up into one single ‘Others’ slice. Draw a Pie Chart Let us create a pie chart in DC. In this pie chart example, let us take a dataset named people.csv file. The sample data file is as follows − id,name,gender,DOB,MaritalStatus,CreditCardType 1,Damaris,Female,1973-02-18,false,visa-electron 2,Barbe,Female,1969-04-10,true,americanexpress 3,Belia,Female,1960-04-16,false,maestro 4,Leoline,Female,1995-01-19,true,bankcard 5,Valentine,Female,1992-04-16,false, 6,Rosanne,Female,1985-01-05,true,bankcard 7,Shalna,Female,1956-11-01,false,jcb 8,Mordy,Male,1990-03-27,true,china-unionpay ……………….. ……………….. ……………….. The above sample contains many records. You can download the file by clicking the following link and save it to the DC location. people.csv Now, let us adhere to the following steps to draw a pie chart in DC. Step 1: Include a Script Let us add D3, DC and Crossfilter using the following code − <script src = “js/d3.js”></script> <script src = “js/crossfilter.js”></script> <script src = “js/dc.js”></script> Step 2: Define a Variable Create an object of type, dc.pieChart as shown below − var pieChart = dc.pieChart(”#pie”); Here, the Pie id is mapped with a pie. Step 3: Read the Data Read your data (say, from people.csv) using the d3.csv() function. It is defined as follows − d3.csv(“data/people.csv”, function(errors, people) { console.log(people); } Here, if the data file is not available in the specified location, then the d3.csv() function returns an error. Step 4: Define the Crossfilter Define a variable for Crossfilter and assign the data to Crossfilter. It is defined below − var mycrossfilter = crossfilter(people); Step 5: Create a Dimension Create a dimension for gender using the function below − var genderDimension = mycrossfilter.dimension(function(data) { return data.gender; }); Here, the Gender of the people is used for dimension. Step 6: reduceCount() Create a Crossfilter group by applying the group() and the reduceCount() function on the above created gender dimension – groupDimension. var genderGroup = genderDimension.group().reduceCount(); Step 7: Generate Pie Generate the pie using the function below − pieChart .width(800) .height(300) .dimension(genderDimension) .group(genderGroup) .on(”renderlet”, function(chart) { chart.selectAll(”rect”).on(”click”, function(d) { console.log(”click!”, d); }); }); dc.renderAll(); Here, Width of the pie chart is set to 800. Height of the pie chart is set to 300. Dimension of the pie chart is set to genderDimension using the dimension() method. Group of the pie chart is set to genderGroup using the group() method. Added a click event to log the data using the DC.js built-in event, renderlet(). The renderlet is invoked, whenever the chart is rendered or drawn. Step 8: Working Example Create a new html file, pie.html and include all the above steps as shown below − <html> <head> <title>DC.js Pie Chart Sample</title> <link rel = “stylesheet” type = “text/css” href = “css/bootstrap.min.css”> <link rel = “stylesheet” type = “text/css” href = “css/dc.css”/> <script src = “js/d3.js”></script> <script src = “js/crossfilter.js”></script> <script src = “js/dc.js”></script> </head> <body> <div> <div id = “pie”></div> </div> <script language = “javascript”> var pieChart = dc.pieChart(”#pie”); d3.csv(“data/people.csv”, function(errors, people) { console.log(people); var mycrossfilter = crossfilter(people); // gender dimension var genderDimension = mycrossfilter.dimension(function(data) { return data.gender; }); var genderGroup = genderDimension.group().reduceCount(); pieChart .width(800) .height(300) .dimension(genderDimension) .group(genderGroup) .on(”renderlet”, function(chart) { chart.selectAll(”rect”).on(”click”, function(d) { console.log(”click!”, d); }); }); dc.renderAll(); }); </script> </body> </html> Now, request the browser and we will see the following response. Print Page Previous Next

DC.js – coordinateGridMixin ”; Previous Next The Coordinate & Axis also termed as coordinateGridMixin is designed to support a number of coordinate grid based concrete chart types such as Bar Chart, Line Chart, etc. The hierarchy of coordinateGridMixin is defined in the diagram below. The coordinateGridMixin supports a number of methods to reduce the workload in creating the coordinate axis and they are as follows − brushOn( [brushOn]) chartBodyG( [body]) clipPadding( [pad]) elasticX( [X]) focus( [range]) g( [root]) isOrdinal() mouseZoomable( [Zoom]) rangeChart( [range]) round(r) xAxisMax() xAxisMin() xUnitCount() Let us discuss each of these methods in brief. brushOn( [brushOn]) It is a brush-based range filter. You can set it On/Off. If brushing is on, the user can drag the mouse across a chart. Turning on can disable other interactive elements on the chart such as highlighting, tool tips and reference lines. It is defined below − chart.brushOn = function (brushOn) { if (!arguments.length) { return _brushOn; } _brushOn = brushOn; return chart; }; chartBodyG( [body]) It is used to retrieve the SVG group for the chart body. You can call this function as shown below − chart.chartBodyG = function (body) { if (!arguments.length) { return _chartBodyG; } }; clipPadding( [pad]) It is used to get or set the padding in pixels for the clip path. It is defined below − chart.clipPadding = function (pad) { if (!arguments.length) { return _clipPadding; } }; elasticX( [X]) This method is used to turn on/off elastic x-axis behavior. If the x-axis elasticity is turned on, then the grid chart will attempt to recalculate the x-axis range. It triggers a redraw event that is defined below − chart.elasticX = function (X) { if (!arguments.length) { return _x; } } Similarly, you can perform elasticY( [Y]). focus( [range]) This method is used to zoom the chart to focus on the given range. The given range should be an array containing only two elements ([start, end]). g( [root]) This method is used to get or set the root g element. isOrdinal() This method is used to return the chart ordinal xUnits. Most charts behave differently with ordinal data and use the result of this method to trigger the appropriate logic. mouseZoomable( [Zoom]) This method is used to set or get mouse zoom capability. rangeChart( [range]) It is used to get or set the range selection chart associated with the instance. round(r) This method is used to set or get the rounding function used to quantize the selection when brushing is enabled. xAxisMax() Calculates the maximum x value to display in the chart. Similarly, we can perform for Y-axis. xAxisMin() Calculates the minimum x value to display in the chart. Similarly, we can perform for Y-axis. xUnitCount() Returns the number of units displayed on the x-axis. Similarly, we can perform for Y-axis. Print Page Previous Next Advertisements ”;

DC.js – marginMixin ”; Previous Next marginMixin provides margin utility functions for both the Row Chart and Coordinate Grid Charts. The hierarchy of the marginMixin is defined in the diagram below. marginMixin provides a single method to set the margin for coordinated axis based charts. margins( [margins]) Gets or sets the left, right, top and bottom margin of the chart. The default margin of the chart is as follows − a. Right – 50 a. Left – 30 a. Top – 10 a. Bottom – 30 var rightMargin = chart.margins().right; // 50 by default chart.margins().bottom = 60; Print Page Previous Next Advertisements ”;

DC.js – Installation ”; Previous Next In this chapter, we will learn how to setup the DC.js development environment. Before we start, we need the following components − DC.js library Editor Web browser Web server Let us go through the steps one by one in detail. DC.js Installation DC installation is very easy to set up. Follow the below steps to install DC on your machine. Download DC Library DC is an open-source library; use the link https://github.com/dc-js/dc.js/releases to download the file. Download the latest version of the DC file. (As of now, the latest version is 2.0.2.). After the download is completed, unzip the DC folder and paste it to your project”s root folder or any other folder, where you want to keep all your library files. The sample HTML page is as shown below. <!DOCTYPE html> <html lang = “en”> <head> <script src = “js/d3.js”></script> <script src = “js/crossfilter.js”></script> <script src = “js/dc.js”></script> </head> <body> <script> // write your dc code here.. </script> </body> </html> DC is a JavaScript code, so we have to write all the DC codes within the “script” tag. We may need to manipulate the existing DOM elements, hence it is advisable to write the DC code just before the end of the “body” tag. DC.js Editor We will need an editor to start writing the code. There are some great IDEs (Integrated Development Environment) with support for JavaScript such as − Visual Studio Code WebStorm Eclipse SublimeText These IDEs provide intelligent code completion as well as support some of the modern JavaScript frameworks. If we do not have any fancy IDE, we can always use a basic editor such as Notepad, VI, etc. Web Browser DC.js works on all browsers except IE8 and lower. Web Server Most browsers serve local HTML files directly from the local file system. However, there are certain restrictions when it comes to loading external data files. In the subsequent chapters of this tutorial, we will be loading data from external files such as CSV and JSON. Therefore, it will be easier for us, if we set up the web server right from the beginning. We can use any web server, which we are comfortable with. For example – IIS, Apache, etc. Viewing a Page In most cases, we can just open the HTML file in a web browser to view it. However, when loading external data sources, it is more reliable to run a local webserver and view the page from the server (http://localhost:8080). Print Page Previous Next Advertisements ”;

DC.js – Mixins ”; Previous Next Mixin is an abstract functional object having a lot of pre-defined functions, which can be mixed and used in JavaScript classes. However, they cannot be used as stand-alone. For example, DC.js has a Mixin and dc.baseMixin, which cannot be used as it is, but is used by all the DC chart classes such as the Line Chart, Pie Chart, etc. DC.js has a limited set of useful Mixins to create charts easily and efficiently. They are as follows − baseMixin − baseMixin provides common functionality for all type of charts. It integrates crossfilter and d3.js JavaScript library and provides a simple set of function to create charts with limited knowledge of D3.js. capMixin − capMixin provides grouping support for the data elements below a limit (cap). colorMixin − colorMixin provides color support for the charts. marginMixin − marginMixin provides margin support for the charts. coordinateGridMixin − coordinateGridMixin provides coordinate support for the charts. stackMixin − stackMixin provides stacking support using the d3.layout.stack. bubbleMixin − bubbleMixin provides bubble support for the charts. Let us understand all these mixins in detail in the subsequent chapters. Print Page Previous Next Advertisements ”;

DC.js – Scatter Plot ”; Previous Next A scatter plot is a type of mathematical diagram. It is represented using the Cartesian coordinates to display values for typically two variables for a set of data. The data is displayed as a collection of points and the points maybe colored. This chapter explains about a scatter plot in detail. Scatter Plot Methods Before moving on to draw a scatter plot, we should understand the dc.scatterPlot class and its methods. The dc.scatterPlot uses mixins to get the basic functionality of drawing a chart. The mixin used by dc.scatterPlot is given below − dc.coordinateGridMixin The complete class diagram of the dc.scatterPlot is as follows − The dc.scatterPlot gets all the methods of the above-specified mixins. It has its own methods to draw the scatter plot, which are explained as follows. customSymbol( [symbol]) This method is used get or set the symbol generator. emptySize( [size]) This method is used to set or get the radius for symbols when the group is empty. excludedColor( [color]) This method is used to get or set the color for symbols excluded from the chart”s filter. excludedOpacity( [opacity]) This method is used to get or set the opacity for symbols excluded from the chart”s filter. excludedSize( [size]) It is used to set or get size for symbols excluded from the chart”s filter. highlightedSize( [size]) It is used to set or get radius for highlighted symbols. symbol( [type]) It is used to get or set the symbol type used for each point. Draw a Scatter Plot Let us draw a scatter plot in DC. In this example, let us take a dataset named as howell1.csv file. The sample data file is as follows − “height”,”weight”,”age”,”male” 151.765,47.8256065,63,1 139.7,36.4858065,63,0 136.525,31.864838,65,0 156.845,53.0419145,41,1 145.415,41.276872,51,0 163.83,62.992589,35,1 149.225,38.2434755,32,0 168.91,55.4799715,27,1 147.955,34.869885,19,0 165.1,54.487739,54,1 154.305,49.89512,47,0 …………… …………… The above sample file contains many records. We can download the file by clicking the following link and saving it to our DC location. howell1.csv Now, let us follow the subsequent steps to draw a Scatter chart in DC. Step 1: Define a variable Let us define a variable as shown below − var chart = dc.scatterPlot(”#scatter”); Here, the scatterplot() function is mapped with the id scatter. Step 2: Read the data Read data from the howell1.csv file as shown below − d3.csv(“data/howell1.csv”, function(errors, people) { var mycrossfilter = crossfilter(people); } If the data is not present, then it returns an error. Later, assign the data to a crossfilter. Step 3: Fetch the records Let us fetch the records using the coding given below − people.forEach(function(x) { if(x.male == 1) { x.gender = “Male”; } else { x.gender = “Female”; } }); Here, we have checked the gender. Step 4: Set the dimension You can set the dimension using the coding given below − var hwDimension = mycrossfilter.dimension(function(data) { return [Math.floor(data.height), Math.floor(data.weight)]; }); After the dimension has been assigned, group the gender using the coding given below − var hwGroup = hwDimension.group().reduceCount(); Step 5: Generate a chart Now, generate a heatmap using the coding given below − chart .width(800) .height(600) .x(d3.scale.linear().domain([0,180])) .y(d3.scale.linear().domain([0,100])) .brushOn(false) .xAxisLabel(“Height”) .yAxisLabel(“Weight”) .symbolSize(8) .clipPadding(10) .dimension(hwDimension) .group(hwGroup); Here, We have assigned the chart width as 800 and height as 600. Applied the d3.scale.linear() function for both x and y axis. Enabled brushOn value as false. Then, assigned x-axis label as height and y-axis label as weight. Set the symbol size as eight and padding value as 10. Finally, group the data and render the chart. Step 6: Working example The complete code listing is as follows. Create a web page scatter.html and add the following changes to it. <html> <head> <title>Scatter plot Sample</title> <link rel = “stylesheet” type = “text/css” href = “css/bootstrap.css”> <link rel = “stylesheet” type = “text/css” href = “css/dc.css”/> <script src = “js/d3.js”></script> <script src = “js/crossfilter.js”></script> <script src = “js/dc.js”></script> </head> <body> <div> <div id = “scatter”></div> </div> <script language = “javascript”> var chart = dc.scatterPlot(”#scatter”); d3.csv(“data/howell1.csv”, function(errors, people) { var mycrossfilter = crossfilter(people); people.forEach(function(x) { if(x.male == 1) { x.gender = “Male”; } else { x.gender = “Female”; } }); var hwDimension = mycrossfilter.dimension(function(data) { return [Math.floor(data.height), Math.floor(data.weight)]; }); var hwGroup = hwDimension.group().reduceCount(); chart .width(800) .height(600) .x(d3.scale.linear().domain([0,180])) .y(d3.scale.linear().domain([0,100])) .brushOn(false) .xAxisLabel(“Height”) .yAxisLabel(“Weight”) .symbolSize(8) .clipPadding(10) .dimension(hwDimension) .group(hwGroup); chart.render(); }); </script> </body> </html> Now, request the browser and we will see the following response. Print Page Previous Next Advertisements ”;