BitExplorer

Bitcoin Transaction Visualizer

Jeff Lee
Lintao Ma
Narayan Timsina

December 11, 2017

Contents

1 Daily Activities 2
1.1 November 6th . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.2 November 8th . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.3 November 10th . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.4 November 13th . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.5 November 15th . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.6 November 17th . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.7 November 20th . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.8 Nomember 24th . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.9 November 26th . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

2 Burndown Chart 5

3 Product Backlog 6

4 UML Diagram 7

5 User Manual 8
5.1 Start Screen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
5.2 Explorer Mode . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
5.3 Traveler Mode . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

1
Chapter 1

Daily Activities

1.1 November 6th

Laid groundwork, brainstormed ideas for project.

1.2 November 8th

Added Processing core to Java package which we will use for the visualization
part of the project.

1.3 November 10th

Transaction Stream
• Gets stream of new bitcoin transactions through websocket.

• Parses JSON string to get relevant information.

• Saves from address, to address, and value.

1.4 November 13th

Balls and Movements
• created an animation of randomly bouncing Ball objects that can hold
data

1.5 November 15th

Link Transaction and Balls

2
 • Each new transaction is put in a Queue to be added.
• Queue is flushed and new balls are added to a list, appear in screen with
random motion and size proportional to transaction value.

1.6 November 17th

Live Exchange Rate
• Live exchange rate is refreshed every 10 seconds from Blockchain API,
displayed in screen.

Transaction Graph
• Graph groups of transactions in bar form, displays what size transactions
are most popular

1.7 November 20th

Buttons
• Created standard button object to be used throughout application.
• Added on-screen buttons for easier user interaction (previously used key-
board).
GUI Upgrade
• Branded application, devised a logo.
• Made balls of certain values a set color to increase readability.

• Added a visually pleasing background.

• Made buttons responsive (change color on hover).
• title and footer bar to display important data.

1.8 Nomember 24th

Fetch Recent Block
• Gets the hash of the most recent block.

Block Object and Display

• Fetches JSON string given the most recent block.
• Parses through an average of 100,000 lines of data to find relevant info.

3
 • Saves total transaction volume, biggest transaction, parent block hash,
and more.
• Displays simple text on screen to show the information.
Blockchain Travelling
• Utilizes Blockchain linked-list style structure to allow the parent block or
child block to be quickly loaded.
• Each block has a parent block address, parentBlock object, and childBlock
object
• If the parent has not been loaded, we fetch the info
• If the parent has been loaded, it is saved in parentBlock.
• childBlock is set on creation, as every block must have a child.
• Latest Block is noted to user, does not have a child.

1.9 November 26th

Ball Data Display
• Wanted to display more data for each transaction ball.
• Now when stream is paused, every ball displays to and from address on
hover.
GUI Upgrade
• Display block info in a clean frame.
• Easily switch from stream to explorer mode and back.
• Added startup screen to allow user to select a mode to boot into, but can
switch back and forth later on.
Enlarged Window Size
• Made application window slightly bigger to allow for more features, less
crowding.
Upgraded Graph
• Made four bars instead of three to allow for better value intervals.
• Set cap length at 500 to prevent overflow.
Color Key
• Added color key to show user what value each color ball represents.

4
Chapter 2

Burndown Chart

5
Chapter 3

Product Backlog

6
Chapter 4

UML Diagram
src

Ball

