<?xml version="1.0"?>
<feed xmlns="http://www.w3.org/2005/Atom" xml:lang="en">
	<id>https://lms.onnocenter.or.id/wiki/index.php?action=history&amp;feed=atom&amp;title=Python%3A_Data_Visualisation_Basics</id>
	<title>Python: Data Visualisation Basics - Revision history</title>
	<link rel="self" type="application/atom+xml" href="https://lms.onnocenter.or.id/wiki/index.php?action=history&amp;feed=atom&amp;title=Python%3A_Data_Visualisation_Basics"/>
	<link rel="alternate" type="text/html" href="https://lms.onnocenter.or.id/wiki/index.php?title=Python:_Data_Visualisation_Basics&amp;action=history"/>
	<updated>2026-04-20T00:58:21Z</updated>
	<subtitle>Revision history for this page on the wiki</subtitle>
	<generator>MediaWiki 1.45.1</generator>
	<entry>
		<id>https://lms.onnocenter.or.id/wiki/index.php?title=Python:_Data_Visualisation_Basics&amp;diff=46551&amp;oldid=prev</id>
		<title>Onnowpurbo: Created page with &quot; Mining Twitter Data with Python: Part 5 – Data Visualisation Basics  A picture is worth a thousand tweets: more often than not, designing a good visual representation of ou...&quot;</title>
		<link rel="alternate" type="text/html" href="https://lms.onnocenter.or.id/wiki/index.php?title=Python:_Data_Visualisation_Basics&amp;diff=46551&amp;oldid=prev"/>
		<updated>2017-01-22T03:17:27Z</updated>

		<summary type="html">&lt;p&gt;Created page with &amp;quot; Mining Twitter Data with Python: Part 5 – Data Visualisation Basics  A picture is worth a thousand tweets: more often than not, designing a good visual representation of ou...&amp;quot;&lt;/p&gt;
&lt;p&gt;&lt;b&gt;New page&lt;/b&gt;&lt;/p&gt;&lt;div&gt;&lt;br /&gt;
Mining Twitter Data with Python: Part 5 – Data Visualisation Basics&lt;br /&gt;
&lt;br /&gt;
A picture is worth a thousand tweets: more often than not, designing a good visual representation of our data, can help us make sense of them and highlight interesting insights. After collecting and analysing Twitter data, the tutorial continues with some notions on data visualisation with Python.&lt;br /&gt;
&lt;br /&gt;
Tutorial Table of Contents:&lt;br /&gt;
&lt;br /&gt;
    Part 1: Collecting data&lt;br /&gt;
    Part 2: Text Pre-processing&lt;br /&gt;
    Part 3: Term Frequencies&lt;br /&gt;
    Part 4: Rugby and Term Co-Occurrences&lt;br /&gt;
    Part 5: Data Visualisation Basics (this article)&lt;br /&gt;
    Part 6: Sentiment Analysis Basics&lt;br /&gt;
    Part 7: Geolocation and Interactive Maps&lt;br /&gt;
&lt;br /&gt;
==From Python to Javascript with Vincent==&lt;br /&gt;
&lt;br /&gt;
While there are some options to create plots in Python using libraries like matplotlib or ggplot, one of the coolest libraries for data visualisation is probably D3.js which is, as the name suggests, based on Javascript. D3 plays well with web standards like CSS and SVG, and allows to create some wonderful interactive visualisations.&lt;br /&gt;
&lt;br /&gt;
Vincent bridges the gap between a Python back-end and a front-end that supports D3.js visualisation, allowing us to benefit from both sides. The tagline of Vincent is in fact “The data capabilities of Python. The visualization capabilities of JavaScript”. Vincent, a Python library, takes our data in Python format and translates them into Vega, a JSON-based visualisation grammar that will be used on top of D3. It sounds quite complicated, but it’s fairly simple and pythonic. You don’t have to write a line in Javascript/D3 if you don’t want to.&lt;br /&gt;
&lt;br /&gt;
Firstly, let’s install Vincent:&lt;br /&gt;
&lt;br /&gt;
 sudo pip install vincent&lt;br /&gt;
