D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
jrzief
Full window
Github gist
nobel-winners crossfilter
Built with
blockbuilder.org
<!DOCTYPE html> <head> <meta charset="utf-8"> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } </style> </head> <body> <script src="https://d3js.org/d3.v4.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js"> </script> <script> // Feel free to change or delete any of the code you see in this editor! var svg = d3.select("body").append("svg") .attr("width", 960) .attr("height", 500) svg.append("text") .text("Edit the code below to change me!") .attr("y", 200) .attr("x", 120) .attr("font-size", 36) .attr("font-family", "monospace") d3.json("nobel-winners.json", function(error, data) { if (error) throw error; console.log(data.length); console.log('data', data); //load the crossfilter // var cf = crossfilter(presidents); const xfilter = crossfilter(data); const byCategory = xfilter.dimension(d => d.category); const byCountry = xfilter.dimension(function(d) {return d.country}); const byYear = xfilter.dimension(d => d.year); const byGender = xfilter.dimension(d => d.gender); //console.log('byCategory', byCategory); //console.log('byCountry', byCountry); let countryList = byCountry.bottom(Infinity) let listDimension = byCountry console.log('countrylist', countryList); var ctry_grp = byCountry.group().all(); var total = d3.sum(ctry_grp, function(d) {return d.value}); console.log('country groups', ctry_grp); console.log('country total', total); byGender.filter("female"); byCategory.filter("Physics"); let femPhys = byGender.top(Infinity); console.log("femPhys", femPhys); byCategory.filter(); let fems = byGender.top(Infinity); console.log("fems", fems); }); </script> </body>
https://d3js.org/d3.v4.min.js