Skip to content

Instantly share code, notes, and snippets.

@benjaminmbrown

benjaminmbrown/datavis-static.html

Last active February 23, 2016 05:54
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save benjaminmbrown/e26cd1dac859de8bb3c6 to your computer and use it in GitHub Desktop.
Save benjaminmbrown/e26cd1dac859de8bb3c6 to your computer and use it in GitHub Desktop.
Download ZIP
static d3 & crossfilter chart solution
Raw
datavis-static.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dimensional Charting</title>
<link rel="stylesheet" type="text/css" href="http://dc-js.github.io/dc.js/css/dc.css"/>
<script type="text/javascript" src="http://dc-js.github.io/dc.js/js/d3.js"></script>
<script type="text/javascript" src="http://dc-js.github.io/dc.js/js/crossfilter.js"></script>
<script type="text/javascript" src="http://dc-js.github.io/dc.js/js/dc.js"></script>
</head>
<body>
<div id="chart-ring-year"></div>
<div id="chart-row-spenders"></div>
<script type="text/javascript">
var yearRingChart = dc.pieChart("#chart-ring-year"),
spenderRowChart = dc.rowChart("#chart-row-spenders");
var data1 = [
{Name: 'Ben', Spent: 330, Year: 2014, 'total':1},
{Name: 'Aziz', Spent: 1350, Year: 2012, 'total':2},
{Name: 'Vijay', Spent: 440, Year: 2014, 'total':2},
{Name: 'Jarrod', Spent: 555, Year: 2015, 'total':1},
];
// set crossfilter with first dataset
var xfilter = crossfilter(data1),
yearDim = xfilter.dimension(function(d) {return +d.Year;}),
spendDim = xfilter.dimension(function(d) {return Math.floor(d.Spent/10);}),
nameDim = xfilter.dimension(function(d) {return d.Name;}),
spendPerYear = yearDim.group().reduceSum(function(d) {return +d.Spent;}),
spendPerName = nameDim.group().reduceSum(function(d) {return +d.Spent;});
function render_plots(){
yearRingChart
.width(200).height(200)
.dimension(yearDim)
.group(spendPerYear)
.innerRadius(50);
spenderRowChart
.width(250).height(200)
.dimension(nameDim)
.group(spendPerName)
.elasticX(true);
dc.renderAll();
}
render_plots();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment