Skip to content

Instantly share code, notes, and snippets.

@benjaminmbrown

benjaminmbrown/data-setup-crossfilter-d3.html

Last active August 17, 2022 18:56
Show Gist options
  • Save benjaminmbrown/35192e8b406d1bd0c6fa to your computer and use it in GitHub Desktop.
Save benjaminmbrown/35192e8b406d1bd0c6fa to your computer and use it in GitHub Desktop.
Download ZIP
Raw
data-setup-crossfilter-d3.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;}),
</script>
</body>
</html>
@alexpogue
Copy link

Minor correction: line 37 should end with a semicolon. Tripped me up for a sec when I was following the tutorial. Good work otherwise!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment