Bar chart using d3.js , pandas and flask

Question

I am trying to render a bar chart on an HTML page using d3.js and JSON data is coming from Flask. Below is the flask code: ``` import sqlite3 import pandas as pd from flask import * app = Flask(__name__) @app.route("/") def show_graph(): connection = sqlite3.connect('recruit.db') query = "select * from customer" df_customer = pd.read_sql(query, connection) df_fb_usage = df_customer.loc[:,['race_code','facebook_user_rank']] df_fb_usage.facebook_user_rank = df_fb_usage.facebook_user_rank.astype(int) plot_df = df_fb_usage.groupby('race_code').agg({'facebook_user_rank':'mean'}) plot_df = plot_df.reset_index() query = "select * from race" df_race = pd.read_sql(query,connection) df_race.columns = ['race_code','value'] Plot_df_new = plot_df.merge(df_race,right_index=True,left_index=True,how='outer') Plot_df_new = Plot_df_new.drop(['race_code_x','race_code_y'],axis=1) Plot_df_new.columns = ['ethinicity','facebook_user_rank'] data = Plot_df_new.to_json() return render_template('display.html',d…

Accepted Answer

Passed the data as below:

```
data = json.dumps(df_list)
return render_template('display.html',data=data)
```

And then rendered the graph from the JSON data.

```
<script>
var chartData = {{ data | safe }};
console.log(chartData);
```

Bar chart using d3.js , pandas and flask

Solution

Problem