Created
September 4, 2013 22:24
-
-
Save timelyportfolio/6443637 to your computer and use it in GitHub Desktop.
rCharts Dimple Facet Example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype HTML> | |
| <meta charset = 'utf-8'> | |
| <html> | |
| <head> | |
| <script src='http://d3js.org/d3.v3.min.js' type='text/javascript'></script> | |
| <script src='http://dimplejs.org/dist/dimple.v1.min.js' type='text/javascript'></script> | |
| <style> | |
| .rChart { | |
| display: block; | |
| margin-left: auto; | |
| margin-right: auto; | |
| width: 800px; | |
| height: 400px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id='chart23bc2ddf1a11' class='rChart dimple'></div> | |
| <script type="text/javascript"> | |
| (function(){ | |
| var opts = { | |
| "dom": "chart23bc2ddf1a11", | |
| "width": 800, | |
| "height": 400, | |
| "x": "Hair", | |
| "y": "Freq", | |
| "groups": "Hair", | |
| "type": "bar", | |
| "facet": { | |
| "x": "Sex", | |
| "y": "Eye" | |
| }, | |
| "id": "chart23bc2ddf1a11" | |
| }, | |
| data = [{"Hair":"Black","Eye":"Brown","Sex":"Male","Freq":32},{"Hair":"Brown","Eye":"Brown","Sex":"Male","Freq":53},{"Hair":"Red","Eye":"Brown","Sex":"Male","Freq":10},{"Hair":"Blond","Eye":"Brown","Sex":"Male","Freq":3},{"Hair":"Black","Eye":"Blue","Sex":"Male","Freq":11},{"Hair":"Brown","Eye":"Blue","Sex":"Male","Freq":50},{"Hair":"Red","Eye":"Blue","Sex":"Male","Freq":10},{"Hair":"Blond","Eye":"Blue","Sex":"Male","Freq":30},{"Hair":"Black","Eye":"Hazel","Sex":"Male","Freq":10},{"Hair":"Brown","Eye":"Hazel","Sex":"Male","Freq":25},{"Hair":"Red","Eye":"Hazel","Sex":"Male","Freq":7},{"Hair":"Blond","Eye":"Hazel","Sex":"Male","Freq":5},{"Hair":"Black","Eye":"Green","Sex":"Male","Freq":3},{"Hair":"Brown","Eye":"Green","Sex":"Male","Freq":15},{"Hair":"Red","Eye":"Green","Sex":"Male","Freq":7},{"Hair":"Blond","Eye":"Green","Sex":"Male","Freq":8},{"Hair":"Black","Eye":"Brown","Sex":"Female","Freq":36},{"Hair":"Brown","Eye":"Brown","Sex":"Female","Freq":66},{"Hair":"Red","Eye":"Brown","Sex":"Female","Freq":16},{"Hair":"Blond","Eye":"Brown","Sex":"Female","Freq":4},{"Hair":"Black","Eye":"Blue","Sex":"Female","Freq":9},{"Hair":"Brown","Eye":"Blue","Sex":"Female","Freq":34},{"Hair":"Red","Eye":"Blue","Sex":"Female","Freq":7},{"Hair":"Blond","Eye":"Blue","Sex":"Female","Freq":64},{"Hair":"Black","Eye":"Hazel","Sex":"Female","Freq":5},{"Hair":"Brown","Eye":"Hazel","Sex":"Female","Freq":29},{"Hair":"Red","Eye":"Hazel","Sex":"Female","Freq":7},{"Hair":"Blond","Eye":"Hazel","Sex":"Female","Freq":5},{"Hair":"Black","Eye":"Green","Sex":"Female","Freq":2},{"Hair":"Brown","Eye":"Green","Sex":"Female","Freq":14},{"Hair":"Red","Eye":"Green","Sex":"Female","Freq":7},{"Hair":"Blond","Eye":"Green","Sex":"Female","Freq":8}], | |
| xAxis = { | |
| "type": "addCategoryAxis", | |
| "showPercent": false, | |
| "orderRule": "Hair" | |
| }, | |
| yAxis = { | |
| "type": "addMeasureAxis", | |
| "showPercent": false, | |
| "overrideMax": 100 | |
| }, | |
| zAxis = [], | |
| colorAxis = [], | |
| legend = []; | |
| var svg = dimple.newSvg("#" + opts.id, opts.width, opts.height); | |
| //data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"]) | |
| var myChart = new dimple.chart(svg, data); | |
| if (opts.bounds) { | |
| myChart.setBounds(opts.bounds.x, opts.bounds.y, opts.bounds.width, opts.bounds.height);//myChart.setBounds(80, 30, 480, 330); | |
| } | |
| //if facet not provided for x or y make Dummy variable | |
| opts.facet.x = opts.facet.x ? opts.facet.x : "Dummy" | |
| opts.facet.y = opts.facet.y ? opts.facet.y : "Dummy" | |
| if(opts.facet.x === "Dummy" || opts.facet.y === "Dummy") { | |
| data.forEach(function(d){ | |
| d.Dummy = 1; | |
| }) | |
| } | |
| var x = myChart.addCategoryAxis("x", opts.facet.x); | |
| var y = myChart.addCategoryAxis("y", opts.facet.y); | |
| // Add the bar series to create the matrix shapes | |
| var s = myChart.addSeries("Hide", dimple.plot.bar); | |
| // Hide this series | |
| myChart.assignColor("Hide", "#fff", "#fff", 0); | |
| // The bar gap here will define the gaps between the charts | |
| s.barGap = 0.2; | |
| // Remove the click event from the master chart | |
| s.addEventHandler("mouseover", function (e) {}); | |
| // Draw the main chart | |
| myChart.draw(); | |
| // Remove the axis shapes from the main chart | |
| x.shapes.selectAll("path,line").remove(); | |
| x.titleShape.remove(); | |
| y.shapes.selectAll("path,line").remove(); | |
| y.titleShape.remove(); | |
| if(opts.facet.x === "Dummy") x.shapes.selectAll("text").remove(); | |
| if(opts.facet.y === "Dummy") y.shapes.selectAll("text").remove(); | |
| // Iterate the shapes from the parent chart | |
| s.shapes.each(function (d) { | |
| // Filter the data set for the quarter and the price tier | |
| // of the current shape | |
| var filteredData = dimple.filterData(data, opts.facet.x, String(d.xField[0])); | |
| filteredData = dimple.filterData(filteredData, opts.facet.y, String(d.yField[0])); | |
| // Draw a new chart which will go in the current shape | |
| var subChart = new dimple.chart(svg, filteredData); | |
| // Get the shape from the main chart on which this chart is based | |
| var shape = d3.select(this); | |
| // Position the chart inside the shape | |
| subChart.setBounds( | |
| parseFloat(shape.attr("x")), | |
| parseFloat(shape.attr("y")) - parseFloat(shape.attr("height")), | |
| parseFloat(shape.attr("width")), | |
| parseFloat(shape.attr("height"))); | |
| //dimple allows use of custom CSS with noFormats | |
| if(opts.noFormats) { myChart.noFormats = opts.noFormats; }; | |
| //for markimekko and addAxis also have third parameter measure | |
| //so need to evaluate if measure provided | |
| //x axis | |
| var subx; | |
| if(xAxis.measure) { | |
| subx = subChart[xAxis.type]("x",opts.x,xAxis.measure); | |
| } else { | |
| subx = subChart[xAxis.type]("x", opts.x); | |
| }; | |
| if(!(xAxis.type === "addPctAxis")) subx.showPercent = xAxis.showPercent; | |
| if (xAxis.orderRule) subx.addOrderRule(xAxis.orderRule); | |
| if (xAxis.grouporderRule) subx.addGroupOrderRule(xAxis.grouporderRule); | |
| if (xAxis.overrideMin) subx.overrideMin = xAxis.overrideMin; | |
| if (xAxis.overrideMax) subx.overrideMax = xAxis.overrideMax; | |
| if (xAxis.overrideMax) subx.overrideMax = xAxis.overrideMax; | |
| if (xAxis.inputFormat) subx.dateParseFormat = xAxis.inputFormat; | |
| if (xAxis.outputFormat) subx.tickFormat = xAxis.outputFormat; | |
| //y axis | |
| var suby; | |
| if(yAxis.measure) { | |
| suby = subChart[yAxis.type]("y",opts.y,yAxis.measure); | |
| } else { | |
| suby = subChart[yAxis.type]("y", opts.y); | |
| }; | |
| if(!(yAxis.type === "addPctAxis")) suby.showPercent = yAxis.showPercent; | |
| if (yAxis.orderRule) suby.addOrderRule(yAxis.orderRule); | |
| if (yAxis.grouporderRule) suby.addGroupOrderRule(yAxis.grouporderRule); | |
| if (yAxis.overrideMin) suby.overrideMin = yAxis.overrideMin; | |
| if (yAxis.overrideMax) suby.overrideMax = yAxis.overrideMax; | |
| if (yAxis.inputFormat) suby.dateParseFormat = yAxis.inputFormat; | |
| if (yAxis.outputFormat) suby.tickFormat = yAxis.outputFormat; | |
| //z for bubbles | |
| var subz; | |
| if (!(typeof(zAxis) === 'undefined') && zAxis.type){ | |
| if(zAxis.measure) { | |
| subz = subChart[zAxis.type]("z",opts.z,zAxis.measure); | |
| } else { | |
| sub = subChart[zAxis.type]("z", opts.z); | |
| }; | |
| if(!(zAxis.type === "addPctAxis")) subz.showPercent = zAxis.showPercent; | |
| if (zAxis.orderRule) subz.addOrderRule(zAxis.orderRule); | |
| if (zAxis.overrideMin) subz.overrideMin = zAxis.overrideMin; | |
| if (zAxis.overrideMax) subz.overrideMax = zAxis.overrideMax; | |
| } | |
| if(d3.keys(colorAxis).length > 0) { | |
| subChart[colorAxis.type](colorAxis.colorSeries,colorAxis.palette) ; | |
| } | |
| //here need think I need to evaluate group and if missing do null | |
| //as the first argument | |
| //if provided need to use groups from opts | |
| var seriesVariables = []; | |
| if(!(opts.facet.x==="Dummy")) seriesVariables.push(opts.facet.x) | |
| if(!(opts.facet.y==="Dummy")) seriesVariables.push(opts.facet.y) | |
| if(opts.hasOwnProperty("groups")) { | |
| seriesVariables.push(opts.groups) | |
| var s = subChart.addSeries( seriesVariables, dimple.plot[opts.type] ); | |
| //series offers an aggregate method that we will also need to check if available | |
| //options available are avg, count, max, min, sum | |
| if (!(typeof(opts.aggregate) === 'undefined')) { | |
| s.aggregate = eval(opts.aggregate); | |
| } | |
| if (!(typeof(opts.lineWeight) === 'undefined')) { | |
| s.lineWeight = eval(opts.lineWeight); | |
| } | |
| if (!(typeof(opts.barGap) === 'undefined')) { | |
| s.barGap = eval(opts.barGap); | |
| } | |
| } else var s = myChart.addSeries( seriesVariables, dimple.plot[opts.type] ); | |
| //unsure if this is best but if legend is provided (not empty) then evaluate | |
| if(d3.keys(legend).length > 0) { | |
| var l =myChart.addLegend(); | |
| d3.keys(legend).forEach(function(d){ | |
| l[d] = legend[d]; | |
| }); | |
| } | |
| //quick way to get this going but need to make this cleaner | |
| if(opts.storyboard) { | |
| subChart.setStoryboard(opts.storyboard); | |
| }; | |
| subChart.draw(); | |
| }) | |
| })(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment