D3 Examples - dc.js unemploymed example

dc.js unemploymed example
This is a blank dc.js bl.ock template - please fork this bl.ock when asking for help on Stack Overflow or the dc.js user group, or to demonstrate bugs when filing an issue on GitHub.
See this block for a complete example, with data: dc.js example
xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="https://dc-js.github.io/dc.js/css/dc.css" />
  <script src="https://dc-js.github.io/dc.js/js/d3.js"></script>
  <script src="https://dc-js.github.io/dc.js/js/crossfilter.js"></script>
  <script src="https://dc-js.github.io/dc.js/js/dc.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/crossfilter/reductio/reductio.js"></script>
  <script src="https://npmcdn.com/universe@latest/universe.js"></script>
  <style>
  </style>
</head>
​
<body>
  <!-- add chart divs here -->
    <div id="yearplot"></div>
    <div id="genderplot"></div>
    <div id="ageplot"></div>
    <div id="countryplot"></div>
​
  <script>
    // add dc.js chart initialization code here; you can also
    // load data from assets in your gist using d3.csv('filename', ...)
        // Get the data
        d3.csv("unemployed-time.csv", function (error, data) {
​
            // var filtered = data.filter(function (d) { return d.Age == "Total"; });
            var ndx = crossfilter(data);
            console.log("size: " + ndx.size());
​
            var genderDim = ndx.dimension(function (d) { return d.Sex; });
            var genderGroup = genderDim.group().reduceSum(function (d) { return d.Value; });
            var genderBar = dc.pieChart("#genderplot")
                .width(200).height(200)
                .dimension(genderDim)
                .group(genderGroup)
                .slicesCap(4)
                //   .legend(dc.legend())
                .innerRadius(50);
          
          var yearDim = ndx.dimension(function (d) { return d.Time; });
            var yearGroup = yearDim.group().reduceSum(function (d) { return d.Value; });
            var yearPlot = dc.barChart("#yearplot")
                .width(400).height(200)
                .dimension(yearDim)
                .group(yearGroup)
                // .x(d3.scale.linear().domain([2011,2016]))
                .x(d3.scale.ordinal().domain(yearGroup.all().map((d, i) => { return d.key })))
                .xUnits(dc.units.ordinal)
                .barPadding(0.1)
                .outerPadding(0.05);
                // .yAxisLabel("Unemployed");
​
            var ageDim = ndx.dimension(function (d) { return d.Age; });
            var ageGroup = ageDim.group().reduceSum(function (d) { return d.Value; });
            var agePlot = dc.barChart("#ageplot")
                .width(400).height(200)
                .dimension(ageDim)
                .group(ageGroup)
                // .x(d3.scale.linear().domain([2011,2016]))
                .x(d3.scale.ordinal().domain(ageGroup.all().map((d, i) => { return d.key })))
                .xUnits(dc.units.ordinal)
                .barPadding(0.1)
                .outerPadding(0.05);
                // .yAxisLabel("Unemployed");
​
​
            var countryDim = ndx.dimension(function (d) { return d.Country; });
            var countryGroup = countryDim.group().reduceSum(function (d) { return d.Value; });
            var countryPlot = dc.barChart("#countryplot")
                .width(400).height(200)
                .dimension(countryDim)
                .group(countryGroup)
                // .x(d3.scale.linear().domain([2011,2016]))
                .x(d3.scale.ordinal().domain(countryGroup.all().map((d, i) => { return d.key })))
                .xUnits(dc.units.ordinal)
                .barPadding(0.1)
                .outerPadding(0.05);
          
          dc.renderAll();
        });
    
  </script>
</body>
​
    