&lt;br /&gt;
Secondly, let’s create our first plot. Using the list of most frequent terms (without hashtags) from our rugby data set, we want to plot their frequencies:&lt;br /&gt;
	&lt;br /&gt;
 import vincent&lt;br /&gt;
  &lt;br /&gt;
 word_freq = count_terms_only.most_common(20)&lt;br /&gt;
 labels, freq = zip(*word_freq)&lt;br /&gt;
 data = {&amp;#039;data&amp;#039;: freq, &amp;#039;x&amp;#039;: labels}&lt;br /&gt;
 bar = vincent.Bar(data, iter_idx=&amp;#039;x&amp;#039;)&lt;br /&gt;
 bar.to_json(&amp;#039;term_freq.json&amp;#039;)&lt;br /&gt;
&lt;br /&gt;
At this point, the file term_freq.json will contain a description of the plot that can be handed over to D3.js and Vega. A simple template (taken from Vincent resources) to visualise the plot:&lt;br /&gt;
	&lt;br /&gt;
 &amp;lt;html&amp;gt;  &lt;br /&gt;
 &amp;lt;head&amp;gt;    &lt;br /&gt;
     &amp;lt;title&amp;gt;Vega Scaffold&amp;lt;/title&amp;gt;&lt;br /&gt;
     &amp;lt;script src=&amp;quot;http://d3js.org/d3.v3.min.js&amp;quot; charset=&amp;quot;utf-8&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
     &amp;lt;script src=&amp;quot;http://d3js.org/topojson.v1.min.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
     &amp;lt;script src=&amp;quot;http://d3js.org/d3.geo.projection.v0.min.js&amp;quot; charset=&amp;quot;utf-8&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
     &amp;lt;script src=&amp;quot;http://trifacta.github.com/vega/vega.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
 &amp;lt;/head&amp;gt;&lt;br /&gt;
 &amp;lt;body&amp;gt;&lt;br /&gt;
     &amp;lt;div id=&amp;quot;vis&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
 &amp;lt;/body&amp;gt;&lt;br /&gt;
 &amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;&lt;br /&gt;
 // parse a spec and create a visualization view&lt;br /&gt;
 function parse(spec) {&lt;br /&gt;
   vg.parse.spec(spec, function(chart) { chart({el:&amp;quot;#vis&amp;quot;}).update(); });&lt;br /&gt;
 }&lt;br /&gt;
 parse(&amp;quot;term_freq.json&amp;quot;);&lt;br /&gt;
 &amp;lt;/script&amp;gt;&lt;br /&gt;
 &amp;lt;/html&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Save the above HTML page as chart.html and run the simple Python web server:&lt;br /&gt;
&lt;br /&gt;
 python -m http.server 8888 # Python 3&lt;br /&gt;
 python -m SimpleHTTPServer 8888 # Python 2&lt;br /&gt;
&lt;br /&gt;
Now you can open your browser at http://localhost:8888/chart.html and observe the result:&lt;br /&gt;
&lt;br /&gt;
==Term Frequencies==&lt;br /&gt;
&lt;br /&gt;
Notice: you could save the HTML template directly from Python with:&lt;br /&gt;
&lt;br /&gt;
 bar.to_json(&amp;#039;term_freq.json&amp;#039;, html_out=True, html_path=&amp;#039;chart.html&amp;#039;)&lt;br /&gt;
&lt;br /&gt;
but, at least in Python 3, the output is not a well formed HTML and you’d need to manually strip some characters.&lt;br /&gt;
&lt;br /&gt;
With this procedure, we can plot many different types of charts with Vincent. Let’s take a moment to browse the docs and see its capabilities.&lt;br /&gt;
&lt;br /&gt;
==Time Series Visualisation==&lt;br /&gt;
&lt;br /&gt;
Another interesting aspect of analysing data from Twitter is the possibility to observe the distribution of tweets over time. In other words, if we organise the frequencies into temporal buckets, we could observe how Twitter users react to real-time events.&lt;br /&gt;
&lt;br /&gt;
One of my favourite tools for data analysis with Python is Pandas, which also has a fairly decent support for time series. As an example, let’s track the hashtag #ITAvWAL to observe what happened during the first match.&lt;br /&gt;
&lt;br /&gt;
Firstly, if we haven’t done it yet, we need to install Pandas:&lt;br /&gt;
&lt;br /&gt;
 sudo pip install pandas&lt;br /&gt;
&lt;br /&gt;
In the main loop which reads all the tweets, we simply track the occurrences of the hashtag, i.e. we can refactor the code from the previous episodes into something similar to:&lt;br /&gt;
&lt;br /&gt;
 import pandas&lt;br /&gt;
 import json&lt;br /&gt;
  &lt;br /&gt;
 dates_ITAvWAL = []&lt;br /&gt;
 # f is the file pointer to the JSON data set&lt;br /&gt;
 for line in f:&lt;br /&gt;
     tweet = json.loads(line)&lt;br /&gt;
     # let&amp;#039;s focus on hashtags only at the moment&lt;br /&gt;
     terms_hash = [term for term in preprocess(tweet[&amp;#039;text&amp;#039;]) if term.startswith(&amp;#039;#&amp;#039;)]&lt;br /&gt;
     # track when the hashtag is mentioned&lt;br /&gt;
     if &amp;#039;#itavwal&amp;#039; in terms_hash:&lt;br /&gt;
         dates_ITAvWAL.append(tweet[&amp;#039;created_at&amp;#039;])&lt;br /&gt;
  &lt;br /&gt;
 # a list of &amp;quot;1&amp;quot; to count the hashtags&lt;br /&gt;
 ones = [1]*len(dates_ITAvWAL)&lt;br /&gt;
 # the index of the series&lt;br /&gt;
 idx = pandas.DatetimeIndex(dates_ITAvWAL)&lt;br /&gt;
 # the actual series (at series of 1s for the moment)&lt;br /&gt;
 ITAvWAL = pandas.Series(ones, index=idx)&lt;br /&gt;
  &lt;br /&gt;
 # Resampling / bucketing&lt;br /&gt;
 per_minute = ITAvWAL.resample(&amp;#039;1Min&amp;#039;, how=&amp;#039;sum&amp;#039;).fillna(0)&lt;br /&gt;
&lt;br /&gt;
The last line is what allows us to track the frequencies over time. The series is re-sampled with intervals of 1 minute. This means all the tweets falling within a particular minute will be aggregated, more precisely they will be summed up, given how=&amp;#039;sum&amp;#039;. The time index will not keep track of the seconds anymore. If there is no tweet in a particular minute, the fillna() function will fill the blanks with zeros.&lt;br /&gt;
&lt;br /&gt;
To put the time series in a plot with Vincent:&lt;br /&gt;
&lt;br /&gt;
 time_chart = vincent.Line(ITAvWAL)&lt;br /&gt;
 time_chart.axis_titles(x=&amp;#039;Time&amp;#039;, y=&amp;#039;Freq&amp;#039;)&lt;br /&gt;
 time_chart.to_json(&amp;#039;time_chart.json&amp;#039;)&lt;br /&gt;
&lt;br /&gt;
Once you embed the time_chart.json file into the HTML template discussed above, you’ll see this output:&lt;br /&gt;
&lt;br /&gt;
==Time Series==&lt;br /&gt;
&lt;br /&gt;
The interesting moments of the match are observable from the spikes in the series. The first spike just before 1pm corresponds to the first Italian try. All the other spikes between 1:30 and 2:30pm correspond to Welsh tries and show the Welsh dominance during the second half. The match was over by 2:30, so after that Twitter went quiet.&lt;br /&gt;
&lt;br /&gt;
Rather than just observing one sequence at a time, we could compare different series to observe how the matches has evolved. So let’s refactor the code for the time series, keeping track of the three different hashtags #ITAvWAL, #SCOvIRE and #ENGvFRA into the corresponding pandas.Series.&lt;br /&gt;
&lt;br /&gt;
	&lt;br /&gt;
 # all the data together&lt;br /&gt;
 match_data = dict(ITAvWAL=per_minute_i, SCOvIRE=per_minute_s, ENGvFRA=per_minute_e)&lt;br /&gt;
 # we need a DataFrame, to accommodate multiple series&lt;br /&gt;
 all_matches = pandas.DataFrame(data=match_data,&lt;br /&gt;
                                index=per_minute_i.index)&lt;br /&gt;
 # Resampling as above&lt;br /&gt;
 all_matches = all_matches.resample(&amp;#039;1Min&amp;#039;, how=&amp;#039;sum&amp;#039;).fillna(0)&lt;br /&gt;
  &lt;br /&gt;
 # and now the plotting&lt;br /&gt;
 time_chart = vincent.Line(all_matches[[&amp;#039;ITAvWAL&amp;#039;, &amp;#039;SCOvIRE&amp;#039;, &amp;#039;ENGvFRA&amp;#039;]])&lt;br /&gt;
 time_chart.axis_titles(x=&amp;#039;Time&amp;#039;, y=&amp;#039;Freq&amp;#039;)&lt;br /&gt;
 time_chart.legend(title=&amp;#039;Matches&amp;#039;)&lt;br /&gt;
 time_chart.to_json(&amp;#039;time_chart.json&amp;#039;)&lt;br /&gt;
&lt;br /&gt;
And the output:&lt;br /&gt;
&lt;br /&gt;
 time2&lt;br /&gt;
&lt;br /&gt;
We can immediately observe when the different matches took place (approx 12:30-2:30, 2:30-4:30 and 5-7) and we can see how the last match had the all the attentions, especially in the end when the winner was revealed.&lt;br /&gt;
&lt;br /&gt;
==Summary==&lt;br /&gt;
&lt;br /&gt;
Data visualisation is an important discipline in the bigger context of data analysis. By supporting visual representations of our data, we can provide interesting insights. We have discussed a relatively simple option to support data visualisation with Python using Vincent. In particular, we have seen how we can easily bridge the gap between Python and a language like Javascript that offers a great tool like D3.js, one of the most important libraries for interactive visualisation. Overall, we have just scratched the surface of data visualisation, but as a starting point this should be enough to get some nice ideas going. The nature of Twitter as a medium has also encouraged a quick look into the topic of time series analysis, allowing us to mention pandas as a great Python tool.&lt;br /&gt;
&lt;br /&gt;
If this article has given you some ideas for data visualisation, please leave a comment below or get in touch.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
==Referensi==&lt;br /&gt;
&lt;br /&gt;
* https://marcobonzanini.com/2015/04/01/mining-twitter-data-with-python-part-5-data-visualisation-basics/&lt;/div&gt;</summary>
		<author><name>Onnowpurbo</name></author>
	</entry>
</feed>