exp0nge

if form.is_valid():
    poll = form.save(commit=False)
    poll.submitted_user = request.user
    poll.save()

exp0nge

 $.ajax({
            url: '/url/for/processing',
            type: 'GET',
            data: {csrfmiddlewaretoken: document.getElementsByName('csrfmiddlewaretoken')[0].value},
            dataType: 'json',
            success: function (response) {
                    console.log('OK');
            },
            error: function (response) {
                console.log(response);

exp0nge

$(document).ready(function () {
    d3.json('data.json', function (data) {
        var ndx = crossfilter(data); // Tell Crossfilter what data we want to filter.
        //defaultDim is for the total # of defaulters ticker.
        var defaultDim = ndx.dimension(function (d) {
            return d['default payment next month'];
        });
        //genderDim filters based on gender. The function will iterate over the 30,000 records returning either Male, Female, or Unknown every time.
        // We can then use dc.js to tally those up.
        var genderDim = ndx.dimension(function (d) { //notice the parameter, since we told Crossfilter what our data is, we can just get it in our callbacks

exp0nge

import pandas as pd 
import json data = pd.read_csv('default of credit card clients.csv') 
with open('data.json', 'w') as f:
  f.write(data.reset_index().to_json(orient='records'))

exp0nge

<div class="content" style="min-height: 500px;">
  <div class="">
      <div class="">
          <div class="default-count"><span class="number"></span></div>
          /30000 total defaulters
      </div>
  </div>
  <div class="">
      <div class="">
          <div id="genderPie">

exp0nge

var genderPieChart = dc.pieChart('#genderPie');
var marriagePieChart = dc.pieChart('#marriagePie');
var ageDefaultersChart = dc.barChart('#ageDefaulters');
var limitBalDefaultersChart = dc.lineChart('#limitBalDefaulters');
var defaultCountTicker = dc.numberDisplay('.default-count');

exp0nge

//use our handler
genderPieChart
    .width(180) //setup sizes
    .height(180)
    .radius(80)
    .dimension(genderDim) //use the Crossfilter dimension we setup earlier
    .group(genderDim.group()); //put this into the gender dimension group
    
genderPieChart.controlsUseVisibility(true); //tell the chart that we want to use anchor tags as resets

exp0nge

marriagePieChart
    .width(180)
    .height(180)
    .radius(80)
    .dimension(marriageDim) //use the marriage dimension from earlier
    .group(marriageDim.group());
marriagePieChart.controlsUseVisibility(true);
$('#marriagePie > a').on('click', function (e) {
    marriagePieChart.filterAll();
    dc.redrawAll();

exp0nge

//d3.extent will give us the min AND max, which makes it easy for us to setup a scale for our x-axis
var ageMinMax = d3.extent(data, function (d) {
    return d['AGE'];
});

ageDefaultersChart
    .width(900)
    .height(250)
    .dimension(ageDefaultersDim)
    .group(ageDefaultersDim.group().reduceSum(dc.pluck('default payment next month'))) //this will choose the attribute for those that defaulted

exp0nge

//again, get min/max for our x-axis
var limitBalMinMax = d3.extent(data, function (d) {
    return d['LIMIT_BAL'];
});

limitBalDefaultersChart
    .width(900)
    .height(250)
    .dimension(limitDefaultersDim)
    .group(limitDefaultersDim.group().reduceSum(dc.pluck('default payment next month')))