This is a talk about my last three project i've been working on. TwinMaze, TopicRay.com, StoryLine.com

1. MY LAST THREE PROJECTS
WINS AND FAILURES
Created by /Anton Katunin @antulik

2. ABOUT ME
Bachelor of IT at UQ
MS Access and VBA
C# and .Net
Ruby on Rails
Javascript
Visualisations

3. AGENDA
TwinMaze
TopicRay.com
StoryLine.im

4. TWINMAZE
Movie recomendation website
Feb 2011

5. FRUSTRATION
Hard to find movies you would enjoy
General ratings don't work (IMDB)
e.g. movies you enjoy aren't neccessary have high rating

6. THE IDEA
What if ...
you had a clone of yourself
it could watch movies
and you could do other things
then he could tell you what is good and what is not
just like twins

7. TWINS
What if ...
You had not 1 twin
but 2 twins
or 10 twins
or 100 twins
or 1000 twins

8. PLAN
1. Select movies you like and don't
2. Run magic algorithm
3. Get personalised movie recommendations

9. ALGORITHM
Machine learning
Neuron networks
Data mining
just keep it simple

10. ALGORITHM
Step 1. Find your top Twins
Match each user with every other user
Calculate compatibility rating between each pair of users

11. REPLACE INTO `user_twins`
(`user_id`, `twin_id`, `avg_difference`,
`percent`, `movies_matched`, `level`, `updated_at`)
(select user_id,twin_id, avg_difference, percent, movies
_matched,
if(percent > 92.5, 1,
if(percent > 90, 2,
if(percent > 87.5, 3,
if(percent > 85, 4,
if(percent > 82.5, 5,
if(percent > 80, 6,
if(percent > 77.5, 7,
if(percent > 75, 8, 9)))))))),
CURRENT_TIMESTAMP
from
(select sr.user_id as user_id, sr.twin_id as twin_id,
Sum(single_points) as avg_difference,
(10-(Sum(single_points)/count(*)))*10 as percent, count(
*) as movies_matched
from
(select mr1.user_id as user_id,
mr2.user_id as twin_id,
ABS(mr1.rating-mr2.rating) as single_points
from user_votes as mr1 join user_votes as mr2
on mr1.movie_id = mr2.movie_id and mr1.user_id <> mr2.us
er_id
where mr1.user_id = %d)
as sr
group by sr.user_id, sr.twin_id
having count(*) >= %d) as t2
);

12. ALGORITHM
Step 2. Calculate personalized movie ratings
Pick 1000 best twins
Combine their ratings
Predict rating for each movie
Pick best movies which user haven't seen
select ...
Power(10-level, ln(count(*))/ln(2.5)) * count(*) * avg(ratin
g) as rating_points_sum,
Power(10-level, ln(count(*))/ln(2.5)) * count(*) as vote_poi
nts_sum,
ln(count(*))/ln(2.5) as power,

13. PROBLEM
Where do you get your movie catalogue?
IMDB.com - good and expensive
TMDB.org - okay and free

14. BIG PROBLEM
How do you test your recommendations
when you have 0 users?

15. MORE USERS = BETTER SYSTEM
Another Social network?

16. BOOTSTRAP THE DATA
get data from other websites

17. DARK DAYS
web crawler days
5 days
17GB of web pages (no images)
30k users
500k ratings
user accounts data?? WAT!?

18. ONE SUPRISING MORNING
/logs
/backups

19. THE NEXT DAY...
BANNED!
at least they fixed their security issues...
... you are welcome!

20. HOW TO SAVE $10/M
or hosting from home

21. TEAM
divide and conquer
business + design + development
founders vs contributors

22. 50% OF NOTHING IS $0

23. TESTING
It works!

24. LAUNCH!!
Not sure if we ever launched

25. WHAT'S NEXT?
Push or drop?
Performance is slow
(10s + 2min per user)
Movie database quality is bad
Dealing with competitors
Social network effect

26. WHAT'S NEXT?
Push or drop?
DROP!

27. TOPICRAY
multi-threaded chat system
Sep 2011

28. FRUSTRATION
chats are hard for work discussions
deep comments
GoogleWave is closed

29. HackerNews nested comments

30. CONTEXT
context in a converstion
or 'what do you mean'
think of bug reports

31. THE IDEA
What if ...
You could never mix context in your discussions

32. PROBLEM ANALYSIS
hierarchical data
very very deep hierarchical data

33. TOPICRAY PROGRESS

34. start with the end in mind

36. html map, topic list, linear chat view

37. styles, linear chat with rotation

38. map in ocanvas

