Extract word cloud javascript to separate file.

This commit is contained in:
Adrian Kuhn 2015-09-30 12:56:13 -07:00
parent 7172be9705
commit b75c89b81f
6 changed files with 96 additions and 75 deletions

View File

@ -0,0 +1,66 @@
function viz_wordcloud(token, json_callback) {
var token = d3.select('#' + token);
function refresh() {
d3.json(json_callback, function(error, json) {
var data = json.data;
var range = [
json.form_data.size_from,
json.form_data.size_to,
];
var rotation = json.form_data.rotation;
if (rotation == "square") {
var f_rotation = function() { return ~~(Math.random() * 2) * 90; };
}
else if (rotation == "flat") {
var f_rotation = function() { return 0 };
}
else {
var f_rotation = function() { return (~~(Math.random() * 6) - 3) * 30; };
}
var box = token.node().getBoundingClientRect();
var size = [box.width, box.height - 25];
if (error != null){
var err = '<div class="alert alert-danger">' + error.responseText + '</div>';
token.html(err);
return '';
}
scale = d3.scale.linear()
.range(range)
.domain(d3.extent(data, function(d) { return d.size; }));
var fill = d3.scale.category20();
var layout = d3.layout.cloud()
.size(size)
.words(data)
.padding(5)
.rotate(f_rotation)
.font("serif")
.fontSize(function(d) { return scale(d.size); })
.on("end", draw);
layout.start();
function draw(words) {
token.selectAll("*").remove();
token.append("svg")
.attr("width", layout.size()[0])
.attr("height", layout.size()[1])
.append("g")
.attr("transform", "translate(" + layout.size()[0] / 2 + "," + layout.size()[1] / 2 + ")")
.selectAll("text")
.data(words)
.enter().append("text")
.style("font-size", function(d) { return d.size + "px"; })
.style("font-family", "Impact")
.style("fill", function(d, i) { return fill(i); })
.attr("text-anchor", "middle")
.attr("transform", function(d) {
return "translate(" + [d.x, d.y] + ") rotate(" + d.rotate + ")";
})
.text(function(d) { return d.text; });
}
});
}
refresh();
jtoken = $(token);
jtoken.parent().find("a.refresh").click(refresh);
}

View File

