Area Chart

C3 Area Chart

This is a C3 Area Chart representing the 2015 claims, users and spending data for Medicare Part D. In order to keep this manageable, I have limited the dataset to the drugs with the 10 highest number of claims.

The visualization is a work in progress and some of the controls are not yet functional, however, the data filters should allow users to effectively sift though items of interest.

References

dex.js - Website

<!DOCTYPE html>
<head>
    <style>
        html, body, #ChartArea {
            height: 100%;
            min-height: 100%;
            width: 100%;
            min-width: 100%;
        }

#ChartArea {
            display: inline-block;
        }
    </style>
    <title>C3 Area Chart Example</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.theme.min.css">
    <link rel="stylesheet" href="https://dexjs.net/js/dex-jquery.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css"/>
    <link rel="stylesheet" href="https://dexjs.net/js/dex-bootstrap.css">
    <link rel="stylesheet" href="https://dexjs.net/js/dex.css">

$(document).ready(function () {
      $('body').layout({
        applyDemoStyles: false,
        west: {
          size: 335
        },
        onresize: function () {
          var width = d3.select(chart.config.parent).property("clientWidth");
          var height = d3.select(chart.config.parent).property("clientHeight");
          chart.attr("width", width).attr("height", height).update();
        }
      });

var chart = dex.charts.c3.AreaChart({
          parent: '#ChartArea',
          csv: drugSpending,
          height: 500, width: 800
        }
      );
      chart.render();

var configPane = dex.ui.ConfigurationPane({
        parent: "#ConfigurationPane",
        csv: drugSpending,
        components: [chart]
      }).render();
    });
  });
</script>

</body>
</html>

Updated missing url https://cdnjs.cloudflare.com/ajax/libs/Faker/3.1.0/faker.min.js to https://cdnjs.cloudflare.com/ajax/libs/faker/3.1.0/faker.min.js

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js

https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js

https://dexjs.net/js/dex-jquery.js

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js

https://dexjs.net/js/dex-bootstrap.js

https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js

https://dexjs.net/js/dex-libs.js

https://dexjs.net/js/dex.js

https://cdnjs.cloudflare.com/ajax/libs/Faker/3.1.0/faker.min.js

https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.14/c3.min.js