39. map is draggable, chat space view

40. different layout with bigger chat view, focused message

41. trying another layout

42. and another, direction of chat is the same as on the map

43. switched to panels, map is expandable

44. straight layout + transparency

45. collapsable messages

46. collapsable messages with limit and size

47. moved away from draggable map to automatic map layout

48. moved away from panels, added bootstrap css, map is not expandable

49. consistent color scheme, topic headers, issues with ui overlap, topic name at the corner

50. unread messages, collapsable limit set to one

51. trying sunburst map layout in d3.js

52. added map view with icicle graph

53. icicle graph styles

54. removed inline map, sorted topic list, experimenting with floating messages

55. rebranded to TopicRay, added focused line, hacker news integration

56. topic list is transparent

57. icicle with unread messages

58. attempt to improve icicle

59. inline sunburst graph

60. animation for sunburst

61. tree depth indicator, inline message radar

62. new conversation tree view

63. DEMO

64. STACK
Backend:
Ruby on Rails + Postgres
Frontend:
HTML + CSS + SCSS + jQuery
backbone.js
oCanvas, d3.js
websockets (Pusher)
twitter bootstrap
and others

65. PERFORMANCE ISSUES
jQuery.animate is very slow
Firefox -> Chrome

66. TOPICRAY LAUNCH
HackerNews
We need blog

67. ONE MONTH LATER...
It's time to launch!!
and ...
NOTHING HAPPENED!

68. WHAT'S NEXT?
Push or drop?
1 year old
solid proof of concept
no real use case
no competitors
no market?

69. WHAT'S NEXT?
Push or drop?
HOLD!

70. LESSONS
Keep history of your progress
Don't strive for perfection
Release as soon as you can
Have a blog
Keep asking for feedback
Javascript frameworks are good
Browsers are not as fast

71. AND
ITERATE
ITERATE
ITERATE

74. STORYLINE
HISTORIC NEWS BROWSER

75. FRUSTRATION
I hate twitter!!
@antulik
Google Reader
300 rss articles per day
Too much information
Too little time

76. THE IDEA
What if ...
we had a tool which could
give us insights into information importance
tool which would
structure and prioritise information

77. get inspired

78. STORYLINE PROGRESS

79. started with google calendar

80. prettify

81. moved to force graph

82. group into lines

83. add twitter

84. focus on twitter, calendar list

85. focus on twitter, zoom

86. navigation slider

87. prettify, add top previews

88. add avatars

89. add inline link preview

90. remove link preview

91. x axis is minutes

92. twisted layout 1/2 (DNA?)

93. twisted layout 2/2

94. bended lines

95. problems with size

96. zoom 1/5

97. zoom 2/5

98. zoom 3/5

99. zoom 4/5

100. zoom 5/5

101. added mouse scroll

102. reddit and multi-calendar colors

103. make everything smaller

104. grouped per lines, less chaos

105. another twist layout attemp

106. lines with small overlap

107. top 10 reddit streams for 12 hours

109. screencast v2

110. calendars hidden, add links preview

111. HackerNews integration

112. repositioned ui, mark as read, 4 previews

113. smarter selection

114. add tutorial, joyride.js

116. DEMO

117. TESTING
common reaction
WOW! IT'S AWESOME!
WHAT IS IT?

118. EXPLANING
narrowing down
from
data visualisation tool
to
historic news browser

119. STACK
Backend:
Ruby on Rails + Postgres
Frontend:
HTML + CSS + SCSS + jQuery
ember.js
d3.js
twitter bootstrap
S3 + CloudFront CDN
and others

120. BRANDING
'StoryLine' is too popular
HooDB.com?
StoryParticles.com?
.com?
StoryLine.im

121. LAUNCH
on HackerNews
+ facebook, twitter, gplus
attempt #2
at BrisJelly

123. LAUNCH STATS
in 24 hours
85 up votes
4k unique visitors
9.5k pageviews
600 visitors/hour peak
No performance issues during launch

124. StoryLine on StoryLine

125. PERFORMANCE ISSUES
800+kb .js file
1000+ animated objects
Optimised filtering
Smart fetching
How many times to redraw
Chrome vs others

126. LESSONS
Grow and change ideas
Browser perfomance is hard
Communicating ideas is hard
Iterate
Ember.js + d3.js is a killer combo
Caching and CDN - FTW!
Web analytics to measure success

127. WHAT'S NEXT?
Push or drop?
PUSH!

128. CAMPJS
campjs.com
9-11th August

129. THE END
TwinMaze
TopicRay.com
StoryLine.im
@antulik