@ -13,7 +13,8 @@ var div = d3.select("#{{ viz.token }}");
var render = function(){
url = "/";
var url = "{{ viz.get_url(json="true")|safe }}";
d3.json(url, function(error, json){
d3.json(url, function(error, payload){
json = payload.data;
div.html("");
//Define the percentage bounds that define color from red to green
if(error != null){
@ -161,7 +162,7 @@ example_data = function(){
var data = [];
for(i=0; i<24; i++){
data.push([
new Date(2015, 1, i, 1, 0, 0, 0),
new Date(2015, 1, i, 1, 0, 0, 0),
rnd() + (i*(rnd()/40))
]);
}

View File

@ -33,7 +33,8 @@
chart.hide();
loading.show();
var url = "{{ viz.get_url(json="true")|safe }}";
$.getJSON(url, function(data){
$.getJSON(url, function(payload){
data = payload.data;
$("#query_container").html(data.query);
nv.addGraph(function() {
// chart_type is {{ viz.chart_type }}

View File

@ -4,7 +4,7 @@
<table class="dataframe table table-striped table-bordered table-condensed">
<thead>
<tr>
{% for col in df.columns if not col.endswith('__perc') %}
{% for col in df.columns if not col.endswith('__perc') %}
<th>{{ col }}</th>
{% endfor %}
</tr>
@ -12,7 +12,7 @@
<tbody>
{% for row in df.to_dict(orient="records") %}
<tr>
{% for col in df.columns if not col.endswith('__perc') %}
{% for col in df.columns if not col.endswith('__perc') %}
{% if col + '__perc' in df.columns %}
<td style="background-image: linear-gradient(to right, lightgrey, lightgrey {{ row[col+'__perc'] }}%, rgba(0,0,0,0) {{ row[col+'__perc'] }}%">
{{ row[col] }}

View File

@ -6,69 +6,12 @@
{% macro viz_js(viz) %}
<script>
$( document ).ready(function() {
var token = d3.select("#{{ viz.token }}");
function refresh() {
var range = [
{{ viz.form_data.get('size_from') or 20 }},
{{ viz.form_data.get('size_to') or 100 }}
];
var rotation = "{{ viz.form_data.get("rotation", "random") }}";
if (rotation == "square")
var f_rotation = function() { return ~~(Math.random() * 2) * 90; };
else if (rotation == "flat")
var f_rotation = function() { return 0};
else
var f_rotation = function() { return (~~(Math.random() * 6) - 3) * 30;};
var url = "{{ viz.get_url(json="true")|safe }}";
var box = token.node().getBoundingClientRect();
var size = [box.width, box.height-25];
d3.json(url, function(error, data){
if(error != null){
var err = '<div class="alert alert-danger">' + error.responseText + '</div>';
token.html(err);
return '';
}
scale = d3.scale.linear()
.range(range)
.domain(d3.extent(data, function(d) { return d.size; }));
var fill = d3.scale.category20();
var layout = d3.layout.cloud()
.size(size)
.words(data)
.padding(5)
.rotate(f_rotation)
.font("serif")
.fontSize(function(d) { return scale(d.size); })
.on("end", draw);
layout.start();
function draw(words) {
token.selectAll("*").remove();
token.append("svg")
.attr("width", layout.size()[0])
.attr("height", layout.size()[1])
.append("g")
.attr("transform", "translate(" + layout.size()[0] / 2 + "," + layout.size()[1] / 2 + ")")
.selectAll("text")
.data(words)
.enter().append("text")
.style("font-size", function(d) { return d.size + "px"; })
.style("font-family", "Impact")
.style("fill", function(d, i) { return fill(i); })
.attr("text-anchor", "middle")
.attr("transform", function(d) {
return "translate(" + [d.x, d.y] + ") rotate(" + d.rotate + ")";
})
.text(function(d) { return d.text; });
}
});
}
refresh();
jtoken = $(token);
jtoken.parent().find("a.refresh").click(refresh);
});
$(document).ready(function() {
viz_wordcloud(
"{{ viz.token }}",
"{{ viz.get_url(json="true")|safe }}"
);
});
</script>
{% endmacro %}

View File

@ -159,6 +159,12 @@ class BaseViz(object):
}
return d
def get_json(self):
payload = {
'data': json.loads(self.get_json_data()),
'form_data': self.form_data,
}
return json.dumps(payload)
class TableViz(BaseViz):
verbose_name = "Table View"
@ -212,7 +218,11 @@ class WordCloudViz(BaseViz):
('size_from', 'size_to'),
'rotation',
]
js_files = ['d3.layout.cloud.js']
js_files = [
'd3.min.js',
'd3.layout.cloud.js',
'widgets/viz_wordcloud.js',
]
def query_obj(self):
d = super(WordCloudViz, self).query_obj()
@ -224,7 +234,7 @@ class WordCloudViz(BaseViz):
d['groupby'] = [d['groupby'][0]]
return d
def get_json(self):
def get_json_data(self):
df = self.get_df()
df.columns = ['text', 'size']
return df.to_json(orient="records")
@ -283,7 +293,7 @@ class BubbleViz(NVD3Viz):
df['group'] = df[[self.series]]
return df
def get_json(self):
def get_json_data(self):
df = self.get_df()
series = defaultdict(list)
for row in df.to_dict(orient='records'):
@ -325,7 +335,7 @@ class BigNumberViz(BaseViz):
self.form_data['metric'] = metric
return d
def get_json(self):
def get_json_data(self):
form_data = self.form_data
df = self.get_df()
df = df.sort(columns=df.columns[0])
@ -394,7 +404,7 @@ class NVD3TimeSeriesViz(NVD3Viz):
df = pd.rolling_sum(df, int(rolling_periods))
return df
def get_json(self):
def get_json_data(self):
df = self.get_df()
series = df.to_dict('series')
chart_data = []
@ -491,7 +501,7 @@ class DistributionPieViz(NVD3Viz):
df = df.sort(self.metrics[0], ascending=False)
return df
def get_json(self):
def get_json_data(self):
df = self.get_df()
df = df.reset_index()
df.columns = ['x', 'y']
@ -515,7 +525,7 @@ class DistributionBarViz(DistributionPieViz):
df = df.sort(self.metrics[0], ascending=False)
return df
def get_json(self):
def get_json_data(self):
df = self.get_df()
series = df.to_dict('series')
chart_data = []