- isSelected : boolean
BitExplorer - value : double
- MINSPEED : float = 2.5 Button
- isConnected, isPaused, hasStarted,
- MAXSPEED : INT = 10
showKey : boolean = false - xPos, yPos, height, width,
- diameter, xPos, yPos, ySpd, xSpd : float
- screenWidth : int = 800 normalColorm highlightedColor : int
- fAddress, tAddress : String
- screenHeight : int = 600 - mouseIsOver : boolean = false
- xDirection : int = 1
- ltPointOne, ltOne, ltFive : int = 0 - name : String
- yDirection : int = 1
- currencyTimer : int = 0
- r, g, b : int + Button(xCoordinate : int, yCoordinate : int,
- numTX : int = 0
- randGen : Random = new Random() width : int, height : int, text : String)
- sessionTotalBTC : double = 0.00
- newBallQueue : ArrayDeque<Double> + overButton(mouseX : int, mouseY : int)
+ Ball(val : double, from : String, to : String)
- existingBalls : ArrayList<Ball> + getxPos() : int
+ move(screenWidth : int, screenHieht : width)
- streamButtons : ArrayList<Button> + getyPos() : int
+ getDiameter() : double
- exploreButtons : ArrayList<Button> + getHeight() : int
+ getRed() : int
- startButtons : ArrayList<Buttons> + getWidth() : int
+ getGreen() : int
- currentBlock : Block + setRectColor(rectColor : int)
+ getBlue() : int
- pauseButton, clearButton, modeButton, + getHighlightedColor() : int
+ getxPosition() : float
parentButton, childButton : Button + mouseIsOver() : boolean
+ getYPosition() : float
- streamButton, exploreButton, refreshButton, + setMouseIsOver(mouseIsOver : boolean)
+ getValueBTC() : double
keyButton : Button + getButtonColor() : String
+ getFromAddress() : String
- bitFont, typeFont, sansFont : PFont + getButtonText() : String
+ getToAddress() : String
- bg : PImage + setButtonText(newName : String)
+ setDirection()
- currentPriceUSD : String + getTextColor() : int
+ setVariablesFromValue()
- modeString : String + mouseIsOver(mX : int, mY : int) Block
- streamString : String = "Transaction Visualizer" + setSpeed()
- explorerString : String = "Blockchain Traveler" + getIsSelected() - hash, parentBlockHash,
- tStrean : TransactionStream maxSentAddress : String
- childBlock, parentBlock : Block
+ settings() - blockNumber, numTX : int
+ setup() - storageSize, totalVolumeBTC, reward TransactionStream
+ draw() feesCollected : double
+ drawSessionTotal() - maxTX : int = 0 - numTX : int = 0
+ drawNumTransactions() - jsonList : ArrayList<String> - app : BitExplorer
+ drawCurrentExchange() - APISTRING : String
+ drawGraph() + TransactionStream(serverURI : URI)
= "https ://blockchain.info/rawblock/"
+ drawBlockInfo() + TransactionStream(serverURI : URI,
+ drawMenuDar() + Block(bHash : String, child : Block) app : BitExplorer)
+ drawButtons() + parseData() + onClose(arg0 : int, closeString :
+ drawBalls() + fetchJSONData() String, arg2 : boolean)
+ drawStartScreen() + getBlockNumber() : int + onError(ex : Exception)
+ drawColorKey() + getFeesCollected() : double + onMessage(message : String )
+ mousePressed() + getNumTxs() : int + onOpen(arg0 : ServerHandshake)
+ manageWSConnection() + getStorageSizeInMB() : double + startStream()
+ pauseVisualizer() + getReward() : double + stopStream()
+ fetchCurrenctBlock() + getBiggestTx() : double + parseMessage(message : String) : String
+ fetchParentBlock() + getTotalBTC() : double + printTx(from : String, to : String, val : double,
+ flushQueue() + getParentBlockHash() : String numberTrans : int)
+ clearBalls() + getChildBlock() : Block
+ addBall(from : String, to : String, + setParentBlock(p : Block)
value : double) + getParentBlock() : Block
+ getMaxAddress() : String
+ isFirstBlock() : boolean
+ printBlock()

7
Chapter 5

User Manual

5.1 Start Screen

When BitExplorer is launched, a simple title screen appears that allows the user
to boot into a specific mode: Explorer or Traveler.

8
5.2 Explorer Mode

If Explorer is selected, the frame is updated to show a live stream of all new in-
coming transactions. Each new ball is generated from the center with a random
speed and direction, and a color and size correlated to its transaction value.

9
If the stream becomes to fast to process any information or if more details about
a transaction are desired, the user can pause the visualization which halts any
new transactions from being processed. While paused, a transaction ball can
be hovered over to reveal the sender’s and receiver’s respective addresses. Addi-
tionally, a color key can be shown in the top right to easily see an approximate
value of each transaction.

10
5.3 Traveler Mode
If the user boots into Traveler mode, the most recent block is fetched from the
Blockchain API and the relevant information is displayed onscreen. Addition-
ally, the user can use the mode button in the top right to toggle between modes
after booting. The Traveler mode displays the most relevant information for
each block, and can access each successive or previous block with the child and
parent buttons below the display.

11