├── AssetDiscoveryTree.sh
├── FlowPlotterD3
    ├── README
    ├── data
    │   ├── data.csv
    │   ├── data.tsv
    │   ├── ms.csv
    │   └── sensordata.csv
    ├── flowplotter.sh
    ├── mslinechart.html
    ├── notes
    ├── output.file
    └── templates
    │   ├── jquery.tipsy.js
    │   ├── linechart.html
    │   ├── linechart.html.bak
    │   ├── mslinechart.html
    │   └── stylesheet.css
├── LICENSE.md
├── README.md
├── d3chart
    ├── forceopacity.html
    └── treeasset.html
├── flowplotter.sh
├── googlechart
    ├── barchart.html
    ├── bubblechart.html
    ├── columnchart.html
    ├── geomap.html
    ├── histogram.html
    ├── linechart.html
    ├── orgchart.html
    ├── piechart.html
    ├── tablechart.html
    ├── timeline.html
    └── treemap.html
└── scripts
    └── AssetDiscoveryTree.sh


/AssetDiscoveryTree.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/bash
 2 | 
 3 | #Generates an Asset List using a pre-existing filter file.
 4 | #Based on a combination of works from Applied Network Security Monitoring and http://www.sei.cmu.edu/reports/12tr006.pdf
 5 | 
 6 | #Usage
 7 | # Obtain a filter file with a large amount of network data, representative of all hosts on your network
 8 | # $ rwfilter --start-date=2014/05/13 --proto=0- --type=all --pass=sample.rw
 9 | 
10 | # Run AssetDiscoveryTree.sh against the file and send to an output html file
11 | # $ ./AssetDiscoveryTree.sh /home/jason/sample.rw > /home/jason/assetlist.html
12 | 
13 | # By default, you will be generating data for servers making up greater than 1 percent of all "server" traffic for a given service.
14 | # If instead you want a static number threshold, you can specify --count=50 to display the top 50 talkers for a service.
15 | # $ ./AssetDiscoveryTree.sh /home/jason/sample.rw --count=50 > /home/jason/assetlistTOP50.html
16 | 
17 | # If instead you want to threshold by byte size, you can specify --threshold=75000000 to display the services with greater than 75000000 bytes outbound.
18 | # $ ./AssetDiscoveryTree.sh /home/jason/sample.rw --threshold=75000000 > /home/jason/assetlistBYTETHRESHOLD.html
19 | 
20 | limitvalue=$2
21 | if [ -z "${limitvalue}" ]; then
22 | limitvalue="--percentage=1"
23 | fi
24 | 
25 | echo '{ "name": "Assets","children": [ ' > flare.temp.json
26 | 
27 | rwfilter $1 --type=outweb --sport=80,443,8080 --protocol=6 --packets=4- --ack-flag=1 --pass=stdout|rwstats --fields=sip $limitvalue --bytes --no-titles|cut -f 1 -d "|"|rwsetbuild > web_servers.set
28 | rwfilter $1 --type=outweb --sport=80,443,8080 --protocol=6 --packets=4- --ack-flag=1 --sipset=web_servers.set --pass=stdout|rwuniq --fields=sip --bytes --sort-output --no-titles --delimited=,|sed 's/^\([0-9]\{1,3\}\.[0-9]\{1,3\}\.[0-9]\{1,3\}\.[0-9]\{1,3\}\),\([0-9]\{1,\}\)$/\t{"name": "\1", "size": \2},/g' |sed '$s/,$//g' | sed '1s/^/\{"name": "Web Servers",\n"children": [/' | sed '$s/$/\n\]},/'  >> flare.temp.json
29 | 
30 | rwfilter $1 --type=out --sport=25,465,110,995,143,993 --protocol=6 --packets=4- --ack-flag=1 --pass=stdout|rwset --sip-file=smtpservers.set
31 | rwfilter $1 --type=out --sport=25,465,110,995,143,993 --sipset=smtpservers.set --protocol=6 --packets=4- --ack-flag=1 --pass=stdout|rwuniq --fields=sip --bytes --sort-output --no-titles --delimited=,|sed 's/^\([0-9]\{1,3\}\.[0-9]\{1,3\}\.[0-9]\{1,3\}\.[0-9]\{1,3\}\),\([0-9]\{1,\}\)$/\t{"name": "\1", "size": \2},/g' |sed '$s/,$//g' | sed '1s/^/\{"name": "SMTP Servers",\n"children": [/' | sed '$s/$/\n\]},/' >>flare.temp.json
32 | 
33 | rwfilter $1 --type=out --sport=53 --protocol=17 --pass=stdout|rwstats --fields=sip $limitvalue --packets --no-titles|cut -f 1 -d "|"| rwsetbuild > dnsservers.set
34 | rwfilter $1 --type=out --sport=53 --protocol=17 --sipset=dnsservers.set --pass=stdout | rwuniq --fields=sip --bytes --sort-output --no-titles --delimited=,|sed 's/^\([0-9]\{1,3\}\.[0-9]\{1,3\}\.[0-9]\{1,3\}\.[0-9]\{1,3\}\),\([0-9]\{1,\}\)$/\t{"name": "\1", "size": \2},/g' |sed '$s/,$//g' | sed '1s/^/\{"name": "DNS Servers",\n"children": [/' | sed '$s/$/\n\]},/' >>flare.temp.json
35 | 
36 | rwfilter $1 --type=out --protocol=47,50,51 --pass=stdout|rwuniq --fields=sip --no-titles|cut -f 1 -d "|" |rwsetbuild > vpn.set
37 | rwfilter $1 --type=out --sipset=vpn.set --pass=stdout|rwuniq --fields=sip --bytes --sort-output --no-titles --delimited=,|sed 's/^\([0-9]\{1,3\}\.[0-9]\{1,3\}\.[0-9]\{1,3\}\.[0-9]\{1,3\}\),\([0-9]\{1,\}\)$/\t{"name": "\1", "size": \2},/g' |sed '$s/,$//g' | sed '1s/^/\{"name": "VPN Servers",\n"children": [/' | sed '$s/$/\n\]},/' >>flare.temp.json
38 | 
39 | rwfilter $1 --type=out --protocol=6 --packets=4- --ack-flag=1 --sport=21 --pass=stdout|rwstats --fields=sip $limitvalue --bytes --no-titles|cut -f 1 -d "|"|rwsetbuild > ftpservers.set
40 | rwfilter $1 --type=out --sipset=ftpservers.set --sport=20 --flags-initial=S/SAFR --pass=stdout|rwuniq --fields=sip --bytes --sort-output --no-titles --delimited=,|sed 's/^\([0-9]\{1,3\}\.[0-9]\{1,3\}\.[0-9]\{1,3\}\.[0-9]\{1,3\}\),\([0-9]\{1,\}\)$/\t{"name": "\1", "size": \2},/g' |sed '$s/,$//g' | sed '1s/^/\{"name": "FTP Servers",\n"children": [/' | sed '$s/$/\n\]},/'  >>flare.temp.json
41 | 
42 | rwfilter $1 --type=out --protocol=6 --packets=4- --ack-flag=1 --sport=22 --pass=stdout|rwstats --fields=sip $limitvalue --bytes --no-titles|cut -f 1 -d "|"|rwsetbuild>sshservers.set
43 | rwfilter $1 --type=out --protocol=6 --packets=4- --ack-flag=1 --sipset=sshservers.set --sport=22 --pass=stdout | rwuniq --fields=sip --bytes --sort-output --no-titles --delimited=,|sed 's/^\([0-9]\{1,3\}\.[0-9]\{1,3\}\.[0-9]\{1,3\}\.[0-9]\{1,3\}\),\([0-9]\{1,\}\)$/\t{"name": "\1", "size": \2},/g' |sed '$s/,$//g' | sed '1s/^/\{"name": "SSH Servers",\n"children": [/' | sed '$s/$/\n\]},/' >>flare.temp.json
44 | 
45 | rwfilter $1 --type=out --protocol=6 --packets=4- --ack-flag=1 --sport=23 --pass=stdout|rwstats --fields=sip $limitvalue --bytes --no-titles|cut -f 1 -d "|"|rwsetbuild > telnetservers.set
46 | rwfilter $1 --type=out --protocol=6 --packets=4- --ack-flag=1 --sipset=telnetservers.set --sport=23 --pass=stdout|rwuniq --fields=sip --bytes --sort-output --no-titles --delimited=,|sed 's/^\([0-9]\{1,3\}\.[0-9]\{1,3\}\.[0-9]\{1,3\}\.[0-9]\{1,3\}\),\([0-9]\{1,\}\)$/\t{"name": "\1", "size": \2},/g' |sed '$s/,$//g' | sed '1s/^/\{"name": "Telnet Servers",\n"children": [/' | sed '$s/$/\n\]},/'  >>flare.temp.json
47 | 
48 | cat flare.temp.json | sed '$s/,$/\n/' | sed '$s/$/\]\}/' | tr '\n' ' ' | sed "s/^/var myjson = '/"| sed "s/$/';/" > assets.json
49 | 
50 | sed '/dataplaceholder/{
51 |     s/dataplaceholder//g
52 |     r assets.json
53 | }' d3chart/treeasset.html
54 | 
55 | rm *.set
56 | rm flare.temp.json
57 | rm assets.json
58 | 


--------------------------------------------------------------------------------
/FlowPlotterD3/README:
--------------------------------------------------------------------------------
1 | This is just a test directory for converting all of the old FlowPlotter to newer D3 versions with more capability.
2 | Old FlowPlotter will remain as it is, but this will serve as the newer "better" FlowPlotter once it is complete. 
3 | 


--------------------------------------------------------------------------------
/FlowPlotterD3/data/data.csv:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/automayt/FlowPlotter/a184bb9d8151b500f95e2482e975c1c5e5cc0f5d/FlowPlotterD3/data/data.csv


--------------------------------------------------------------------------------
/FlowPlotterD3/data/data.tsv:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/automayt/FlowPlotter/a184bb9d8151b500f95e2482e975c1c5e5cc0f5d/FlowPlotterD3/data/data.tsv


--------------------------------------------------------------------------------
/FlowPlotterD3/data/ms.csv:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/automayt/FlowPlotter/a184bb9d8151b500f95e2482e975c1c5e5cc0f5d/FlowPlotterD3/data/ms.csv


--------------------------------------------------------------------------------
/FlowPlotterD3/data/sensordata.csv:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/automayt/FlowPlotter/a184bb9d8151b500f95e2482e975c1c5e5cc0f5d/FlowPlotterD3/data/sensordata.csv


--------------------------------------------------------------------------------
/FlowPlotterD3/flowplotter.sh:
--------------------------------------------------------------------------------
  1 | #!/bin/bash
  2 | 
  3 | #FlowPlotter is a script that allows for the "easy" integration of SiLK results into various Google Visualization Chart APIs.
  4 | 
  5 | #GEOMAPGEOMAPGEOMAPGEOMAPGEOMAPGEOMAPGEOMAPGEOMAPGEOMAPGEOMAPGEOMAPGEOMAPGEOMAPGEOMAPGEOMAPGEOMAP
  6 | geomap () {
  7 | #Variable Creation
  8 | #independent variable is a string
  9 | #value is a string
 10 | title="$1 by $2"
 11 | independent="$1"
 12 | value="$2"
 13 | graphtitle="$independent by $value"
 14 | ######################
 15 | rwstats --top --count=275 --fields=$independent --value=$value --delimited=, |\
 16 |  grep ","| grep -v -- "--"| grep -v "a1" | grep -v "a2" | grep -v "us"| grep -v "o1" | cut -d "," -f1,2 |\
 17 |  sed "1 s/\([A-Za-z]\{1,20\}\),\([A-Za-z]\{1,20\}\)/['\1', '\2'],/g"|sed "s/\([a-z]\{2\}\),\([0-9]\{1,50\}\)/['\1', \2],/g"|sed '$s/,$//' > temp.test
 18 | 
 19 | sed '/dataplaceholder/{
 20 |     s/dataplaceholder//g
 21 |     r temp.test
 22 | }' googlechart/geomap.html
 23 | rm temp.test
 24 | }
 25 | #GEOMAPGEOMAPGEOMAPGEOMAPGEOMAPGEOMAPGEOMAPGEOMAPGEOMAPGEOMAPGEOMAPGEOMAPGEOMAPGEOMAPGEOMAPGEOMAP
 26 | 
 27 | 
 28 | #mslinechartmslinechartmslinechartmslinechartmslinechartmslinechartmslinechartmslinechartmslinechartmslinechartmslinechart
 29 | mslinechart () {
 30 | #Variable Creation
 31 | #independent variable is a string
 32 | #value is an string
 33 | title="$1 in $2 second bins per $3"
 34 | resolution="$1"
 35 | value="$2"
 36 | series="$3"
 37 | number_of_values=$(echo $(( $(grep -o ',' <<<"$value" | grep -c .) + 2)))
 38 | valuelist=$(seq $number_of_values | tr '\n' ',' | sed 's/,$//g')
 39 | 
 40 | if [ "$1" -eq "$1" ] 2>/dev/null; then
 41 |   resolution="$1"
 42 | else
 43 |   echo "The resolution you selected is invalid. Your first argument to mslinechart should be an integer value in seconds"
 44 |   exit
 45 | fi
 46 | 
 47 | graphtitle="$valuename in $resolution second bins per $series"
 48 | #awk '!/date/'
 49 | rwuniq --bin-time=$resolution --fields=$series,stime --values=$value --delimited=, | sed 's/sTime/date/' | sort -k2n > data/test.csv
 50 | cat <(grep 'date' data/test.csv) <(grep -v 'date' data/test.csv) | sed -e '1s/\(.*\)/\L\1/' > data/ms.csv
 51 | rm data/test.csv
 52 | #optionlist=$(cat data/ms.csv | awk -F, '{print $1}' | tail -n +2 | uniq | sed 's/^/<option>/g' | sed 's/$/<\\\/option>\n/g')
 53 | optionlist=$(cat data/ms.csv | awk -F, '{print $1}' | tail -n +2 | uniq -c | sort -n |  awk '$1>=2{print}' | tac | awk '{print $2}' | sed 's/^/<option>/g' | sed 's/$/<\\\/option>\n/g' )
 54 | cat templates/mslinechart.html | perl -pe "s/optionlist/$optionlist/g" | perl -pe "s/seriesselect/$series/g"
 55 | }
 56 | #mslinechartmslinechartmslinechartmslinechartmslinechartmslinechartmslinechartmslinechartmslinechartmslinechartmslinechart
 57 | 
 58 | 
 59 | #linechartlinechartlinechartlinechartlinechartlinechartlinechartlinechartlinechartlinechartlinechart
 60 | linechart () {
 61 | #Variable Creation
 62 | #independent variable is a string
 63 | #value is an string
 64 | title="$1 by $2"
 65 | resolution="$1"
 66 | value="$2"
 67 | number_of_values=$(echo $(( $(grep -o ',' <<<"$value" | grep -c .) + 2)))
 68 | valuelist=$(seq $number_of_values | tr '\n' ',' | sed 's/,$//g')
 69 | 
 70 | if [ "$1" -eq "$1" ] 2>/dev/null; then
 71 |   resolution="$1"
 72 | else
 73 |   echo "The resolution you selected is invalid. Your first argument to linechart should be an integer value in seconds"
 74 |   exit
 75 | fi
 76 | 
 77 | graphtitle="$valuename per $resolution second bins"
 78 | 
 79 | ##########################
 80 | #rwcount --bin-size=$resolution --delimited=, | cut -d "," -f1,$value|\
 81 | rwuniq --fields=stime --bin-time=$resolution --values=$value --delimited=, --no-titles --sort-output | cut -d "," -f$valuelist |\
 82 | sed "s/^\(.\{10\}T.\{8\}\)\,\(.*\)/['\1',\2],/g" | sed '$s/,$//' | sed "1 i\[stime,$value]" | sed "1 s/\[/\['/" | sed "1 s/,/','/g" | sed "1 s/\]/'\],/" > temp.test
 83 | 
 84 | 
 85 | #sed "s/\(.*\),\(.*\)/['\1', \2],/g"|sed '$s/,$//'| sed "s/, \([A-Za-z].*\)],/, '\1'],/g" > temp.test
 86 | 
 87 | sed '/dataplaceholder/{
 88 |     s/dataplaceholder//g
 89 |     r temp.test
 90 | }' googlechart/linechart.html | sed "s/titleplaceholder/${graphtitle}/g"
 91 | 
 92 | rm temp.test
 93 | }
 94 | #linechartlinechartlinechartlinechartlinechartlinechartlinechartlinechartlinechartlinechartlinechart
 95 | 
 96 | 
 97 | 
 98 | #treemaptreemaptreemaptreemaptreemaptreemaptreemaptreemaptreemaptreemaptreemaptreemaptreemaptreemap
 99 | treemap () {
100 | #Variable Creation
101 | #independent variable is a string
102 | #value is a string
103 | title="$1 by $2"
104 | independent="$1"
105 | value="$2"
106 | graphtitle="$independent by $value"
107 | #####################
108 | echo "['$independent', 'parent', '$value']," > temp.test
109 | echo "['$independent', null, 0]," >> temp.test
110 | rwstats --fields=$independent --top --count=20  --no-titles --delimited=, --value=$value |\
111 | cut -d "," -f1,2 |\
112 | grep ,| sed "s/\(.*\),\(.*\)/['\1', '$independent', \2],/g"|sed '$s/,$//'| sed "s/, \([A-Za-z].*\)],/, '\1'],/g" | grep "," >> temp.test
113 | 
114 | sed '/dataplaceholder/{
115 |     s/dataplaceholder//g
116 |     r temp.test
117 | }' googlechart/treemap.html | sed "s/titleplaceholder/${graphtitle}/g"
118 | 
119 | rm temp.test
120 | }
121 | #treemaptreemaptreemaptreemaptreemaptreemaptreemaptreemaptreemaptreemaptreemaptreemaptreemaptreemap
122 | 
123 | 
124 | #timelinetimelinetimelinetimelinetimelinetimelinetimelinetimelinetimelinetimelinetimeline
125 | timeline () {
126 | #Variable Creation
127 | #independent variable is a string
128 | #dependent variable is a string
129 | title='Suspicious Server Traffic'
130 | title="$1 by $2"
131 | independent="$1"
132 | dependent="$2"
133 | if [ -z "${independent}" ]; then
134 | independent="sip"
135 | fi
136 | if [ -z "${dependent}" ]; then
137 | dependent="dip"
138 | fi
139 | graphtitle="$independent by $dependent over time"
140 | ##############################
141 | rwsort --fields=stime | rwgroup --delta-field=stime --delta-value=2 --summarize | rwsort --fields=sip | rwcut --fields=$independent,$dependent,stime,etime --delimited=, --no-titles |\
142 | sed "s/\(.*\),\(.*\),\(.*\),\(.*\)/['\1', '\2', new Date(\3), new Date (\4)],/g"|sed '$s/,$//'| \
143 | sed "s/\([0-9]\{4\}\)\/\([0-9]\{2\}\)\/\([0-9]\{2\}\)T\([0-9]\{2\}\):\([0-9]\{2\}\):\([0-9]\{2\}\)\.[0-9]\{3\}/\1, \2, \3, \4, \5, \6/g" > temp.test
144 | 
145 | sed '/dataplaceholder/{
146 |     s/dataplaceholder//g
147 |     r temp.test
148 | }' googlechart/timeline.html | sed "s/titleplaceholder/${graphtitle}/g"
149 | 
150 | rm temp.test
151 | }
152 | #timelinetimelinetimelinetimelinetimelinetimelinetimelinetimelinetimelinetimelinetimeline
153 | 
154 | 
155 | #piechartpiechartpiechartpiechartpiechartpiechartpiechartpiechartpiechartpiechartpiechartpiechartpiechartpiechart
156 | piechart () {
157 | #Variable Creation
158 | #independent variable is a string
159 | #value is a string
160 | title="$1 by $2"
161 | independent="$1"
162 | value="$2"
163 | graphtitle="$independent by $value"
164 | #####################
165 | echo "['$independent', '$value']," > temp.test
166 | rwstats --fields=$independent --top --count=12  --no-titles --delimited=, --value=$value |\
167 | cut -d "," -f1,2 |\
168 | grep ,| sed "s/\(.*\),\(.*\)/['\1', \2],/g"|sed '$s/,$//'| sed "s/, \([A-Za-z].*\)],/, '\1'],/g" | grep "," >> temp.test
169 | 
170 | sed '/dataplaceholder/{
171 |     s/dataplaceholder//g
172 |     r temp.test
173 | }' googlechart/piechart.html | sed "s/titleplaceholder/${graphtitle}/g"
174 | 
175 | rm temp.test
176 | }
177 | #piechartpiechartpiechartpiechartpiechartpiechartpiechartpiechartpiechartpiechartpiechartpiechartpiechartpiechart
178 | 
179 | 
180 | #barchartbarchartbarchartbarchartbarchartbarchartbarchartbarchartbarchartbarchartbarchartbarchartbarchartbarchart
181 | barchart () {
182 | #Variable Creation
183 | #independent variable is a string
184 | #value is an string
185 | title="$1 by $2"
186 | independent="$1"
187 | value="$2"
188 | graphtitle="$independent by $value"
189 | #####################
190 | echo "['$independent', '$value']," > temp.test
191 | rwstats --fields=$independent --top --count=12  --no-titles --delimited=, --value=$value |\
192 | cut -d "," -f1,2 |\
193 | grep ,| sed "s/\(.*\),\(.*\)/['\1', \2],/g"|sed '$s/,$//'| sed "s/, \([A-Za-z].*\)],/, '\1'],/g" | grep "," >> temp.test
194 | 
195 | sed '/dataplaceholder/{
196 |     s/dataplaceholder//g
197 |     r temp.test
198 | }' googlechart/barchart.html | sed "s/titleplaceholder/${graphtitle}/g"
199 | 
200 | rm temp.test
201 | }
202 | #barchartbarchartbarchartbarchartbarchartbarchartbarchartbarchartbarchartbarchartbarchartbarchartbarchartbarchart
203 | 
204 | 
205 | #columnchartcolumnchartcolumnchartcolumnchartcolumnchartcolumnchartcolumnchartcolumnchartcolumnchartcolumnchartcolumnchartcolumnchartcolumnchartcolumnchart
206 | columnchart () {
207 | #Variable Creation
208 | #independent variable is a string
209 | #value is an string
210 | title="$1 by $2"
211 | independent="$1"
212 | value="$2"
213 | graphtitle="$independent by $value"
214 | #####################
215 | echo "['$independent', '$value']," > temp.test
216 | rwstats --fields=$independent --top --count=12  --no-titles --delimited=, --value=$value |\
217 | cut -d "," -f1,2 |\
218 | grep ,| sed "s/\(.*\),\(.*\)/['\1', \2],/g"|sed '$s/,$//'| sed "s/, \([A-Za-z].*\)],/, '\1'],/g" | grep "," >> temp.test
219 | 
220 | sed '/dataplaceholder/{
221 |     s/dataplaceholder//g
222 |     r temp.test
223 | }' googlechart/columnchart.html | sed "s/titleplaceholder/${graphtitle}/g"
224 | 
225 | rm temp.test
226 | }
227 | #columnchartcolumnchartcolumnchartcolumnchartcolumnchartcolumnchartcolumnchartcolumnchartcolumnchartcolumnchartcolumnchartcolumnchartcolumnchartcolumnchart
228 | 
229 | 
230 | 
231 | #tablecharttablecharttablecharttablecharttablecharttablecharttablecharttablecharttablecharttablecharttablecharttablecharttablecharttablecharttablecharttablecharttablecharttablecharttablecharttablecharttablecharttablecharttablechart
232 | tablechart () {
233 | #echo "['sTime', 'sIP', 'sPort', 'scc', 'dIP', 'dPort', 'dcc', 'protocol', 'initialFlags', 'flags', 'type', 'sensor', 'eTime']," > temp.test
234 | rwcut --fields=stime,sip,sport,scc,dip,dport,dcc,pro,initialF,flags,type,sen,etime --delimited=, --no-titles| head -1000 |\
235 |  perl -p -i -e "s/(.*?)\,(.*?)\,(.*?)\,(.*?)\,(.*?)\,(.*?)\,(.*?)\,(.*?)\,(.*?)\,(.*?)\,(.*?)\,(.*?)\,(.*?)$/['\$1', '\$2', '\$3', '\$4', '\$5', '\$6', \$7, '\$8', '\$9', '\$10', '\$11', '\$12', '\$13'],/" |\
236 |  sed 's/\-\-//g'| sed '$s/,$//' >>temp.test
237 | 
238 |  sed '/dataplaceholder/{
239 |     s/dataplaceholder//g
240 |     r temp.test
241 | }' googlechart/tablechart.html | sed "s/titleplaceholder/${graphtitle}/g"
242 | 
243 | rm temp.test
244 | }
245 | #tablecharttablecharttablecharttablecharttablecharttablecharttablecharttablecharttablecharttablecharttablecharttablecharttablecharttablecharttablecharttablecharttablecharttablecharttablecharttablecharttablecharttablecharttablechart
246 | 
247 | 
248 | 
249 | #bubblechartbubblechartbubblechartbubblechartbubblechartbubblechartbubblechartbubblechartbubblechartbubblechartbubblechartbubblechartbubblechartbubblechart
250 | bubblechart () {
251 | #Variable Creation
252 | #independent variable is a string
253 | #value is an string
254 | title="$1 by $2"
255 | independent="$1"
256 | graphtitle="Byte:Packet:Record for top 20 $independent"
257 | #####################
258 | #echo "['$independent', '$value']," > temp.test
259 | 
260 | rwstats --fields=$independent --value=bytes,records,packets --count=20 --delimited=" " | awk '{print $1,$4,$2,$1,$3}'| grep -v ":"|sed 's/ /,/g' |\
261 | sed "s/\([a-zA-Z]\{1,20\}\),\([a-zA-Z]\{1,20\}\),\([a-zA-Z]\{1,20\}\),\([a-zA-Z]\{1,20\}\),\([a-zA-Z]\{1,20\}\)/['\1', '\2', '\3', '\4', '\5'],/g" |\
262 | sed "s/\(.\{1,20\}\),\([0-9]\{1,20\}\),\([0-9]\{1,20\}\),\(.\{1,20\}\),\(.\{1,20\}\)/['\1', \2, \3, '\4', \5],/g" | sed '$s/,$//' >> temp.test
263 | 
264 | sed '/dataplaceholder/{
265 |     s/dataplaceholder//g
266 |     r temp.test
267 | }' googlechart/bubblechart.html | sed "s/titleplaceholder/${graphtitle}/g"
268 | 
269 | rm temp.test
270 | }
271 | #bubblechartbubblechartbubblechartbubblechartbubblechartbubblechartbubblechartbubblechartbubblechartbubblechartbubblechartbubblechartbubblechartbubblechart
272 | 
273 | 
274 | 
275 | #forceopacityforceopacityforceopacityforceopacityforceopacityforceopacityforceopacityforceopacityforceopacityforceopacityforceopacityforceopacityforceopacityforceopacity
276 | forceopacity () {
277 | #Variable Creation
278 | #source variable is a string
279 | #target variable is a string
280 | #value is an string
281 | title="$1 by $2"
282 | source="$1"
283 | if [ -z "$source" ]; then
284 | source="sip"
285 | echo "No source variable provided. Defaulting to sip"
286 | fi
287 | target="$2"
288 | if [ -z "$target" ]; then
289 | target="dip"
290 | echo "No target variable provided. Defaulting to dip"
291 | fi
292 | value="$3"
293 | if [ -z "$value" ]; then
294 | value="bytes"
295 | echo "No value variable provided. Defaulting to bytes"
296 | fi
297 | count="$4"
298 | if [ -z "$count" ]; then
299 | count="50"
300 | echo "No count variable provided. Defaulting to 50"
301 | fi
302 | graphtitle="source-target-value"
303 | #####################
304 | rwstats --top --count=$count --fields=$source,$target --value=$value --delimited=, --no-titles | cut -d ',' -f1,2,3 | sed '1 s/^/source,target,value\n/' >> temp.test
305 | 
306 | sed '/dataplaceholder/{
307 |     s/dataplaceholder//g
308 |     r temp.test
309 | }' d3chart/forceopacity.html | sed "s/titleplaceholder/${graphtitle}/g"
310 | 
311 | rm temp.test
312 | }
313 | #forceopacityforceopacityforceopacityforceopacityforceopacityforceopacityforceopacityforceopacityforceopacityforceopacityforceopacityforceopacityforceopacityforceopacity
314 | 
315 | 
316 | 
317 | #assetdiscoveryassetdiscoveryassetdiscoveryassetdiscoveryassetdiscoveryassetdiscoveryassetdiscoveryassetdiscoveryassetdiscoveryassetdiscoveryassetdiscoveryassetdiscoveryassetdiscoveryassetdiscovery
318 | assetdiscovery () {
319 | #Variable Creation
320 | #value is a string
321 | 
322 | rwfilter stdin --proto=0- --pass=stdout > test.rw
323 | 
324 | scripts/./AssetDiscoveryTree.sh test.rw $1
325 | rm test.rw
326 | }
327 | #assetdiscoveryassetdiscoveryassetdiscoveryassetdiscoveryassetdiscoveryassetdiscoveryassetdiscoveryassetdiscoveryassetdiscoveryassetdiscoveryassetdiscoveryassetdiscoveryassetdiscoveryassetdiscovery
328 | 
329 | #Function Initiation
330 | 
331 | if [ "$1" == "-h" ]; then
332 |   cat README.md
333 |   echo -e "\n"
334 |   exit 0
335 | fi
336 | 
337 | if [ "$1" != "geomap" -a "$1" != "mslinechart" -a "$1" != "linechart"  -a "$1" != "treemap"  -a "$1" != "timeline"  -a "$1" != "piechart"  -a "$1" != "barchart"  -a "$1" != "columnchart" -a "$1" != "bubblechart" -a "$1" != "forceopacity" -a "$1" != "assetdiscovery" ]; then
338 | echo ""
339 | echo "ERROR: You must specify a supported chart type. "
340 | echo ""
341 | echo "The only supported chart types for flowplotter are:"
342 | echo "./flowplotter.sh geomap [field] [value]"
343 | echo "./flowplotter.sh linechart [bin size in seconds] [value]"
344 | echo "./flowplotter.sh treemap [field] [value]"
345 | echo "./flowplotter.sh timeline [field] [field]"
346 | echo "./flowplotter.sh piechart [field] [value]"
347 | echo "./flowplotter.sh barchart [field] [value]"
348 | echo "./flowplotter.sh columnchart [field] [value]"
349 | echo "./flowplotter.sh bubblechart [value]"
350 | echo "./flowplotter.sh forceopacity [field] [field] [value]"
351 | echo "./flowplotter.sh assetdiscovery [threshold]"
352 | echo ""
353 | echo "flowplotter --help"
354 | echo "./flowplotter -h"
355 | echo ""
356 | exit 0
357 | fi
358 | 
359 | if [ "$1" = "geomap" ]; then
360 | geomap $2 $3
361 | fi
362 | if [ "$1" = "linechart" ]; then
363 | linechart $2 $3
364 | fi
365 | if [ "$1" = "treemap" ]; then
366 | treemap $2 $3
367 | fi
368 | if [ "$1" = "timeline" ]; then
369 | timeline $2 $3
370 | fi
371 | if [ "$1" = "piechart" ]; then
372 | piechart $2 $3
373 | fi
374 | if [ "$1" = "barchart" ]; then
375 | barchart $2 $3
376 | fi
377 | if [ "$1" = "columnchart" ]; then
378 | columnchart $2 $3
379 | fi
380 | if [ "$1" = "bubblechart" ]; then
381 | bubblechart $2
382 | fi
383 | if [ "$1" = "forceopacity" ]; then
384 | forceopacity $2 $3 $4 $5
385 | fi
386 | if [ "$1" = "assetdiscovery" ]; then
387 | assetdiscovery $2
388 | fi
389 | if [ "$1" = "mslinechart" ]; then
390 | mslinechart $2 $3 $4
391 | fi
392 | #if [ "$1" = "tablechart" ]; then
393 | #tablechart $2
394 | #fi
395 | 


--------------------------------------------------------------------------------
/FlowPlotterD3/mslinechart.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <!DOCTYPE html>
  3 | <meta charset="utf-8">
  4 | <body>
  5 | <link href="/templates/stylesheet.css" rel="stylesheet" type="text/css">
  6 | <script src="http://d3js.org/d3.v3.min.js"></script>
  7 | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" charset="utf-8"></script>
  8 | <script type="text/javascript" src="templates/jquery.tipsy.js"></script>    
  9 | <div id="container">
 10 |       <p id="headline" class="hed">dport status</p>
 11 | <!--      <p class="dek">dek</p>
 12 |     <p class="dek">dek </p> -->	
 13 |     </div>  
 14 |     
 15 | <p id="menu" class="menuchoice">Select dport: <select>
 16 | 
 17 |     </select>
 18 |             
 19 | <div id="graphic"> </div>
 20 | 
 21 |     
 22 | <script>
 23 | 
 24 | //set the margins
 25 | var margin = {top: 50, right: 160, bottom: 80, left: 50},
 26 |     width = 1600 - margin.left - margin.right,
 27 |     height = 800  - margin.top - margin.bottom;
 28 | 
 29 | //set dek and head to be as wide as SVG
 30 | d3.select('#dek')
 31 | 	.style('width', width+'px');
 32 | d3.select('#headline')
 33 | 	.style('width',width+'px');
 34 | 
 35 | //write out your source text here
 36 | //var sourcetext= "Source: rwfilter --start-date=2016/08/01 --end-date=2016/08/30 --type=all --protocol=0-255 --pass=stdout";
 37 | 
 38 | // set the type of number here, n is a number with a comma, .2% will get you a percent, .2f will get you 2 decimal points
 39 | var NumbType = d3.format(".2f");
 40 | 
 41 | // color array
 42 | var color = d3.scale.category20b();
 43 | var colorScale = color.range();
 44 | //color function pulls from array of colors stored in color.js
 45 | var color = d3.scale.ordinal().range(colorScale);
 46 | 
 47 | //define the approx. number of x scale ticks
 48 | var xscaleticks = 20;
 49 | 
 50 | //defines a function to be used to append the title to the tooltip.  you can set how you want it to display here.
 51 | var maketip = function (d) {			               
 52 | 			   var tip = '<p class="tip3">' + d.name + '<p class="tip1">' + NumbType(d.value) + '</p> <p class="tip3">'+  formatDate(d.date)+'</p>';
 53 |       		   return tip;}
 54 |       		   
 55 | //define your year format here, first for the x scale, then if the date is displayed in tooltips
 56 | var parseDate = d3.time.format("%Y/%m/%dT%H:%M:%S").parse;
 57 | var formatDate = d3.time.format("%Y/%m/%dT%H:%M:%S");
 58 | 
 59 | //create an SVG
 60 | var svg = d3.select("#graphic").append("svg")
 61 |     .attr("width", width + margin.left + margin.right)
 62 |     .attr("height", height + margin.top + margin.bottom)
 63 |     .append("g")
 64 |     .attr("transform", "translate(" + margin.left + "," + margin.top + ")");  
 65 |         
 66 | //make a rectangle so there is something to click on
 67 | svg.append("svg:rect")
 68 |     .attr("width", width)
 69 |     .attr("height", height)
 70 |     .attr("class", "plot");
 71 | 
 72 |  //make a clip path for the graph  
 73 |  var clip = svg.append("svg:clipPath")
 74 |     .attr("id", "clip")
 75 |     .append("svg:rect")
 76 |     .attr("x", 0)
 77 |     .attr("y", 0)
 78 |     .attr("width", width)
 79 |     .attr("height", height);   
 80 |     
 81 | // force data to update when menu is changed    
 82 | var menu = d3.select("#menu select")
 83 |     .on("change", change);    
 84 | 			    
 85 | //suck in the data, store it in a value called formatted, run the redraw function
 86 | d3.csv("/data/ms.csv", function(data) {
 87 | 									formatted = data;
 88 | 							        redraw();
 89 |     							  });
 90 | 
 91 | d3.select(window)
 92 |     .on("keydown", function() { altKey = d3.event.altKey; })
 93 |     .on("keyup", function() { altKey = false; });
 94 | var altKey;
 95 | 
 96 | // set terms of transition that will take place
 97 | // when a new economic indicator is chosen   
 98 | function change() {
 99 |   d3.transition()
100 |       .duration(altKey ? 7500 : 1500)
101 |       .each(redraw);
102 | }
103 | 
104 | // all the meat goes in the redraw function
105 | function redraw() { 
106 | 
107 | 	// create data nests based on economic indicator (series)
108 |     var nested = d3.nest()
109 | 		.key(function(d) { return d.dport; })
110 | 		.map(formatted)
111 |     
112 |     // get value from menu selection
113 |     // the option values are set in HTML and correspond
114 |     //to the [dport] value we used to nest the data  
115 |     var series = menu.property("value");
116 |     
117 |     // only retrieve data from the selected series, using the nest we just created
118 |     var data = nested[series];
119 |     
120 |     // for object constancy we will need to set "keys", one for each type of data (column name) exclude all others.
121 | 	color.domain(d3.keys(data[0]).filter(function(key) { return (key !== "date" && key !== "dport"); }));
122 | 
123 | 	var linedata = color.domain().map(function(name) {
124 |     				return {name: name,
125 | 					        values: data.map(function(d) {
126 | 							return {name:name, date: parseDate(d.date), value: parseFloat(d[name],10)};
127 |       						})
128 |     				};
129 |   	});
130 | 
131 | 	
132 | 	//make an empty variable to stash the last values into so i can sort the legend
133 | 	var lastvalues=[];
134 | 
135 | 	//setup the x and y scales
136 | 	var x = d3.time.scale()
137 | 		.domain([
138 | 	    d3.min(linedata, function(c) { return d3.min(c.values, function(v) { return v.date; }); }),
139 | 	    d3.max(linedata, function(c) { return d3.max(c.values, function(v) { return v.date; }); })
140 | 		])
141 | 		.range([0, width]);
142 | 
143 | 	var y = d3.scale.log()
144 | 	    .domain([
145 | 	    d3.min(linedata, function(c) { return d3.min(c.values, function(v) { return v.value; }); }),
146 | 	    d3.max(linedata, function(c) { return d3.max(c.values, function(v) { return v.value; }); })
147 | 	    ])
148 | 	    .range([height, 0]);
149 | 
150 | 	//will draw the line		
151 | 	var line = d3.svg.line()
152 | 	// Uncomment this to have smooth lines. Beware that actually value will be skewed in its location.
153 | 	//.interpolate("basis")   
154 |     	.x(function(d) { return x(d.date); })
155 | 	    .y(function(d) { return y(d.value); });
156 | 
157 | 	//define the zoom
158 | 	var zoom = d3.behavior.zoom()
159 |     	.x(x)
160 | 	    .y(y)
161 | 	    .scaleExtent([1,8])
162 |     	.on("zoom", zoomed);
163 | 
164 | 	//call the zoom on the SVG
165 |     svg.call(zoom);
166 | 
167 | 	//create and draw the x axis
168 | 	var xAxis = d3.svg.axis()
169 |     	.scale(x)
170 | 	    .orient("bottom")
171 |     	.tickPadding(8)
172 | 	    .ticks(xscaleticks);
173 |     
174 |     svg.append("svg:g")
175 | 	    .attr("class", "x axis");
176 | 
177 | 	//create and draw the y axis                  
178 | 	var yAxis = d3.svg.axis()
179 |     	.scale(y)
180 | 	    .orient("left")
181 | 	//remove Y ticks if it seems ugly
182 | 	.tickSize(0-width)
183 | 	    .tickPadding(8);
184 |     
185 |     svg.append("svg:g")
186 |     	.attr("class", "y axis");
187 | 
188 | 	//bind the data
189 | 	var thegraph = svg.selectAll(".thegraph")
190 |     	.data(linedata)
191 |  
192 | 	//append a g tag for each line and set of tooltip circles and give it a unique ID based on the column name of the data     
193 | 	var thegraphEnter=thegraph.enter().append("g")
194 |   		.attr("clip-path", "url(#clip)")
195 | 	    .attr("class", "thegraph")
196 |       	.attr('id',function(d){ return d.name+"-line"; })
197 | 	  	.style("stroke-width",1.5)
198 | 	  	.on("mouseover", function (d) {                                  
199 |       		d3.select(this)                          //on mouseover of each line, give it a nice thick stroke
200 |         	.style("stroke-width",'2px');
201 |         	
202 |         	var selectthegraphs = $('.thegraph').not(this);     //select all the rest of the lines, except the one you are hovering on and drop their opacity
203 |         	d3.selectAll(selectthegraphs)
204 |         		.style("opacity",0.2);
205 |         	
206 |         	var getname = document.getElementById(d.name);    //use get element cause the ID names have spaces in them
207 |         	var selectlegend = $('.legend').not(getname);    //grab all the legend items that match the line you are on, except the one you are hovering on
208 | 
209 |         	d3.selectAll(selectlegend)    // drop opacity on other legend names
210 |         		.style("opacity",.2);
211 | 
212 |         	d3.select(getname)
213 |         		.attr("class", "legend-select");  //change the class on the legend name that corresponds to hovered line to be bolder        	
214 |     	})
215 |     	.on("mouseout",	function(d) {        //undo everything on the mouseout
216 |       		d3.select(this)
217 |         		.style("stroke-width",'2.5px');
218 |         	
219 |         	var selectthegraphs = $('.thegraph').not(this);
220 |         	d3.selectAll(selectthegraphs)
221 |         		.style("opacity",1);
222 |         	
223 |         	var getname = document.getElementById(d.name);
224 |         	var getname2= $('.legend[fakeclass="fakelegend"]')
225 |         	var selectlegend = $('.legend').not(getname2).not(getname);
226 | 
227 |         	d3.selectAll(selectlegend)
228 |         		.style("opacity",1);
229 |         	
230 |         	d3.select(getname)
231 |         		.attr("class", "legend");        	
232 |     	});
233 | 
234 | 	//actually append the line to the graph
235 | 	thegraphEnter.append("path")
236 |     	.attr("class", "line")
237 |       	.style("stroke", function(d) { return color(d.name); })
238 |       	.attr("d", function(d) { return line(d.values[0]); })
239 |       	.transition()
240 |       	.duration(2000)
241 |       	.attrTween('d',function (d){
242 | 			var interpolate = d3.scale.quantile()
243 | 				.domain([0,1])
244 | 				.range(d3.range(1, d.values.length+1));
245 | 			return function(t){
246 | 				return line(d.values.slice(0, interpolate(t)));
247 | 			};
248 | 		});
249 |   
250 | 	//then append some 'nearly' invisible circles at each data point  
251 | 	thegraph.selectAll("circle")
252 | 		.data( function(d) {return(d.values);} )
253 | 		.enter()
254 | 		.append("circle")
255 | 			.attr("class","tipcircle")
256 | 			.attr("cx", function(d,i){return x(d.date)})
257 | 			.attr("cy",function(d,i){return y(d.value)})
258 | 			.attr("r",12)
259 | 			.style('opacity', 1e-6)//1e-6
260 | 			.attr ("title", maketip);
261 | 
262 | 	//append the legend
263 |     var legend = svg.selectAll('.legend')
264 |         .data(linedata);
265 |     
266 |     var legendEnter=legend
267 |         .enter()
268 |         .append('g')
269 |         .attr('class', 'legend')
270 |         .attr('id',function(d){ return d.name; })
271 |         .on('click', function (d) {                           //onclick function to toggle off the lines        	
272 |         	if($(this).css("opacity") == 1){				  //uses the opacity of the item clicked on to determine whether to turn the line on or off        	
273 | 
274 | 	        	var elemented = document.getElementById(this.id +"-line");   //grab the line that has the same ID as this point along w/ "-line"  use get element cause ID has spaces
275 | 	        	d3.select(elemented)
276 | 	        		.transition()
277 | 	        		.duration(1000)
278 | 	        		.style("opacity",0)
279 | 	       			.style("display",'none');
280 |         	
281 | 	        	d3.select(this)
282 | 	        		.attr('fakeclass', 'fakelegend')
283 | 	     			.transition()
284 | 	        		.duration(1000)
285 | 	      			.style ("opacity", .2);
286 |       		} else {
287 |       		
288 | 	      		var elemented = document.getElementById(this.id +"-line");
289 | 	        	d3.select(elemented)
290 | 		        	.style("display", "block")
291 | 		        	.transition()
292 | 	    	    	.duration(1000)
293 | 	        		.style("opacity",1);
294 |         	
295 | 	        	d3.select(this)
296 | 	        		.attr('fakeclass','legend')
297 | 	      			.transition()
298 | 	        		.duration(1000)
299 | 	      			.style ("opacity", 1);}
300 | 		});
301 | 
302 | 	//create a scale to pass the legend items through
303 | 	var legendscale= d3.scale.ordinal()
304 | 				.domain(lastvalues)
305 | 				.range([0,30,60,90,120,150,180,210]);
306 | 
307 | 	//actually add the circles to the created legend container
308 |     legendEnter.append('circle')
309 |         .attr('cx', width +20)
310 |         .attr('cy', function(d){return legendscale(d.values[d.values.length-1].value);})
311 |         .attr('r', 7)
312 |         .style('fill', function(d) { 
313 |           	return color(d.name);
314 |         });
315 |         	        	
316 | 	//add the legend text
317 |     legendEnter.append('text')
318 |         .attr('x', width+35)
319 |         .attr('y', function(d){return legendscale(d.values[d.values.length-1].value);})
320 |         .text(function(d){ return d.name; });
321 | 
322 |  	// set variable for updating visualization
323 |     var thegraphUpdate = d3.transition(thegraph);
324 |     
325 |     // change values of path and then the circles to those of the new series
326 |     thegraphUpdate.select("path")
327 |     	.attr("d", function(d, i) {       
328 |       
329 |       		//must be a better place to put this, but this works for now
330 |       		lastvalues[i]=d.values[d.values.length-1].value;         
331 |         	lastvalues.sort(function (a,b){return b-a});
332 |       		legendscale.domain(lastvalues);
333 |       	
334 |       		return line(d.values); });
335 |       
336 |     thegraphUpdate.selectAll("circle")
337 | 	  	.attr ("title", maketip)
338 | 	  	.attr("cy",function(d,i){return y(d.value)})
339 | 	  	.attr("cx", function(d,i){return x(d.date)});
340 | 
341 | 
342 | 	  // and now for legend items
343 | 	  var legendUpdate=d3.transition(legend);
344 | 	  
345 | 	legendUpdate.select("circle")
346 | 		.attr('cy', function(d, i){  
347 | 			return legendscale(d.values[d.values.length-1].value);});
348 | 
349 | 	legendUpdate.select("text")
350 | 		.attr('y',  function (d) {return legendscale(d.values[d.values.length-1].value);});
351 | 
352 | 
353 |  	 // update the axes,   
354 |     d3.transition(svg).select(".y.axis")
355 |     	.call(yAxis);   
356 |           
357 |     d3.transition(svg).select(".x.axis")
358 |     	.attr("transform", "translate(0," + height + ")")
359 |         .call(xAxis);
360 | 
361 | 	//make my tooltips work
362 | 	$('circle').tipsy({opacity:.9, gravity:'n', html:true});
363 | 
364 | 
365 | 	//define the zoom function
366 | 	function zoomed() {
367 |  
368 |     	svg.select(".x.axis").call(xAxis);
369 |     	svg.select(".y.axis").call(yAxis);
370 | 
371 | 		svg.selectAll(".tipcircle")
372 | 			.attr("cx", function(d,i){return x(d.date)})
373 | 			.attr("cy",function(d,i){return y(d.value)});
374 | 			
375 | 		svg.selectAll(".line")
376 |     		.attr("class","line")
377 |         	.attr("d", function (d) { return line(d.values)});
378 | 	}
379 | 
380 | //end of the redraw function
381 | }
382 | 
383 | svg.append("svg:text")
384 | .attr("text-anchor", "start")
385 | 	.attr ("x", 0-margin.left)
386 | 	.attr("y", height+margin.bottom-10)
387 | 	//.text (sourcetext)
388 | 	.attr ("class","source"); 	
389 | 
390 | 
391 | 
392 | </script>
393 | </body>
394 | 
395 | 


--------------------------------------------------------------------------------
/FlowPlotterD3/notes:
--------------------------------------------------------------------------------
1 | seriesselect is for the "select sensor" or whatever it might be
2 | titleselect is for the title of the page
3 | optionlist is for the list of items in the series
4 | 
5 | 


--------------------------------------------------------------------------------
/FlowPlotterD3/output.file:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/automayt/FlowPlotter/a184bb9d8151b500f95e2482e975c1c5e5cc0f5d/FlowPlotterD3/output.file


--------------------------------------------------------------------------------
/FlowPlotterD3/templates/jquery.tipsy.js:
--------------------------------------------------------------------------------
  1 | // tipsy, facebook style tooltips for jquery
  2 | // version 1.0.0a
  3 | // (c) 2008-2010 jason frame [jason@onehackoranother.com]
  4 | // released under the MIT license
  5 | 
  6 | (function($) {
  7 |     
  8 |     function maybeCall(thing, ctx) {
  9 |         return (typeof thing == 'function') ? (thing.call(ctx)) : thing;
 10 |     }
 11 | 
 12 |     // CAUTION the current implementation does not allow for tipsied elements to stay out of DOM (in between events)
 13 |     // i.e. don't remove, store, then re-insert tipsied elements (and why would you want to do that anyway?)
 14 |     var garbageCollect = (function() {
 15 |         var currentInterval;
 16 |         var to = null;
 17 |         var tipsies = [];
 18 | 
 19 |         function _do() {
 20 |             for (var i = 0; i < tipsies.length;) {
 21 |                 var t = tipsies[i];
 22 |                 // FIXME? the 2nd (non-paranoid) check is from the link below, it should be replaced if a better way is found
 23 |                 // http://stackoverflow.com/questions/4040715/check-if-cached-jquery-object-is-still-in-dom
 24 |                 if (t.options.gcInterval === 0 || t.$element.closest('body').length === 0) {
 25 |                     t.hoverState = 'out';
 26 |                     t.hide();
 27 |                     tipsies.splice(i,1);
 28 |                 } else {
 29 |                     i++;
 30 |                 }
 31 |             }
 32 |         }
 33 |         function _loop() {
 34 |             to = setTimeout(function() { _do(); _loop(); }, currentInterval);
 35 |         }
 36 | 
 37 |         return function(t) {
 38 |             if (t.options.gcInterval === 0) return;
 39 | 
 40 |             if (to && t.options.gcInterval < currentInterval) {
 41 |                 clearTimeout(to); to = null;
 42 |                 currentInterval = t.options.gcInterval;
 43 |             }
 44 |             tipsies.push(t);
 45 |             if (!to) _loop();
 46 |         };
 47 |     })();
 48 | 
 49 |     function Tipsy(element, options) {
 50 |         this.$element = $(element);
 51 |         this.options = options;
 52 |         this.enabled = true;
 53 |         this.fixTitle();
 54 |         garbageCollect(this);
 55 |     }
 56 | 
 57 |     
 58 |     Tipsy.prototype = {
 59 |         show: function() {
 60 |             var title = this.getTitle();
 61 |             if (title && this.enabled) {
 62 |                 var $tip = this.tip();
 63 |                 
 64 |                 $tip.find('.tipsy-inner')[this.options.html ? 'html' : 'text'](title);
 65 |                 $tip[0].className = 'tipsy'; // reset classname in case of dynamic gravity
 66 |                 $tip.remove().css({top: 0, left: 0, visibility: 'hidden', display: 'block'}).prependTo(document.body);
 67 |                 
 68 |                 var pos = $.extend({}, this.$element.offset(), {
 69 |                     width: this.$element[0].offsetWidth || 0,
 70 |                     height: this.$element[0].offsetHeight || 0
 71 |                 });
 72 | 
 73 |                 if (typeof this.$element[0].nearestViewportElement == 'object') {
 74 |                     // SVG
 75 |   				var el = this.$element[0];
 76 |                     var rect = el.getBoundingClientRect();
 77 | 					pos.width = rect.width;
 78 | 					pos.height = rect.height;
 79 |                 }
 80 | 
 81 |                 
 82 |                 var actualWidth = $tip[0].offsetWidth,
 83 |                     actualHeight = $tip[0].offsetHeight,
 84 |                     gravity = maybeCall(this.options.gravity, this.$element[0]);
 85 |                 
 86 |                 var tp;
 87 |                 switch (gravity.charAt(0)) {
 88 |                     case 'n':
 89 |                         tp = {top: pos.top + pos.height + this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2};
 90 |                         break;
 91 |                     case 's':
 92 |                         tp = {top: pos.top - actualHeight - this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2};
 93 |                         break;
 94 |                     case 'e':
 95 |                         tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth - this.options.offset};
 96 |                         break;
 97 |                     case 'w':
 98 |                         tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width + this.options.offset};
 99 |                         break;
100 |                 }
101 |                 
102 |                 if (gravity.length == 2) {
103 |                     if (gravity.charAt(1) == 'w') {
104 |                         tp.left = pos.left + pos.width / 2 - 15;
105 |                     } else {
106 |                         tp.left = pos.left + pos.width / 2 - actualWidth + 15;
107 |                     }
108 |                 }
109 |                 
110 |                 $tip.css(tp).addClass('tipsy-' + gravity);
111 |                 $tip.find('.tipsy-arrow')[0].className = 'tipsy-arrow tipsy-arrow-' + gravity.charAt(0);
112 |                 if (this.options.className) {
113 |                     $tip.addClass(maybeCall(this.options.className, this.$element[0]));
114 |                 }
115 |                 
116 |                 if (this.options.fade) {
117 |                     $tip.stop().css({opacity: 0, display: 'block', visibility: 'visible'}).animate({opacity: this.options.opacity});
118 |                 } else {
119 |                     $tip.css({visibility: 'visible', opacity: this.options.opacity});
120 |                 }
121 | 
122 |                 var t = this;
123 |                 var set_hovered  = function(set_hover){
124 |                     return function(){
125 |                         t.$tip.stop();
126 |                         t.tipHovered = set_hover;
127 |                         if (!set_hover){
128 |                             if (t.options.delayOut === 0 && t.options.trigger != 'manual') {
129 |                                 t.hide();
130 |                             } else {
131 |                                 setTimeout(function() { 
132 |                                     if (t.hoverState == 'out') t.hide(); }, t.options.delayOut);
133 |                             }
134 |                         }
135 |                     };
136 |                 };
137 |                $tip.hover(set_hovered(true), set_hovered(false));
138 |             }
139 |         },
140 |         
141 |         hide: function() {
142 |             if (this.options.fade) {
143 |                 this.tip().stop().fadeOut(function() { $(this).remove(); });
144 |             } else {
145 |                 this.tip().remove();
146 |             }
147 |         },
148 |         
149 |         fixTitle: function() {
150 |             var $e = this.$element;
151 |             
152 |             if ($e.attr('title') || typeof($e.attr('original-title')) != 'string') {
153 |                 $e.attr('original-title', $e.attr('title') || '').removeAttr('title');
154 |             }
155 |             if (typeof $e.context.nearestViewportElement == 'object'){                                                        
156 |                 if ($e.children('title').length){
157 |                     $e.append('<original-title>' + ($e.children('title').text() || '') + '</original-title>')
158 |                         .children('title').remove();
159 |                 }
160 |             }
161 |         },
162 |         
163 |         getTitle: function() {
164 |             
165 |             var title, $e = this.$element, o = this.options;
166 |             this.fixTitle();
167 | 
168 |             if (typeof o.title == 'string') {
169 |                 var title_name = o.title == 'title' ? 'original-title' : o.title;
170 |                 if ($e.children(title_name).length){
171 |                     title = $e.children(title_name).html();
172 |                 } else{
173 |                     title = $e.attr(title_name);
174 |                     if (typeof title == 'undefined') title = ''
175 |                 }
176 |                 
177 |             } else if (typeof o.title == 'function') {
178 |                 title = o.title.call($e[0]);
179 |             }
180 |             title = ('' + title).replace(/(^\s*|\s*$)/, "");
181 |             return title || o.fallback;
182 |         },
183 |         
184 |         tip: function() {
185 |             if (!this.$tip) {
186 |                 this.$tip = $('<div class="tipsy"></div>').html('<div class="tipsy-arrow"></div><div class="tipsy-inner"></div>');
187 |             }
188 |             return this.$tip;
189 |         },
190 |         
191 |         validate: function() {
192 |             if (!this.$element[0].parentNode) {
193 |                 this.hide();
194 |                 this.$element = null;
195 |                 this.options = null;
196 |             }
197 |         },
198 |         
199 |         enable: function() { this.enabled = true; },
200 |         disable: function() { this.enabled = false; },
201 |         toggleEnabled: function() { this.enabled = !this.enabled; }
202 |     };
203 |     
204 |     $.fn.tipsy = function(options) {
205 |         
206 |         if (options === true) {
207 |             return this.data('tipsy');
208 |         } else if (typeof options == 'string') {
209 |             $(this).each(function(i,el){
210 |               if ($(el).data('tipsy')) {
211 |                   tipsy = $(el).data('tipsy')
212 |                   tipsy[options]();
213 |               }
214 |             });
215 |             return this;
216 |         }
217 |         
218 |         options = $.extend({}, $.fn.tipsy.defaults, options);
219 | 
220 |         if (options.hoverlock && options.delayOut === 0) {
221 |             options.delayOut = 100;
222 |         }
223 |         
224 |         function get(ele) {
225 |             var tipsy = $.data(ele, 'tipsy');
226 |             if (!tipsy) {
227 |                 tipsy = new Tipsy(ele, $.fn.tipsy.elementOptions(ele, options));
228 |                 $.data(ele, 'tipsy', tipsy);
229 |             }
230 |             return tipsy;
231 |         }
232 |         
233 |         function enter() {
234 |             var tipsy = get(this);
235 |             tipsy.hoverState = 'in';
236 |             if (options.delayIn === 0) {
237 |                 tipsy.show();
238 |             } else {
239 |                 tipsy.fixTitle();
240 |                 setTimeout(function() { if (tipsy.hoverState == 'in') tipsy.show(); }, options.delayIn);
241 |             }
242 |         }
243 |         
244 |         function leave() {
245 |             var tipsy = get(this);
246 |             tipsy.hoverState = 'out';
247 |             if (options.delayOut === 0) {
248 |                 tipsy.hide();
249 |             } else {
250 |                 var to = function() {
251 |                     if (!tipsy.tipHovered || !options.hoverlock){
252 |                         if (tipsy.hoverState == 'out') tipsy.hide(); 
253 |                     }
254 |                 };
255 |                 setTimeout(to, options.delayOut);
256 |             }    
257 |         }
258 |         
259 |         if (!options.live) this.each(function() { get(this); });
260 |         
261 |         if (options.trigger != 'manual') {
262 |             var binder = options.live ? 'live' : 'bind',
263 |                 eventIn = options.trigger == 'hover' ? 'mouseenter' : 'focus',
264 |                 eventOut = options.trigger == 'hover' ? 'mouseleave' : 'blur';
265 |             this[binder](eventIn, enter)[binder](eventOut, leave);
266 |         }
267 |         
268 |         return this;
269 |         
270 |     };
271 |     
272 |     $.fn.tipsy.defaults = {
273 |         className: null,
274 |         delayIn: 0,
275 |         delayOut: 0,
276 |         fade: false,
277 |         fallback: '',
278 |         gcInterval: 0,
279 |         gravity: 'n',
280 |         html: false,
281 |         live: false,
282 |         offset: 0,
283 |         opacity: 0.8,
284 |         title: 'title',
285 |         trigger: 'hover',
286 |         hoverlock: false
287 |     };
288 |     
289 |     // Overwrite this method to provide options on a per-element basis.
290 |     // For example, you could store the gravity in a 'tipsy-gravity' attribute:
291 |     // return $.extend({}, options, {gravity: $(ele).attr('tipsy-gravity') || 'n' });
292 |     // (remember - do not modify 'options' in place!)
293 |     $.fn.tipsy.elementOptions = function(ele, options) {
294 |         return $.metadata ? $.extend({}, options, $(ele).metadata()) : options;
295 |     };
296 |     
297 |     $.fn.tipsy.autoNS = function() {
298 |         return $(this).offset().top > ($(document).scrollTop() + $(window).height() / 2) ? 's' : 'n';
299 |     };
300 |     
301 |     $.fn.tipsy.autoWE = function() {
302 |         return $(this).offset().left > ($(document).scrollLeft() + $(window).width() / 2) ? 'e' : 'w';
303 |     };
304 |     
305 |     /**
306 |      * yields a closure of the supplied parameters, producing a function that takes
307 |      * no arguments and is suitable for use as an autogravity function like so:
308 |      *
309 |      * @param margin (int) - distance from the viewable region edge that an
310 |      *        element should be before setting its tooltip's gravity to be away
311 |      *        from that edge.
312 |      * @param prefer (string, e.g. 'n', 'sw', 'w') - the direction to prefer
313 |      *        if there are no viewable region edges effecting the tooltip's
314 |      *        gravity. It will try to vary from this minimally, for example,
315 |      *        if 'sw' is preferred and an element is near the right viewable 
316 |      *        region edge, but not the top edge, it will set the gravity for
317 |      *        that element's tooltip to be 'se', preserving the southern
318 |      *        component.
319 |      */
320 |      $.fn.tipsy.autoBounds = function(margin, prefer) {
321 | 		return function() {
322 | 			var dir = {ns: prefer[0], ew: (prefer.length > 1 ? prefer[1] : false)},
323 |                 boundTop = $(document).scrollTop() + margin,
324 |                 boundLeft = $(document).scrollLeft() + margin,
325 |                 $this = $(this);
326 | 
327 | 			if ($this.offset().top < boundTop) dir.ns = 'n';
328 | 			if ($this.offset().left < boundLeft) dir.ew = 'w';
329 | 			if ($(window).width() + $(document).scrollLeft() - $this.offset().left < margin) dir.ew = 'e';
330 | 			if ($(window).height() + $(document).scrollTop() - $this.offset().top < margin) dir.ns = 's';
331 | 
332 | 			return dir.ns + (dir.ew ? dir.ew : '');
333 | 		};
334 |     };
335 | })(jQuery);
336 | 


--------------------------------------------------------------------------------
/FlowPlotterD3/templates/linechart.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <!DOCTYPE html>
  3 | <meta charset="utf-8">
  4 | <body>
  5 | <link href="/templates/stylesheet.css" rel="stylesheet" type="text/css">
  6 | <script src="http://d3js.org/d3.v3.min.js"></script>
  7 | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" charset="utf-8"></script>
  8 | <script type="text/javascript" src="templates/jquery.tipsy.js"></script>    
  9 | <div id="container">
 10 |       <p id="headline" class="hed">Sensor Status</p>
 11 | <!--      <p class="dek">dek</p>
 12 |     <p class="dek">dek </p> -->	
 13 |     </div>  
 14 |     
 15 | <p id="menu" class="menuchoice">Select sensor: <select>
 16 |     <option>Wifi</option>
 17 |     </select>
 18 |             
 19 | <div id="graphic"> </div>
 20 | 
 21 |     
 22 | <script>
 23 | 
 24 | //set the margins
 25 | var margin = {top: 50, right: 160, bottom: 80, left: 50},
 26 |     width = 1600 - margin.left - margin.right,
 27 |     height = 800  - margin.top - margin.bottom;
 28 | 
 29 | //set dek and head to be as wide as SVG
 30 | d3.select('#dek')
 31 | 	.style('width', width+'px');
 32 | d3.select('#headline')
 33 | 	.style('width',width+'px');
 34 | 
 35 | //write out your source text here
 36 | var sourcetext= "Source: rwfilter --start-date=2016/08/01 --end-date=2016/08/30 --type=all --protocol=0-255 --pass=stdout";
 37 | 
 38 | // set the type of number here, n is a number with a comma, .2% will get you a percent, .2f will get you 2 decimal points
 39 | var NumbType = d3.format(".2f");
 40 | 
 41 | // color array
 42 | var color = d3.scale.category20b();
 43 | var colorScale = color.range();
 44 | //color function pulls from array of colors stored in color.js
 45 | var color = d3.scale.ordinal().range(colorScale);
 46 | 
 47 | //define the approx. number of x scale ticks
 48 | var xscaleticks = 20;
 49 | 
 50 | //defines a function to be used to append the title to the tooltip.  you can set how you want it to display here.
 51 | var maketip = function (d) {			               
 52 | 			   var tip = '<p class="tip3">' + d.name + '<p class="tip1">' + NumbType(d.value) + '</p> <p class="tip3">'+  formatDate(d.date)+'</p>';
 53 |       		   return tip;}
 54 |       		   
 55 | //define your year format here, first for the x scale, then if the date is displayed in tooltips
 56 | var parseDate = d3.time.format("%Y/%m/%dT%H:%M:%S").parse;
 57 | var formatDate = d3.time.format("%Y/%m/%dT%H:%M:%S");
 58 | 
 59 | //create an SVG
 60 | var svg = d3.select("#graphic").append("svg")
 61 |     .attr("width", width + margin.left + margin.right)
 62 |     .attr("height", height + margin.top + margin.bottom)
 63 |     .append("g")
 64 |     .attr("transform", "translate(" + margin.left + "," + margin.top + ")");  
 65 |         
 66 | //make a rectangle so there is something to click on
 67 | svg.append("svg:rect")
 68 |     .attr("width", width)
 69 |     .attr("height", height)
 70 |     .attr("class", "plot");
 71 | 
 72 |  //make a clip path for the graph  
 73 |  var clip = svg.append("svg:clipPath")
 74 |     .attr("id", "clip")
 75 |     .append("svg:rect")
 76 |     .attr("x", 0)
 77 |     .attr("y", 0)
 78 |     .attr("width", width)
 79 |     .attr("height", height);   
 80 |     
 81 | // force data to update when menu is changed    
 82 | var menu = d3.select("#menu select")
 83 |     .on("change", change);    
 84 | 			    
 85 | //suck in the data, store it in a value called formatted, run the redraw function
 86 | d3.csv("/data/sensordata.csv", function(data) {
 87 | 									formatted = data;
 88 | 							        redraw();
 89 |     							  });
 90 | 
 91 | d3.select(window)
 92 |     .on("keydown", function() { altKey = d3.event.altKey; })
 93 |     .on("keyup", function() { altKey = false; });
 94 | var altKey;
 95 | 
 96 | // set terms of transition that will take place
 97 | // when a new economic indicator is chosen   
 98 | function change() {
 99 |   d3.transition()
100 |       .duration(altKey ? 7500 : 1500)
101 |       .each(redraw);
102 | }
103 | 
104 | // all the meat goes in the redraw function
105 | function redraw() { 
106 | 
107 | 	// create data nests based on economic indicator (series)
108 |     var nested = d3.nest()
109 | 		.key(function(d) { return d.sensor; })
110 | 		.map(formatted)
111 |     
112 |     // get value from menu selection
113 |     // the option values are set in HTML and correspond
114 |     //to the [sensor] value we used to nest the data  
115 |     var series = menu.property("value");
116 |     
117 |     // only retrieve data from the selected series, using the nest we just created
118 |     var data = nested[series];
119 |     
120 |     // for object constancy we will need to set "keys", one for each type of data (column name) exclude all others.
121 | 	color.domain(d3.keys(data[0]).filter(function(key) { return (key !== "date" && key !== "sensor"); }));
122 | 
123 | 	var linedata = color.domain().map(function(name) {
124 |     				return {name: name,
125 | 					        values: data.map(function(d) {
126 | 							return {name:name, date: parseDate(d.date), value: parseFloat(d[name],10)};
127 |       						})
128 |     				};
129 |   	});
130 | 
131 | 	
132 | 	//make an empty variable to stash the last values into so i can sort the legend
133 | 	var lastvalues=[];
134 | 
135 | 	//setup the x and y scales
136 | 	var x = d3.time.scale()
137 | 		.domain([
138 | 	    d3.min(linedata, function(c) { return d3.min(c.values, function(v) { return v.date; }); }),
139 | 	    d3.max(linedata, function(c) { return d3.max(c.values, function(v) { return v.date; }); })
140 | 		])
141 | 		.range([0, width]);
142 | 
143 | 	var y = d3.scale.log()
144 | 	    .domain([
145 | 	    d3.min(linedata, function(c) { return d3.min(c.values, function(v) { return v.value; }); }),
146 | 	    d3.max(linedata, function(c) { return d3.max(c.values, function(v) { return v.value; }); })
147 | 	    ])
148 | 	    .range([height, 0]);
149 | 
150 | 	//will draw the line		
151 | 	var line = d3.svg.line()
152 | 	// Uncomment this to have smooth lines. Beware that actually value will be skewed in its location.
153 | 	//.interpolate("basis")   
154 |     	.x(function(d) { return x(d.date); })
155 | 	    .y(function(d) { return y(d.value); });
156 | 
157 | 	//define the zoom
158 | 	var zoom = d3.behavior.zoom()
159 |     	.x(x)
160 | 	    .y(y)
161 | 	    .scaleExtent([1,8])
162 |     	.on("zoom", zoomed);
163 | 
164 | 	//call the zoom on the SVG
165 |     svg.call(zoom);
166 | 
167 | 	//create and draw the x axis
168 | 	var xAxis = d3.svg.axis()
169 |     	.scale(x)
170 | 	    .orient("bottom")
171 |     	.tickPadding(8)
172 | 	    .ticks(xscaleticks);
173 |     
174 |     svg.append("svg:g")
175 | 	    .attr("class", "x axis");
176 | 
177 | 	//create and draw the y axis                  
178 | 	var yAxis = d3.svg.axis()
179 |     	.scale(y)
180 | 	    .orient("left")
181 | 	//removed Y ticks due to ugliness temporarily
182 | 	//.tickSize(0-width)
183 | 	//    .tickPadding(8);
184 |     
185 |     svg.append("svg:g")
186 |     	.attr("class", "y axis");
187 | 
188 | 	//bind the data
189 | 	var thegraph = svg.selectAll(".thegraph")
190 |     	.data(linedata)
191 |  
192 | 	//append a g tag for each line and set of tooltip circles and give it a unique ID based on the column name of the data     
193 | 	var thegraphEnter=thegraph.enter().append("g")
194 |   		.attr("clip-path", "url(#clip)")
195 | 	    .attr("class", "thegraph")
196 |       	.attr('id',function(d){ return d.name+"-line"; })
197 | 	  	.style("stroke-width",1.5)
198 | 	  	.on("mouseover", function (d) {                                  
199 |       		d3.select(this)                          //on mouseover of each line, give it a nice thick stroke
200 |         	.style("stroke-width",'2px');
201 |         	
202 |         	var selectthegraphs = $('.thegraph').not(this);     //select all the rest of the lines, except the one you are hovering on and drop their opacity
203 |         	d3.selectAll(selectthegraphs)
204 |         		.style("opacity",0.2);
205 |         	
206 |         	var getname = document.getElementById(d.name);    //use get element cause the ID names have spaces in them
207 |         	var selectlegend = $('.legend').not(getname);    //grab all the legend items that match the line you are on, except the one you are hovering on
208 | 
209 |         	d3.selectAll(selectlegend)    // drop opacity on other legend names
210 |         		.style("opacity",.2);
211 | 
212 |         	d3.select(getname)
213 |         		.attr("class", "legend-select");  //change the class on the legend name that corresponds to hovered line to be bolder        	
214 |     	})
215 |     	.on("mouseout",	function(d) {        //undo everything on the mouseout
216 |       		d3.select(this)
217 |         		.style("stroke-width",'2.5px');
218 |         	
219 |         	var selectthegraphs = $('.thegraph').not(this);
220 |         	d3.selectAll(selectthegraphs)
221 |         		.style("opacity",1);
222 |         	
223 |         	var getname = document.getElementById(d.name);
224 |         	var getname2= $('.legend[fakeclass="fakelegend"]')
225 |         	var selectlegend = $('.legend').not(getname2).not(getname);
226 | 
227 |         	d3.selectAll(selectlegend)
228 |         		.style("opacity",1);
229 |         	
230 |         	d3.select(getname)
231 |         		.attr("class", "legend");        	
232 |     	});
233 | 
234 | 	//actually append the line to the graph
235 | 	thegraphEnter.append("path")
236 |     	.attr("class", "line")
237 |       	.style("stroke", function(d) { return color(d.name); })
238 |       	.attr("d", function(d) { return line(d.values[0]); })
239 |       	.transition()
240 |       	.duration(2000)
241 |       	.attrTween('d',function (d){
242 | 			var interpolate = d3.scale.quantile()
243 | 				.domain([0,1])
244 | 				.range(d3.range(1, d.values.length+1));
245 | 			return function(t){
246 | 				return line(d.values.slice(0, interpolate(t)));
247 | 			};
248 | 		});
249 |   
250 | 	//then append some 'nearly' invisible circles at each data point  
251 | 	thegraph.selectAll("circle")
252 | 		.data( function(d) {return(d.values);} )
253 | 		.enter()
254 | 		.append("circle")
255 | 			.attr("class","tipcircle")
256 | 			.attr("cx", function(d,i){return x(d.date)})
257 | 			.attr("cy",function(d,i){return y(d.value)})
258 | 			.attr("r",12)
259 | 			.style('opacity', 1e-6)//1e-6
260 | 			.attr ("title", maketip);
261 | 
262 | 	//append the legend
263 |     var legend = svg.selectAll('.legend')
264 |         .data(linedata);
265 |     
266 |     var legendEnter=legend
267 |         .enter()
268 |         .append('g')
269 |         .attr('class', 'legend')
270 |         .attr('id',function(d){ return d.name; })
271 |         .on('click', function (d) {                           //onclick function to toggle off the lines        	
272 |         	if($(this).css("opacity") == 1){				  //uses the opacity of the item clicked on to determine whether to turn the line on or off        	
273 | 
274 | 	        	var elemented = document.getElementById(this.id +"-line");   //grab the line that has the same ID as this point along w/ "-line"  use get element cause ID has spaces
275 | 	        	d3.select(elemented)
276 | 	        		.transition()
277 | 	        		.duration(1000)
278 | 	        		.style("opacity",0)
279 | 	       			.style("display",'none');
280 |         	
281 | 	        	d3.select(this)
282 | 	        		.attr('fakeclass', 'fakelegend')
283 | 	     			.transition()
284 | 	        		.duration(1000)
285 | 	      			.style ("opacity", .2);
286 |       		} else {
287 |       		
288 | 	      		var elemented = document.getElementById(this.id +"-line");
289 | 	        	d3.select(elemented)
290 | 		        	.style("display", "block")
291 | 		        	.transition()
292 | 	    	    	.duration(1000)
293 | 	        		.style("opacity",1);
294 |         	
295 | 	        	d3.select(this)
296 | 	        		.attr('fakeclass','legend')
297 | 	      			.transition()
298 | 	        		.duration(1000)
299 | 	      			.style ("opacity", 1);}
300 | 		});
301 | 
302 | 	//create a scale to pass the legend items through
303 | 	var legendscale= d3.scale.ordinal()
304 | 				.domain(lastvalues)
305 | 				.range([0,30,60,90,120,150,180,210]);
306 | 
307 | 	//actually add the circles to the created legend container
308 |     legendEnter.append('circle')
309 |         .attr('cx', width +20)
310 |         .attr('cy', function(d){return legendscale(d.values[d.values.length-1].value);})
311 |         .attr('r', 7)
312 |         .style('fill', function(d) { 
313 |           	return color(d.name);
314 |         });
315 |         	        	
316 | 	//add the legend text
317 |     legendEnter.append('text')
318 |         .attr('x', width+35)
319 |         .attr('y', function(d){return legendscale(d.values[d.values.length-1].value);})
320 |         .text(function(d){ return d.name; });
321 | 
322 |  	// set variable for updating visualization
323 |     var thegraphUpdate = d3.transition(thegraph);
324 |     
325 |     // change values of path and then the circles to those of the new series
326 |     thegraphUpdate.select("path")
327 |     	.attr("d", function(d, i) {       
328 |       
329 |       		//must be a better place to put this, but this works for now
330 |       		lastvalues[i]=d.values[d.values.length-1].value;         
331 |         	lastvalues.sort(function (a,b){return b-a});
332 |       		legendscale.domain(lastvalues);
333 |       	
334 |       		return line(d.values); });
335 |       
336 |     thegraphUpdate.selectAll("circle")
337 | 	  	.attr ("title", maketip)
338 | 	  	.attr("cy",function(d,i){return y(d.value)})
339 | 	  	.attr("cx", function(d,i){return x(d.date)});
340 | 
341 | 
342 | 	  // and now for legend items
343 | 	  var legendUpdate=d3.transition(legend);
344 | 	  
345 | 	legendUpdate.select("circle")
346 | 		.attr('cy', function(d, i){  
347 | 			return legendscale(d.values[d.values.length-1].value);});
348 | 
349 | 	legendUpdate.select("text")
350 | 		.attr('y',  function (d) {return legendscale(d.values[d.values.length-1].value);});
351 | 
352 | 
353 |  	 // update the axes,   
354 |     d3.transition(svg).select(".y.axis")
355 |     	.call(yAxis);   
356 |           
357 |     d3.transition(svg).select(".x.axis")
358 |     	.attr("transform", "translate(0," + height + ")")
359 |         .call(xAxis);
360 | 
361 | 	//make my tooltips work
362 | 	$('circle').tipsy({opacity:.9, gravity:'n', html:true});
363 | 
364 | 
365 | 	//define the zoom function
366 | 	function zoomed() {
367 |  
368 |     	svg.select(".x.axis").call(xAxis);
369 |     	svg.select(".y.axis").call(yAxis);
370 | 
371 | 		svg.selectAll(".tipcircle")
372 | 			.attr("cx", function(d,i){return x(d.date)})
373 | 			.attr("cy",function(d,i){return y(d.value)});
374 | 			
375 | 		svg.selectAll(".line")
376 |     		.attr("class","line")
377 |         	.attr("d", function (d) { return line(d.values)});
378 | 	}
379 | 
380 | //end of the redraw function
381 | }
382 | 
383 | svg.append("svg:text")
384 | .attr("text-anchor", "start")
385 | 	.attr ("x", 0-margin.left)
386 | 	.attr("y", height+margin.bottom-10)
387 | 	.text (sourcetext)
388 | 	.attr ("class","source"); 	
389 | 
390 | 
391 | 
392 | </script>
393 | </body>
394 | 
395 | 


--------------------------------------------------------------------------------
/FlowPlotterD3/templates/linechart.html.bak:
--------------------------------------------------------------------------------
  1 | 
  2 | <!DOCTYPE html>
  3 | <meta charset="utf-8">
  4 | <body>
  5 | <link href="/templates/stylesheet.css" rel="stylesheet" type="text/css">
  6 | <script src="http://d3js.org/d3.v3.min.js"></script>
  7 | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" charset="utf-8"></script>
  8 | <script type="text/javascript" src="jquery.tipsy.js"></script>    
  9 | <div id="container">
 10 |       <p id="headline" class="hed">Sensor Status</p>
 11 | <!--      <p class="dek">dek</p>
 12 |     <p class="dek">dek </p> -->	
 13 |     </div>  
 14 |     
 15 | <p id="menu" class="menuchoice">Select sensor: <select>
 16 |     <option value="Wifi">Wifi</option>
 17 |      <option value="VMfarm">VMfarm</option>
 18 |     </select>
 19 |             
 20 | <div id="graphic"> </div>
 21 | 
 22 |     
 23 | <script>
 24 | 
 25 | //set the margins
 26 | var margin = {top: 50, right: 160, bottom: 80, left: 50},
 27 |     width = 1600 - margin.left - margin.right,
 28 |     height = 800  - margin.top - margin.bottom;
 29 | 
 30 | //set dek and head to be as wide as SVG
 31 | d3.select('#dek')
 32 | 	.style('width', width+'px');
 33 | d3.select('#headline')
 34 | 	.style('width',width+'px');
 35 | 
 36 | //write out your source text here
 37 | var sourcetext= "Source: rwfilter --start-date=2016/08/01 --end-date=2016/08/30 --type=all --protocol=0-255 --pass=stdout";
 38 | 
 39 | // set the type of number here, n is a number with a comma, .2% will get you a percent, .2f will get you 2 decimal points
 40 | var NumbType = d3.format(".2f");
 41 | 
 42 | // color array
 43 | var color = d3.scale.category20b();
 44 | var colorScale = color.range();
 45 | //color function pulls from array of colors stored in color.js
 46 | var color = d3.scale.ordinal().range(colorScale);
 47 | 
 48 | //define the approx. number of x scale ticks
 49 | var xscaleticks = 20;
 50 | 
 51 | //defines a function to be used to append the title to the tooltip.  you can set how you want it to display here.
 52 | var maketip = function (d) {			               
 53 | 			   var tip = '<p class="tip3">' + d.name + '<p class="tip1">' + NumbType(d.value) + '</p> <p class="tip3">'+  formatDate(d.date)+'</p>';
 54 |       		   return tip;}
 55 |       		   
 56 | //define your year format here, first for the x scale, then if the date is displayed in tooltips
 57 | var parseDate = d3.time.format("%Y/%m/%dT%H:%M:%S").parse;
 58 | var formatDate = d3.time.format("%Y/%m/%dT%H:%M:%S");
 59 | 
 60 | //create an SVG
 61 | var svg = d3.select("#graphic").append("svg")
 62 |     .attr("width", width + margin.left + margin.right)
 63 |     .attr("height", height + margin.top + margin.bottom)
 64 |     .append("g")
 65 |     .attr("transform", "translate(" + margin.left + "," + margin.top + ")");  
 66 |         
 67 | //make a rectangle so there is something to click on
 68 | svg.append("svg:rect")
 69 |     .attr("width", width)
 70 |     .attr("height", height)
 71 |     .attr("class", "plot");
 72 | 
 73 |  //make a clip path for the graph  
 74 |  var clip = svg.append("svg:clipPath")
 75 |     .attr("id", "clip")
 76 |     .append("svg:rect")
 77 |     .attr("x", 0)
 78 |     .attr("y", 0)
 79 |     .attr("width", width)
 80 |     .attr("height", height);   
 81 |     
 82 | // force data to update when menu is changed    
 83 | var menu = d3.select("#menu select")
 84 |     .on("change", change);    
 85 | 			    
 86 | //suck in the data, store it in a value called formatted, run the redraw function
 87 | d3.csv("/data/sensordata.csv", function(data) {
 88 | 									formatted = data;
 89 | 							        redraw();
 90 |     							  });
 91 | 
 92 | d3.select(window)
 93 |     .on("keydown", function() { altKey = d3.event.altKey; })
 94 |     .on("keyup", function() { altKey = false; });
 95 | var altKey;
 96 | 
 97 | // set terms of transition that will take place
 98 | // when a new economic indicator is chosen   
 99 | function change() {
100 |   d3.transition()
101 |       .duration(altKey ? 7500 : 1500)
102 |       .each(redraw);
103 | }
104 | 
105 | // all the meat goes in the redraw function
106 | function redraw() { 
107 | 
108 | 	// create data nests based on economic indicator (series)
109 |     var nested = d3.nest()
110 | 		.key(function(d) { return d.sensor; })
111 | 		.map(formatted)
112 |     
113 |     // get value from menu selection
114 |     // the option values are set in HTML and correspond
115 |     //to the [sensor] value we used to nest the data  
116 |     var series = menu.property("value");
117 |     
118 |     // only retrieve data from the selected series, using the nest we just created
119 |     var data = nested[series];
120 |     
121 |     // for object constancy we will need to set "keys", one for each type of data (column name) exclude all others.
122 | 	color.domain(d3.keys(data[0]).filter(function(key) { return (key !== "date" && key !== "sensor"); }));
123 | 
124 | 	var linedata = color.domain().map(function(name) {
125 |     				return {name: name,
126 | 					        values: data.map(function(d) {
127 | 							return {name:name, date: parseDate(d.date), value: parseFloat(d[name],10)};
128 |       						})
129 |     				};
130 |   	});
131 | 
132 | 	
133 | 	//make an empty variable to stash the last values into so i can sort the legend
134 | 	var lastvalues=[];
135 | 
136 | 	//setup the x and y scales
137 | 	var x = d3.time.scale()
138 | 		.domain([
139 | 	    d3.min(linedata, function(c) { return d3.min(c.values, function(v) { return v.date; }); }),
140 | 	    d3.max(linedata, function(c) { return d3.max(c.values, function(v) { return v.date; }); })
141 | 		])
142 | 		.range([0, width]);
143 | 
144 | 	var y = d3.scale.log()
145 | 	    .domain([
146 | 	    d3.min(linedata, function(c) { return d3.min(c.values, function(v) { return v.value; }); }),
147 | 	    d3.max(linedata, function(c) { return d3.max(c.values, function(v) { return v.value; }); })
148 | 	    ])
149 | 	    .range([height, 0]);
150 | 
151 | 	//will draw the line		
152 | 	var line = d3.svg.line()
153 | 	// Uncomment this to have smooth lines. Beware that actually value will be skewed in its location.
154 | 	//.interpolate("basis")   
155 |     	.x(function(d) { return x(d.date); })
156 | 	    .y(function(d) { return y(d.value); });
157 | 
158 | 	//define the zoom
159 | 	var zoom = d3.behavior.zoom()
160 |     	.x(x)
161 | 	    .y(y)
162 | 	    .scaleExtent([1,8])
163 |     	.on("zoom", zoomed);
164 | 
165 | 	//call the zoom on the SVG
166 |     svg.call(zoom);
167 | 
168 | 	//create and draw the x axis
169 | 	var xAxis = d3.svg.axis()
170 |     	.scale(x)
171 | 	    .orient("bottom")
172 |     	.tickPadding(8)
173 | 	    .ticks(xscaleticks);
174 |     
175 |     svg.append("svg:g")
176 | 	    .attr("class", "x axis");
177 | 
178 | 	//create and draw the y axis                  
179 | 	var yAxis = d3.svg.axis()
180 |     	.scale(y)
181 | 	    .orient("left")
182 | 	//removed Y ticks due to ugliness temporarily
183 | 	//.tickSize(0-width)
184 | 	//    .tickPadding(8);
185 |     
186 |     svg.append("svg:g")
187 |     	.attr("class", "y axis");
188 | 
189 | 	//bind the data
190 | 	var thegraph = svg.selectAll(".thegraph")
191 |     	.data(linedata)
192 |  
193 | 	//append a g tag for each line and set of tooltip circles and give it a unique ID based on the column name of the data     
194 | 	var thegraphEnter=thegraph.enter().append("g")
195 |   		.attr("clip-path", "url(#clip)")
196 | 	    .attr("class", "thegraph")
197 |       	.attr('id',function(d){ return d.name+"-line"; })
198 | 	  	.style("stroke-width",1.5)
199 | 	  	.on("mouseover", function (d) {                                  
200 |       		d3.select(this)                          //on mouseover of each line, give it a nice thick stroke
201 |         	.style("stroke-width",'2px');
202 |         	
203 |         	var selectthegraphs = $('.thegraph').not(this);     //select all the rest of the lines, except the one you are hovering on and drop their opacity
204 |         	d3.selectAll(selectthegraphs)
205 |         		.style("opacity",0.2);
206 |         	
207 |         	var getname = document.getElementById(d.name);    //use get element cause the ID names have spaces in them
208 |         	var selectlegend = $('.legend').not(getname);    //grab all the legend items that match the line you are on, except the one you are hovering on
209 | 
210 |         	d3.selectAll(selectlegend)    // drop opacity on other legend names
211 |         		.style("opacity",.2);
212 | 
213 |         	d3.select(getname)
214 |         		.attr("class", "legend-select");  //change the class on the legend name that corresponds to hovered line to be bolder        	
215 |     	})
216 |     	.on("mouseout",	function(d) {        //undo everything on the mouseout
217 |       		d3.select(this)
218 |         		.style("stroke-width",'2.5px');
219 |         	
220 |         	var selectthegraphs = $('.thegraph').not(this);
221 |         	d3.selectAll(selectthegraphs)
222 |         		.style("opacity",1);
223 |         	
224 |         	var getname = document.getElementById(d.name);
225 |         	var getname2= $('.legend[fakeclass="fakelegend"]')
226 |         	var selectlegend = $('.legend').not(getname2).not(getname);
227 | 
228 |         	d3.selectAll(selectlegend)
229 |         		.style("opacity",1);
230 |         	
231 |         	d3.select(getname)
232 |         		.attr("class", "legend");        	
233 |     	});
234 | 
235 | 	//actually append the line to the graph
236 | 	thegraphEnter.append("path")
237 |     	.attr("class", "line")
238 |       	.style("stroke", function(d) { return color(d.name); })
239 |       	.attr("d", function(d) { return line(d.values[0]); })
240 |       	.transition()
241 |       	.duration(2000)
242 |       	.attrTween('d',function (d){
243 | 			var interpolate = d3.scale.quantile()
244 | 				.domain([0,1])
245 | 				.range(d3.range(1, d.values.length+1));
246 | 			return function(t){
247 | 				return line(d.values.slice(0, interpolate(t)));
248 | 			};
249 | 		});
250 |   
251 | 	//then append some 'nearly' invisible circles at each data point  
252 | 	thegraph.selectAll("circle")
253 | 		.data( function(d) {return(d.values);} )
254 | 		.enter()
255 | 		.append("circle")
256 | 			.attr("class","tipcircle")
257 | 			.attr("cx", function(d,i){return x(d.date)})
258 | 			.attr("cy",function(d,i){return y(d.value)})
259 | 			.attr("r",12)
260 | 			.style('opacity', 1e-6)//1e-6
261 | 			.attr ("title", maketip);
262 | 
263 | 	//append the legend
264 |     var legend = svg.selectAll('.legend')
265 |         .data(linedata);
266 |     
267 |     var legendEnter=legend
268 |         .enter()
269 |         .append('g')
270 |         .attr('class', 'legend')
271 |         .attr('id',function(d){ return d.name; })
272 |         .on('click', function (d) {                           //onclick function to toggle off the lines        	
273 |         	if($(this).css("opacity") == 1){				  //uses the opacity of the item clicked on to determine whether to turn the line on or off        	
274 | 
275 | 	        	var elemented = document.getElementById(this.id +"-line");   //grab the line that has the same ID as this point along w/ "-line"  use get element cause ID has spaces
276 | 	        	d3.select(elemented)
277 | 	        		.transition()
278 | 	        		.duration(1000)
279 | 	        		.style("opacity",0)
280 | 	       			.style("display",'none');
281 |         	
282 | 	        	d3.select(this)
283 | 	        		.attr('fakeclass', 'fakelegend')
284 | 	     			.transition()
285 | 	        		.duration(1000)
286 | 	      			.style ("opacity", .2);
287 |       		} else {
288 |       		
289 | 	      		var elemented = document.getElementById(this.id +"-line");
290 | 	        	d3.select(elemented)
291 | 		        	.style("display", "block")
292 | 		        	.transition()
293 | 	    	    	.duration(1000)
294 | 	        		.style("opacity",1);
295 |         	
296 | 	        	d3.select(this)
297 | 	        		.attr('fakeclass','legend')
298 | 	      			.transition()
299 | 	        		.duration(1000)
300 | 	      			.style ("opacity", 1);}
301 | 		});
302 | 
303 | 	//create a scale to pass the legend items through
304 | 	var legendscale= d3.scale.ordinal()
305 | 				.domain(lastvalues)
306 | 				.range([0,30,60,90,120,150,180,210]);
307 | 
308 | 	//actually add the circles to the created legend container
309 |     legendEnter.append('circle')
310 |         .attr('cx', width +20)
311 |         .attr('cy', function(d){return legendscale(d.values[d.values.length-1].value);})
312 |         .attr('r', 7)
313 |         .style('fill', function(d) { 
314 |           	return color(d.name);
315 |         });
316 |         	        	
317 | 	//add the legend text
318 |     legendEnter.append('text')
319 |         .attr('x', width+35)
320 |         .attr('y', function(d){return legendscale(d.values[d.values.length-1].value);})
321 |         .text(function(d){ return d.name; });
322 | 
323 |  	// set variable for updating visualization
324 |     var thegraphUpdate = d3.transition(thegraph);
325 |     
326 |     // change values of path and then the circles to those of the new series
327 |     thegraphUpdate.select("path")
328 |     	.attr("d", function(d, i) {       
329 |       
330 |       		//must be a better place to put this, but this works for now
331 |       		lastvalues[i]=d.values[d.values.length-1].value;         
332 |         	lastvalues.sort(function (a,b){return b-a});
333 |       		legendscale.domain(lastvalues);
334 |       	
335 |       		return line(d.values); });
336 |       
337 |     thegraphUpdate.selectAll("circle")
338 | 	  	.attr ("title", maketip)
339 | 	  	.attr("cy",function(d,i){return y(d.value)})
340 | 	  	.attr("cx", function(d,i){return x(d.date)});
341 | 
342 | 
343 | 	  // and now for legend items
344 | 	  var legendUpdate=d3.transition(legend);
345 | 	  
346 | 	legendUpdate.select("circle")
347 | 		.attr('cy', function(d, i){  
348 | 			return legendscale(d.values[d.values.length-1].value);});
349 | 
350 | 	legendUpdate.select("text")
351 | 		.attr('y',  function (d) {return legendscale(d.values[d.values.length-1].value);});
352 | 
353 | 
354 |  	 // update the axes,   
355 |     d3.transition(svg).select(".y.axis")
356 |     	.call(yAxis);   
357 |           
358 |     d3.transition(svg).select(".x.axis")
359 |     	.attr("transform", "translate(0," + height + ")")
360 |         .call(xAxis);
361 | 
362 | 	//make my tooltips work
363 | 	$('circle').tipsy({opacity:.9, gravity:'n', html:true});
364 | 
365 | 
366 | 	//define the zoom function
367 | 	function zoomed() {
368 |  
369 |     	svg.select(".x.axis").call(xAxis);
370 |     	svg.select(".y.axis").call(yAxis);
371 | 
372 | 		svg.selectAll(".tipcircle")
373 | 			.attr("cx", function(d,i){return x(d.date)})
374 | 			.attr("cy",function(d,i){return y(d.value)});
375 | 			
376 | 		svg.selectAll(".line")
377 |     		.attr("class","line")
378 |         	.attr("d", function (d) { return line(d.values)});
379 | 	}
380 | 
381 | //end of the redraw function
382 | }
383 | 
384 | svg.append("svg:text")
385 | .attr("text-anchor", "start")
386 | 	.attr ("x", 0-margin.left)
387 | 	.attr("y", height+margin.bottom-10)
388 | 	.text (sourcetext)
389 | 	.attr ("class","source"); 	
390 | 
391 | 
392 | 
393 | </script>
394 | </body>
395 | 
396 | 


--------------------------------------------------------------------------------
/FlowPlotterD3/templates/mslinechart.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <!DOCTYPE html>
  3 | <meta charset="utf-8">
  4 | <body>
  5 | <link href="/templates/stylesheet.css" rel="stylesheet" type="text/css">
  6 | <script src="http://d3js.org/d3.v3.min.js"></script>
  7 | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" charset="utf-8"></script>
  8 | <script type="text/javascript" src="templates/jquery.tipsy.js"></script>    
  9 | <div id="container">
 10 |       <p id="headline" class="hed">seriesselect status</p>
 11 | <!--      <p class="dek">dek</p>
 12 |     <p class="dek">dek </p> -->	
 13 |     </div>  
 14 |     
 15 | <p id="menu" class="menuchoice">Select seriesselect: <select>
 16 | optionlist
 17 |     </select>
 18 |             
 19 | <div id="graphic"> </div>
 20 | 
 21 |     
 22 | <script>
 23 | 
 24 | //set the margins
 25 | var margin = {top: 50, right: 160, bottom: 80, left: 50},
 26 |     width = 1600 - margin.left - margin.right,
 27 |     height = 800  - margin.top - margin.bottom;
 28 | 
 29 | //set dek and head to be as wide as SVG
 30 | d3.select('#dek')
 31 | 	.style('width', width+'px');
 32 | d3.select('#headline')
 33 | 	.style('width',width+'px');
 34 | 
 35 | //write out your source text here
 36 | //var sourcetext= "Source: rwfilter --start-date=2016/08/01 --end-date=2016/08/30 --type=all --protocol=0-255 --pass=stdout";
 37 | 
 38 | // set the type of number here, n is a number with a comma, .2% will get you a percent, .2f will get you 2 decimal points
 39 | var NumbType = d3.format(".2f");
 40 | 
 41 | // color array
 42 | var color = d3.scale.category20b();
 43 | var colorScale = color.range();
 44 | //color function pulls from array of colors stored in color.js
 45 | var color = d3.scale.ordinal().range(colorScale);
 46 | 
 47 | //define the approx. number of x scale ticks
 48 | var xscaleticks = 20;
 49 | 
 50 | //defines a function to be used to append the title to the tooltip.  you can set how you want it to display here.
 51 | var maketip = function (d) {			               
 52 | 			   var tip = '<p class="tip3">' + d.name + '<p class="tip1">' + NumbType(d.value) + '</p> <p class="tip3">'+  formatDate(d.date)+'</p>';
 53 |       		   return tip;}
 54 |       		   
 55 | //define your year format here, first for the x scale, then if the date is displayed in tooltips
 56 | var parseDate = d3.time.format("%Y/%m/%dT%H:%M:%S").parse;
 57 | var formatDate = d3.time.format("%Y/%m/%dT%H:%M:%S");
 58 | 
 59 | //create an SVG
 60 | var svg = d3.select("#graphic").append("svg")
 61 |     .attr("width", width + margin.left + margin.right)
 62 |     .attr("height", height + margin.top + margin.bottom)
 63 |     .append("g")
 64 |     .attr("transform", "translate(" + margin.left + "," + margin.top + ")");  
 65 |         
 66 | //make a rectangle so there is something to click on
 67 | svg.append("svg:rect")
 68 |     .attr("width", width)
 69 |     .attr("height", height)
 70 |     .attr("class", "plot");
 71 | 
 72 |  //make a clip path for the graph  
 73 |  var clip = svg.append("svg:clipPath")
 74 |     .attr("id", "clip")
 75 |     .append("svg:rect")
 76 |     .attr("x", 0)
 77 |     .attr("y", 0)
 78 |     .attr("width", width)
 79 |     .attr("height", height);   
 80 |     
 81 | // force data to update when menu is changed    
 82 | var menu = d3.select("#menu select")
 83 |     .on("change", change);    
 84 | 			    
 85 | //suck in the data, store it in a value called formatted, run the redraw function
 86 | d3.csv("/data/ms.csv", function(data) {
 87 | 									formatted = data;
 88 | 							        redraw();
 89 |     							  });
 90 | 
 91 | d3.select(window)
 92 |     .on("keydown", function() { altKey = d3.event.altKey; })
 93 |     .on("keyup", function() { altKey = false; });
 94 | var altKey;
 95 | 
 96 | // set terms of transition that will take place
 97 | // when a new economic indicator is chosen   
 98 | function change() {
 99 |   d3.transition()
100 |       .duration(altKey ? 7500 : 1500)
101 |       .each(redraw);
102 | }
103 | 
104 | // all the meat goes in the redraw function
105 | function redraw() { 
106 | 
107 | 	// create data nests based on economic indicator (series)
108 |     var nested = d3.nest()
109 | 		.key(function(d) { return d.seriesselect; })
110 | 		.map(formatted)
111 |     
112 |     // get value from menu selection
113 |     // the option values are set in HTML and correspond
114 |     //to the [seriesselect] value we used to nest the data  
115 |     var series = menu.property("value");
116 |     
117 |     // only retrieve data from the selected series, using the nest we just created
118 |     var data = nested[series];
119 |     
120 |     // for object constancy we will need to set "keys", one for each type of data (column name) exclude all others.
121 | 	color.domain(d3.keys(data[0]).filter(function(key) { return (key !== "date" && key !== "seriesselect"); }));
122 | 
123 | 	var linedata = color.domain().map(function(name) {
124 |     				return {name: name,
125 | 					        values: data.map(function(d) {
126 | 							return {name:name, date: parseDate(d.date), value: parseFloat(d[name],10)};
127 |       						})
128 |     				};
129 |   	});
130 | 
131 | 	
132 | 	//make an empty variable to stash the last values into so i can sort the legend
133 | 	var lastvalues=[];
134 | 
135 | 	//setup the x and y scales
136 | 	var x = d3.time.scale()
137 | 		.domain([
138 | 	    d3.min(linedata, function(c) { return d3.min(c.values, function(v) { return v.date; }); }),
139 | 	    d3.max(linedata, function(c) { return d3.max(c.values, function(v) { return v.date; }); })
140 | 		])
141 | 		.range([0, width]);
142 | 
143 | 	var y = d3.scale.log()
144 | 	    .domain([
145 | 	    d3.min(linedata, function(c) { return d3.min(c.values, function(v) { return v.value; }); }),
146 | 	    d3.max(linedata, function(c) { return d3.max(c.values, function(v) { return v.value; }); })
147 | 	    ])
148 | 	    .range([height, 0]);
149 | 
150 | 	//will draw the line		
151 | 	var line = d3.svg.line()
152 | 	// Uncomment this to have smooth lines. Beware that actually value will be skewed in its location.
153 | 	//.interpolate("basis")   
154 |     	.x(function(d) { return x(d.date); })
155 | 	    .y(function(d) { return y(d.value); });
156 | 
157 | 	//define the zoom
158 | 	var zoom = d3.behavior.zoom()
159 |     	.x(x)
160 | 	    .y(y)
161 | 	    .scaleExtent([1,8])
162 |     	.on("zoom", zoomed);
163 | 
164 | 	//call the zoom on the SVG
165 |     svg.call(zoom);
166 | 
167 | 	//create and draw the x axis
168 | 	var xAxis = d3.svg.axis()
169 |     	.scale(x)
170 | 	    .orient("bottom")
171 |     	.tickPadding(8)
172 | 	    .ticks(xscaleticks);
173 |     
174 |     svg.append("svg:g")
175 | 	    .attr("class", "x axis");
176 | 
177 | 	//create and draw the y axis                  
178 | 	var yAxis = d3.svg.axis()
179 |     	.scale(y)
180 | 	    .orient("left")
181 | 	//remove Y ticks if it seems ugly
182 | 	.tickSize(0-width)
183 | 	    .tickPadding(8);
184 |     
185 |     svg.append("svg:g")
186 |     	.attr("class", "y axis");
187 | 
188 | 	//bind the data
189 | 	var thegraph = svg.selectAll(".thegraph")
190 |     	.data(linedata)
191 |  
192 | 	//append a g tag for each line and set of tooltip circles and give it a unique ID based on the column name of the data     
193 | 	var thegraphEnter=thegraph.enter().append("g")
194 |   		.attr("clip-path", "url(#clip)")
195 | 	    .attr("class", "thegraph")
196 |       	.attr('id',function(d){ return d.name+"-line"; })
197 | 	  	.style("stroke-width",1.5)
198 | 	  	.on("mouseover", function (d) {                                  
199 |       		d3.select(this)                          //on mouseover of each line, give it a nice thick stroke
200 |         	.style("stroke-width",'2px');
201 |         	
202 |         	var selectthegraphs = $('.thegraph').not(this);     //select all the rest of the lines, except the one you are hovering on and drop their opacity
203 |         	d3.selectAll(selectthegraphs)
204 |         		.style("opacity",0.2);
205 |         	
206 |         	var getname = document.getElementById(d.name);    //use get element cause the ID names have spaces in them
207 |         	var selectlegend = $('.legend').not(getname);    //grab all the legend items that match the line you are on, except the one you are hovering on
208 | 
209 |         	d3.selectAll(selectlegend)    // drop opacity on other legend names
210 |         		.style("opacity",.2);
211 | 
212 |         	d3.select(getname)
213 |         		.attr("class", "legend-select");  //change the class on the legend name that corresponds to hovered line to be bolder        	
214 |     	})
215 |     	.on("mouseout",	function(d) {        //undo everything on the mouseout
216 |       		d3.select(this)
217 |         		.style("stroke-width",'2.5px');
218 |         	
219 |         	var selectthegraphs = $('.thegraph').not(this);
220 |         	d3.selectAll(selectthegraphs)
221 |         		.style("opacity",1);
222 |         	
223 |         	var getname = document.getElementById(d.name);
224 |         	var getname2= $('.legend[fakeclass="fakelegend"]')
225 |         	var selectlegend = $('.legend').not(getname2).not(getname);
226 | 
227 |         	d3.selectAll(selectlegend)
228 |         		.style("opacity",1);
229 |         	
230 |         	d3.select(getname)
231 |         		.attr("class", "legend");        	
232 |     	});
233 | 
234 | 	//actually append the line to the graph
235 | 	thegraphEnter.append("path")
236 |     	.attr("class", "line")
237 |       	.style("stroke", function(d) { return color(d.name); })
238 |       	.attr("d", function(d) { return line(d.values[0]); })
239 |       	.transition()
240 |       	.duration(2000)
241 |       	.attrTween('d',function (d){
242 | 			var interpolate = d3.scale.quantile()
243 | 				.domain([0,1])
244 | 				.range(d3.range(1, d.values.length+1));
245 | 			return function(t){
246 | 				return line(d.values.slice(0, interpolate(t)));
247 | 			};
248 | 		});
249 |   
250 | 	//then append some 'nearly' invisible circles at each data point  
251 | 	thegraph.selectAll("circle")
252 | 		.data( function(d) {return(d.values);} )
253 | 		.enter()
254 | 		.append("circle")
255 | 			.attr("class","tipcircle")
256 | 			.attr("cx", function(d,i){return x(d.date)})
257 | 			.attr("cy",function(d,i){return y(d.value)})
258 | 			.attr("r",12)
259 | 			.style('opacity', 1e-6)//1e-6
260 | 			.attr ("title", maketip);
261 | 
262 | 	//append the legend
263 |     var legend = svg.selectAll('.legend')
264 |         .data(linedata);
265 |     
266 |     var legendEnter=legend
267 |         .enter()
268 |         .append('g')
269 |         .attr('class', 'legend')
270 |         .attr('id',function(d){ return d.name; })
271 |         .on('click', function (d) {                           //onclick function to toggle off the lines        	
272 |         	if($(this).css("opacity") == 1){				  //uses the opacity of the item clicked on to determine whether to turn the line on or off        	
273 | 
274 | 	        	var elemented = document.getElementById(this.id +"-line");   //grab the line that has the same ID as this point along w/ "-line"  use get element cause ID has spaces
275 | 	        	d3.select(elemented)
276 | 	        		.transition()
277 | 	        		.duration(1000)
278 | 	        		.style("opacity",0)
279 | 	       			.style("display",'none');
280 |         	
281 | 	        	d3.select(this)
282 | 	        		.attr('fakeclass', 'fakelegend')
283 | 	     			.transition()
284 | 	        		.duration(1000)
285 | 	      			.style ("opacity", .2);
286 |       		} else {
287 |       		
288 | 	      		var elemented = document.getElementById(this.id +"-line");
289 | 	        	d3.select(elemented)
290 | 		        	.style("display", "block")
291 | 		        	.transition()
292 | 	    	    	.duration(1000)
293 | 	        		.style("opacity",1);
294 |         	
295 | 	        	d3.select(this)
296 | 	        		.attr('fakeclass','legend')
297 | 	      			.transition()
298 | 	        		.duration(1000)
299 | 	      			.style ("opacity", 1);}
300 | 		});
301 | 
302 | 	//create a scale to pass the legend items through
303 | 	var legendscale= d3.scale.ordinal()
304 | 				.domain(lastvalues)
305 | 				.range([0,30,60,90,120,150,180,210]);
306 | 
307 | 	//actually add the circles to the created legend container
308 |     legendEnter.append('circle')
309 |         .attr('cx', width +20)
310 |         .attr('cy', function(d){return legendscale(d.values[d.values.length-1].value);})
311 |         .attr('r', 7)
312 |         .style('fill', function(d) { 
313 |           	return color(d.name);
314 |         });
315 |         	        	
316 | 	//add the legend text
317 |     legendEnter.append('text')
318 |         .attr('x', width+35)
319 |         .attr('y', function(d){return legendscale(d.values[d.values.length-1].value);})
320 |         .text(function(d){ return d.name; });
321 | 
322 |  	// set variable for updating visualization
323 |     var thegraphUpdate = d3.transition(thegraph);
324 |     
325 |     // change values of path and then the circles to those of the new series
326 |     thegraphUpdate.select("path")
327 |     	.attr("d", function(d, i) {       
328 |       
329 |       		//must be a better place to put this, but this works for now
330 |       		lastvalues[i]=d.values[d.values.length-1].value;         
331 |         	lastvalues.sort(function (a,b){return b-a});
332 |       		legendscale.domain(lastvalues);
333 |       	
334 |       		return line(d.values); });
335 |       
336 |     thegraphUpdate.selectAll("circle")
337 | 	  	.attr ("title", maketip)
338 | 	  	.attr("cy",function(d,i){return y(d.value)})
339 | 	  	.attr("cx", function(d,i){return x(d.date)});
340 | 
341 | 
342 | 	  // and now for legend items
343 | 	  var legendUpdate=d3.transition(legend);
344 | 	  
345 | 	legendUpdate.select("circle")
346 | 		.attr('cy', function(d, i){  
347 | 			return legendscale(d.values[d.values.length-1].value);});
348 | 
349 | 	legendUpdate.select("text")
350 | 		.attr('y',  function (d) {return legendscale(d.values[d.values.length-1].value);});
351 | 
352 | 
353 |  	 // update the axes,   
354 |     d3.transition(svg).select(".y.axis")
355 |     	.call(yAxis);   
356 |           
357 |     d3.transition(svg).select(".x.axis")
358 |     	.attr("transform", "translate(0," + height + ")")
359 |         .call(xAxis);
360 | 
361 | 	//make my tooltips work
362 | 	$('circle').tipsy({opacity:.9, gravity:'n', html:true});
363 | 
364 | 
365 | 	//define the zoom function
366 | 	function zoomed() {
367 |  
368 |     	svg.select(".x.axis").call(xAxis);
369 |     	svg.select(".y.axis").call(yAxis);
370 | 
371 | 		svg.selectAll(".tipcircle")
372 | 			.attr("cx", function(d,i){return x(d.date)})
373 | 			.attr("cy",function(d,i){return y(d.value)});
374 | 			
375 | 		svg.selectAll(".line")
376 |     		.attr("class","line")
377 |         	.attr("d", function (d) { return line(d.values)});
378 | 	}
379 | 
380 | //end of the redraw function
381 | }
382 | 
383 | svg.append("svg:text")
384 | .attr("text-anchor", "start")
385 | 	.attr ("x", 0-margin.left)
386 | 	.attr("y", height+margin.bottom-10)
387 | 	//.text (sourcetext)
388 | 	.attr ("class","source"); 	
389 | 
390 | 
391 | 
392 | </script>
393 | </body>
394 | 
395 | 


--------------------------------------------------------------------------------
/FlowPlotterD3/templates/stylesheet.css:
--------------------------------------------------------------------------------
  1 | 
  2 | .plot{
  3 | fill: #fff;
  4 | }
  5 | .axis path,
  6 | .axis line {
  7 |   fill: none;
  8 | 	stroke: #AFBABF;
  9 | 	shape-rendering: crispEdges;
 10 | 	}
 11 | .axis text {
 12 | 	font-family:  SourceSansPro-Bold;
 13 | 	font-size: 14px;
 14 | 	fill: #AFBABF;
 15 | 	}
 16 | 
 17 | .x.axis path {
 18 |   display: none;
 19 | }
 20 | .y.axis path{
 21 |   display: none;
 22 |   }
 23 | 
 24 | .line {
 25 |   fill: none;
 26 |   stroke: steelblue;
 27 |   stroke-linejoin: round;
 28 |   stroke-linecap:round;
 29 | }
 30 | 	
 31 | .hed {
 32 | 	font-family: SourceSansPro-Bold;
 33 | 	font-size: 24pt;
 34 | 	margin-bottom:5px; 
 35 | 	margin-top:0px;
 36 | 	}
 37 | 	
 38 | .dek {
 39 | 	font-family: SourceSansPro-Light;
 40 | 	font-size: 6pt;
 41 | 	margin-bottom:0px; 
 42 | 	margin-top:0px;
 43 | 	}	
 44 | .menuchoice {
 45 | 	font-family: SourceSansPro-Light;
 46 | 	font-size: 10pt;
 47 | 	margin-bottom:0px;
 48 | 	fill: #231F20; 
 49 | 	}
 50 | .legend {
 51 | 	font-family: SourceSansPro-Light;
 52 | 	font-size: 10pt;
 53 | 	margin-bottom:0px;
 54 | 	fill: #231F20; 
 55 | 	}	
 56 | .legend-off {
 57 | 	font-family: SourceSansPro-Light;
 58 | 	font-size: 10pt;
 59 | 	margin-bottom:0px;
 60 | 	fill: #231F20; 
 61 | 	}
 62 | .legend-select {
 63 | 	font-family: SourceSansPro-Bold;
 64 | 	font-size: 10pt;
 65 | 	margin-bottom:0px;
 66 | 	fill: #231F20; 
 67 | 	}
 68 | .tip1 {
 69 | 	font-family: SourceSansPro-Bold;
 70 | 	font-size: 14pt;
 71 | 	text-align: center; 
 72 | 	margin-bottom:-12px; 
 73 | 	margin-top:0px;
 74 | 	}
 75 | 	
 76 | .tip2 {
 77 | 	font-family: SourceSansPro-ExtraLight;
 78 | 	font-size: 10pt;
 79 | 	text-align: center; 
 80 | 	margin-bottom:-12px; 
 81 | 	}	
 82 | .tip3 {
 83 | 	font-family: SourceSansPro-ExtraLight;
 84 | 	font-size: 10pt;
 85 | 	text-align: center; 
 86 | 	margin-bottom:0px; 
 87 | 	}		
 88 | 
 89 | @font-face {
 90 |   font-family: 'SourceSansPro-ExtraLight';
 91 |   font-style: normal;
 92 |   font-weight: 200;
 93 |   src: local('Source Sans Pro ExtraLight'), local('SourceSansPro-ExtraLight'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v5/toadOcfmlt9b38dHJxOBGC-IiwWNzQT_LXAtr-Ee9Pw.woff) format('woff');
 94 | }
 95 | @font-face {
 96 |   font-family: 'SourceSansPro-Light';
 97 |   font-style: normal;
 98 |   font-weight: 300;
 99 |   src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v5/toadOcfmlt9b38dHJxOBGMVNtom4QlEDNJaqqqzqdSs.woff) format('woff');
100 | }
101 | @font-face {
102 |   font-family: 'SourceSansPro-Bold';
103 |   font-style: normal;
104 |   font-weight: 700;
105 |   src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v5/toadOcfmlt9b38dHJxOBGIqjGYJUyOXcBwUQbRaNH6c.woff) format('woff');
106 | }
107 | 
108 | .tipsy { font-family:"Source Sans Pro"; font-size: 10px; position: absolute; padding: 5px; z-index: 100000; }
109 |   .tipsy-inner { background-color: #000; color: #FFF; max-width: 200px; padding: 0; text-align: left; padding:10px;}
110 |   /* Rounded corners */
111 |   .tipsy-inner { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
112 |   
113 |   /* Uncomment for shadow */
114 |   /*.tipsy-inner { box-shadow: 0 0 5px #000000; -webkit-box-shadow: 0 0 5px #000000; -moz-box-shadow: 0 0 5px #000000; }*/
115 |   
116 |   .tipsy-arrow { position: absolute; width: 0; height: 0; line-height: 0; border: 5px dashed #000; }
117 |   
118 |   /* Rules to colour arrows */
119 |   .tipsy-arrow-n { border-bottom-color: #000; }
120 |   .tipsy-arrow-s { border-top-color: #000; }
121 |   .tipsy-arrow-e { border-left-color: #FFF; }
122 |   .tipsy-arrow-w { border-right-color: #000; }
123 |   
124 | 	.tipsy-n .tipsy-arrow { top: 0px; left: 50%; margin-left: -5px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent; }
125 |     .tipsy-nw .tipsy-arrow { top: 0; left: 10px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent;}
126 |     .tipsy-ne .tipsy-arrow { top: 0; right: 10px; border-bottom-style: solid; border-top: none;  border-left-color: transparent; border-right-color: transparent;}
127 |   .tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -5px; border-top-style: solid; border-bottom: none;  border-left-color: transparent; border-right-color: transparent; }
128 |     .tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; border-top-style: solid; border-bottom: none;  border-left-color: transparent; border-right-color: transparent; }
129 |     .tipsy-se .tipsy-arrow { bottom: 0; right: 10px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; }
130 |   .tipsy-e .tipsy-arrow { right: 0; top: 50%; margin-top: -5px; border-left-style: solid; border-right: none; border-top-color: transparent; border-bottom-color: transparent; }
131 |   .tipsy-w .tipsy-arrow { left: 0; top: 50%; margin-top: -5px; border-right-style: solid; border-left: none; border-top-color: transparent; border-bottom-color: transparent; }
132 | 
133 | 
134 | .gravity { width: 100%; margin: 5px 0; border-spacing: 5px; }
135 |   .gravity td { text-align: center; vertical-align: middle; padding: 5px 0; background-color: #d0d0d0; width: 33%; }
136 |   .gravity a { }
137 |     .gravity a:hover { color: #505050; background: none; }
138 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2014 Jason Smith
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
 6 | this software and associated documentation files (the "Software"), to deal in
 7 | the Software without restriction, including without limitation the rights to
 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | FlowPlotter
  2 | ===========
  3 | Jason Smith
  4 | 
  5 | 
  6 | Generates visualizations from the output of flow tools such as SiLK.
  7 | 
  8 | --Prerequisites--
  9 | 
 10 | Installed SiLK tools with access to a SiLK data set (https://tools.netsa.cert.org/silk/).
 11 | 
 12 | --Usage--
 13 | 
 14 | rwfilter [filter] | flowplotter.sh [charttype] [independent variable] [dependent variable]
 15 | 
 16 | Currently you must run a SiLK rwfilter command and pipe it to flowplotter.sh and specify various options as arguments.
 17 | The following chart types are currently functional
 18 | 
 19 | 
 20 | #Google Charts
 21 | ==================
 22 | geomap
 23 | - independent variable = Must specify an rwstats compatible field for country type (scc or dcc).
 24 | - dependent variable = Must specify an rwstats compatible value (Records, Packets, Bytes, sIP-Distinct, dIP-Distinct, or Distinct:[field])
 25 | 
 26 | linechart
 27 | - independent variable = Must specify a bin-size that the dependent variable will be calculated by. For example, if you want "Records per Minute", this variable will be 60.
 28 | - dependent variable = Must specify an rwuniq compatible value (Records, Packets, Bytes, sIP-Distinct, dIP-Distinct, or Distinct:[field]).
 29 | 
 30 | treemap
 31 | - independent variable = Must specify an rwstats compatible field.
 32 | - dependent variable = Must specify an rwstats compatible value (Records, Packets, Bytes, sIP-Distinct, dIP-Distinct, or Distinct:[field])
 33 | 
 34 | timeline
 35 | - independent variable = Must specify an rwcut compatible field.
 36 | - dependent variable = Must specify an rwcut compatible field.
 37 | 
 38 | piechart
 39 | - independent variable = Must specify an rwstats compatible field.
 40 | - dependent variable = Must specify an rwstats compatible value (Records, Packets, Bytes, sIP-Distinct, dIP-Distinct, or Distinct:[field])
 41 | 
 42 | barchart
 43 | - independent variable = Must specify an rwstats compatible field.
 44 | - dependent variable = Must specify an rwstats compatible value (Records, Packets, Bytes, sIP-Distinct, dIP-Distinct, or Distinct:[field])
 45 | 
 46 | columnchart
 47 | - independent variable = Must specify an rwstats compatible field.
 48 | - dependent variable = Must specify an rwstats compatible value (Records, Packets, Bytes, sIP-Distinct, dIP-Distinct, or Distinct:[field])
 49 | 
 50 | bubblechart
 51 | - Displays a bytes:packets:records ratio bubblechart for the top 20 [independent variable] for a given filter.
 52 | - independent variable = Must specify an rwstats compatible field.
 53 | 
 54 | ===========================================================================================================================================
 55 | 
 56 | 
 57 | D3 Charts
 58 | =================================================================================
 59 | forceopacity
 60 | - Displays a force directed link graph based in d3. Reads from an autogenerated CSV file.
 61 | - Requires 4 variables {source target value nodelimit}.
 62 | 	- source = anything from --fields in rwstats
 63 | 	- target = anything from --fields in rwstats
 64 | 	- value = anything from --value in rwstats
 65 | 	- nodelimit = anything from --count in rwstats
 66 | - Click and drag a node to "stick it"
 67 | - Hold shiftKey and click a node to turn it red
 68 | - Hold altKey and click a node to turn it green
 69 | 
 70 | ===========================================
 71 | AssetDiscovery
 72 | 
 73 | - Creates and Asset List based on SiLK data
 74 | 
 75 | Usage
 76 |  Use large data sets instead of focused data.
 77 |  Due to the size of the datasets, you might be better of generating a sample file first.
 78 | 
 79 |  Obtain a filter file with a large amount of network data, representative of all hosts on your network
 80 |  $ rwfilter --start-date=2014/02/06 --end-date=2014/02/08 --proto=0- --type=all --pass=sample.rw
 81 |  $ cat sample.rw | ./flowplotter.sh assetdiscovery > assetlist.html
 82 | 
 83 |  Alternatively you can pipe directly to flowplotter as usual.
 84 |  $ rwfilter --start-date=2014/02/06 --end-date=2014/02/08 --proto=0- --type=all --pass=stdout | ./flowplotter.sh assetdiscovery > assetlist.html
 85 | 
 86 |  Also allows for custom thresholding using --count=50 and --threshold=3450012. 
 87 |  Defaults to --percentage=1 if no option is given. See rwstats for more detail on those options.
 88 |  $ rwfilter --start-date=2014/02/06 --end-date=2014/02/08 --proto=0- --type=all --pass=stdout | ./flowplotter.sh assetdiscovery --count=50 > assetlist.html
 89 | 
 90 | inspired by http://mbostock.github.io/d3/talk/20111018/tree.html
 91 | 
 92 | 
 93 | --Google Chart Examples--
 94 | =========================
 95 | 
 96 | Generate a geomap of bytes to from all traffic to destination country codes - 
 97 | rwfilter --start-date=2013/12/27 --proto=0- --type=all --pass=stdout | ./flowplotter.sh geomap dcc bytes > geomap.html
 98 | 
 99 | Generate a linechart for all traffic displaying the amount of bytes,records,packets, and distinct sip,dip, and dcc values. per 60 second bins - 
100 | rwfilter --start-date=2013/12/27 --proto=0- --type=all --pass=stdout | ./flowplotter.sh linechart 60 distinct:sip,distinct:dip,distinct:dcc,records,bytes,packets > linechart.html
101 | 
102 | Generate a treemap that shows the destination IP addresses (NOT in the 192.168.1.0/24 range) that exhibited the most records consisting of highport-highport communications - 
103 | rwfilter --start-date=2013/12/27 --sport=1025- --dport=1025- --not-daddress=192.168.1.0/24 --proto=0- --type=all --pass=stdout | ./flowplotter.sh treemap dip records > treemap.html
104 | 
105 | Generate a timeline showing devices communicating with non-local and non-US hosts
106 | rwfilter --start-date=2013/12/27 --proto=0- --type=out,outweb --dcc=us,-- --fail=stdout | ./flowplotter.sh timeline sip dip > timeline.html
107 | 
108 | Generate a piechart that shows the destination IP addresses (NOT in the 192.168.1.0/24 range) that exhibited the most records consisting of highport-highport communications -
109 | rwfilter --start-date=2013/12/27 --sport=1025- --dport=1025- --not-daddress=192.168.1.0/24 --proto=0- --type=all --pass=stdout | ./flowplotter.sh piechart dip bytes > piechart.html
110 | 
111 | Generate a barchart that shows the destination IP addresses (NOT in the 192.168.1.0/24 range) that exhibited the most records consisting of highport-highport communications -
112 | rwfilter --start-date=2013/12/27 --sport=1025- --dport=1025- --not-daddress=192.168.1.0/24 --proto=0- --type=all --pass=stdout | ./flowplotter.sh barchart dip bytes > barchart.html
113 | 
114 | Generate a columnchart that shows the destination IP addresses (NOT in the 192.168.1.0/24 range) that exhibited the most records consisting of highport-highport communications -
115 | rwfilter --start-date=2013/12/27 --sport=1025- --dport=1025- --not-daddress=192.168.1.0/24 --proto=0- --type=all --pass=stdout | ./flowplotter.sh columnchart dip bytes > columnchart.html
116 | 
117 | Generate a bubblechart that shows the the top 20 destination country codes sorted by a bytes:records:packet ratio - 
118 | rwfilter --start=2014/02/01 --end-date=2014/02/05  --proto=0- --type=all --pass=stdout | ./flowplotter.sh bubblechart dcc > test.html
119 | 
120 | 
121 | --D3 Chart Examples--
122 | =========================
123 | 
124 | Generate a force-directed graph showing two way relationships between IP addresses from rwstats, showing the top 100 sip,dip pairs sorted by the highest distinct dport numbers to each.
125 | rwfilter --start-date=2014/02/06 --proto=0- --type=all --pass=stdout | ./flowplotter.sh forceopacity sip dip distinct:dport 100 > forcetest.html
126 | 
127 | Generate an asset tree based only on data provided. Best to provide well rounded data as seen below. Defaults to assets exhibiting at least 1 percent of the total service traffic.
128 | rwfilter --start-date=2014/02/06 --end-date=2014/02/08 --proto=0- --type=all --pass=stdout | ./flowplotter.sh assetdiscovery > assetlist.html
129 | 


--------------------------------------------------------------------------------
/d3chart/forceopacity.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <meta charset="utf-8">
  3 | <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
  4 | <pre id="csvdata">dataplaceholder
  5 | </pre>
  6 | <style>
  7 |   body {
  8 |     overflow: hidden;
  9 |     margin: 0;
 10 |     font-size: 14px;
 11 |     font-family: "Helvetica Neue", Helvetica;
 12 |   }
 13 |   #header {
 14 |     height: 0;
 15 |     right: 0px;
 16 |     width: 100%;
 17 |     text-align: right;
 18 |     direction: rtl;
 19 |     padding-right: 20px;
 20 |     text-indent: 20px;
 21 |     background: #999;
 22 |     z-index: 1;
 23 |     display: block;
 24 |     font-size: 36px;
 25 |     font-weight: 300;
 26 |     text-shadow: 0 1px 0 #fff;
 27 |   }
 28 |   .hinth {
 29 |     position: absolute;
 30 |     right: 0;
 31 |     width: 100%;
 32 |     font-size: 12px;
 33 |     color: #999;
 34 |     text-align: right;
 35 |     direction: rtl;
 36 |   }
 37 |   #footer {
 38 |     height: 1;
 39 |     left: 0px;
 40 |     width: 100%;
 41 |     text-align: left;
 42 |     padding-left: 20px;
 43 |     background: #999;
 44 |     z-index: 1;
 45 |     display: block;
 46 |     font-size: 36px;
 47 |     font-weight: 300;
 48 |     text-shadow: 0 1px 0 #fff;
 49 |   }
 50 |   .hintf {
 51 |     position: absolute;
 52 |     left: 0;
 53 |     width: 100%;
 54 |     font-size: 12px;
 55 |     color: #999;
 56 |     padding-left: 20px;
 57 |     text-align: left;
 58 |   }
 59 |   #csvdata {
 60 |     display: none;
 61 |   }
 62 |   #parsed {
 63 |     display: none;
 64 |   }
 65 |   path.link {
 66 |     fill: none;
 67 |     stroke: #666;
 68 |     stroke-width: 1.5px;
 69 |   }
 70 |   path.link.twofive {
 71 |     opacity: 0.25;
 72 |   }
 73 |   path.link.fivezero {
 74 |     opacity: 0.50;
 75 |   }
 76 |   path.link.sevenfive {
 77 |     opacity: 0.75;
 78 |   }
 79 |   path.link.onezerozero {
 80 |     opacity: 1.0;
 81 |   }
 82 |   circle {
 83 |     fill: #ccc;
 84 |     stroke: #fff;
 85 |     stroke-width: 1.5px;
 86 |     cursor: crosshair;
 87 |   }
 88 |   text {
 89 |     fill: #000;
 90 |     font: 10px sans-serif;
 91 |     pointer-events: none;
 92 |   }
 93 | </style>
 94 | 
 95 | <body>
 96 |   <div id="body">
 97 |     <div id="header">
 98 |       Force Directed Link Graph
 99 |       <div class="hinth">Generated by SiLK and FlowPlotter</div>
100 |     </div>
101 |     <div id="footer">
102 |       Instructions
103 |       <div class="hintf">Click to turn swelled blue
104 |         <br />ALTClick to turn green
105 |         <br />SHIFTClick to turn red
106 |         <br />Click+drag nodes to make sticky
107 | 	<br />MouseScroll to zoom
108 | 	<br />Click+drag empty space to pan </div>
109 |     </div>
110 |   </div>
111 |   <div id="parsed"></div>
112 | 
113 |   <script>
114 | 	 //convert CSV to JSON
115 |     var raw = d3.select("#csvdata").text();
116 | 
117 |     var parsed = d3.csv.parse(raw);
118 | 
119 |     d3.select("#parsed").text(JSON.stringify(parsed));
120 |     var links = JSON.parse(document.getElementById('parsed').innerHTML);
121 |      
122 | 	 // get the data
123 |     var nodes = {};
124 | 
125 |      // Compute the distinct nodes from the links.
126 |     links.forEach(function(link) {
127 |       link.source = nodes[link.source] ||
128 |         (nodes[link.source] = {
129 |         name: link.source
130 |       });
131 |       link.target = nodes[link.target] ||
132 |         (nodes[link.target] = {
133 |         name: link.target
134 |       });
135 |       link.value = +link.value;
136 |     });
137 | 
138 |     var width = 1960,
139 |       height = 1500;
140 | 
141 |     var force = d3.layout.force()
142 |       .nodes(d3.values(nodes))
143 |       .links(links)
144 |       .size([width, height])
145 |       .linkDistance(60)
146 |       .charge(-700)
147 | 	  .gravity(.15)
148 |       .on("tick", tick)
149 |       .start();
150 | 
151 |      // Set the range
152 |     var v = d3.scale.linear().range([0, 100]);
153 | 
154 |      // Scale the range of the data
155 |     v.domain([0, d3.max(links, function(d) {
156 |       return d.value;
157 |     })]);
158 | 
159 |      // assign a type per value to encode opacity
160 |     links.forEach(function(link) {
161 |       if (v(link.value) <= 25) {
162 |         link.type = "twofive";
163 |       } else if (v(link.value) <= 50 && v(link.value) > 25) {
164 |         link.type = "fivezero";
165 |       } else if (v(link.value) <= 75 && v(link.value) > 50) {
166 |         link.type = "sevenfive";
167 |       } else if (v(link.value) <= 100 && v(link.value) > 75) {
168 |         link.type = "onezerozero";
169 |       }
170 |     });
171 | 
172 |     var vis = d3.select("#body")
173 |       .append("svg:svg")
174 |       .attr("width", width)
175 |       .attr("height", height)
176 |       .attr("pointer-events", "all")
177 |       .append('svg:g')
178 |       .call(d3.behavior.zoom().on("zoom", redraw)).on("dblclick.zoom", null)
179 |       .append('svg:g');
180 | 
181 |     var svg = vis
182 | 
183 |      vis.append('svg:rect')
184 |       .attr('width', width)
185 |       .attr('height', height)
186 |       .attr('fill', 'white');
187 | 
188 |     function redraw() {
189 |       console.log("here", d3.event.translate, d3.event.scale);
190 |       vis.attr("transform",
191 |         "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")");
192 |     }
193 | 
194 |      // build the arrow.
195 |     svg.append("svg:defs").selectAll("marker")
196 |       .data(["end"]) // Different link/path types can be defined here
197 |     .enter().append("svg:marker") // This section adds in the arrows
198 |     .attr("id", String)
199 |       .attr("viewBox", "0 -5 10 10")
200 |       .attr("refX", 15)
201 |       .attr("refY", -.15)
202 |       .attr("markerWidth", 6)
203 |       .attr("markerHeight", 6)
204 |       .attr("orient", "auto")
205 |       .append("svg:path")
206 |       .attr("d", "M0,-5L10,0L0,5");
207 | 
208 |      // add the links and the arrows
209 |     var path = svg.append("svg:g").selectAll("path")
210 |       .data(force.links())
211 |       .enter().append("svg:path")
212 |       .attr("class", function(d) {
213 |         return "link " + d.type;
214 |       })
215 |       .attr("marker-end", "url(#end)");
216 | 
217 |      // define the nodes
218 |     var node = svg.selectAll(".node")
219 |       .data(force.nodes())
220 |       .enter().append("g")
221 |       .attr("class", "node")
222 | 	  .on("mousedown", function() { d3.event.stopPropagation(); })
223 |       .on("click", click)
224 |       .on("dblclick", dblclick)
225 |       .call(force.drag);
226 | 
227 |      // add the nodes
228 |     node.append("circle")
229 |       .attr("r", 5);
230 | 
231 |      // add the text
232 |     node.append("text")
233 |       .attr("x", 12)
234 |       .attr("dy", ".35em")
235 |       .text(function(d) {
236 |         return d.name;
237 |       });
238 | 
239 |      // add the curvy lines
240 |     function tick() {
241 |       path.attr("d", function(d) {
242 |         var dx = d.target.x - d.source.x,
243 |           dy = d.target.y - d.source.y,
244 |           dr = Math.sqrt(dx * dx + dy * dy);
245 |         return "M" +
246 |           d.source.x + "," +
247 |           d.source.y + "A" +
248 |           dr + "," + dr + " 0 0,1 " +
249 |           d.target.x + "," +
250 |           d.target.y;
251 |       });
252 | 
253 |       node
254 |         .attr("transform", function(d) {
255 |           return "translate(" + d.x + "," + d.y + ")";
256 |         });
257 |     }
258 | 
259 |      // action to take on mouse click
260 |     function click(d) {
261 |       d3.select(this).select("text").transition()
262 |         .duration(750)
263 |         .attr("x", 22)
264 |         .style("fill", "steelblue")
265 |         .style("stroke", "lightsteelblue")
266 |         .style("stroke-width", ".5px")
267 |         .style("font", "20px sans-serif");
268 |       d3.select(this).select("circle").transition()
269 |         .duration(750)
270 |         .attr("r", 16)
271 |         .style("fill", "lightsteelblue");
272 |       if (d3.event.shiftKey) {
273 |         d3.select(this).select("circle").transition()
274 |           .style("fill", "red");
275 |         d3.select(this).classed("fixed", d.fixed = true);
276 |         d3.select(this).select("text").transition()
277 |           .style("fill", "red");
278 |         //.remove();
279 |         return;
280 |       }
281 |       if (d3.event.altKey) {
282 |         d3.select(this).select("circle").transition()
283 |           .style("fill", "green");
284 |         d3.select(this).classed("fixed", d.fixed = true);
285 |         d3.select(this).select("text").transition()
286 |           .style("fill", "green");
287 |         //.remove();
288 |         return;
289 |       }
290 |       d3.select(this).classed("fixed", d.fixed = true);
291 |     }
292 | 
293 |      // action to take on mouse double click
294 |     function dblclick(d) {
295 |       d3.select(this).select("circle").transition()
296 |         .duration(750)
297 |         .attr("r", 6)
298 |         .style("fill", "#ccc");
299 |       d3.select(this).select("text").transition()
300 |         .duration(750)
301 |         .attr("x", 12)
302 |         .style("stroke", "none")
303 |         .style("fill", "black")
304 |         .style("stroke", "none")
305 |         .style("font", "10px sans-serif");
306 |       d3.select(this).classed("fixed", d.fixed = false);
307 |     }
308 | 
309 |      //  });
310 |   </script>
311 | 
312 | </body>
313 | 
314 | </html>
315 | 


--------------------------------------------------------------------------------
/d3chart/treeasset.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 |     <html>
  3 |       <head>
  4 |         <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  5 |         <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
  6 |         <style type="text/css">
  7 | 
  8 |     body {
  9 |       background: url(texture-noise.png);
 10 |       overflow: hidden;
 11 |       margin: 0;
 12 |       font-size: 14px;
 13 |       font-family: "Helvetica Neue", Helvetica;
 14 |     }
 15 | 
 16 |     #chart, #header, #footer {
 17 |       position: relative;
 18 |       top: 0;
 19 |     }
 20 | 
 21 |     #header, #footer {
 22 |       z-index: 1;
 23 |       display: block;
 24 |       font-size: 36px;
 25 |       font-weight: 300;
 26 |       text-shadow: 0 1px 0 #fff;
 27 |     }
 28 | 
 29 |     #header.inverted, #footer.inverted {
 30 |       color: #fff;
 31 |       text-shadow: 0 1px 4px #000;
 32 |     }
 33 | 
 34 |     #header {
 35 |       top: 80px;
 36 |       left: 140px;
 37 |       width: 1000px;
 38 |     }
 39 | 
 40 |     #footer {
 41 |       top: 0px;
 42 |       right: 0px;
 43 |       width:100%;
 44 |       text-align: right;
 45 |       direction:rtl;
 46 |       padding-right:20px;
 47 |       text-indent: 20px;
 48 |       background:#999;
 49 |     }
 50 | 
 51 |     rect {
 52 |       fill: none;
 53 |       pointer-events: all;
 54 |     }
 55 | 
 56 |     pre {
 57 |       font-size: 18px;
 58 |     }
 59 | 
 60 |     line {
 61 |       stroke: #000;
 62 |       stroke-width: 1.5px;
 63 |     }
 64 | 
 65 |     .string, .regexp {
 66 |       color: #f39;
 67 |     }
 68 | 
 69 |     .keyword {
 70 |       color: #00c;
 71 |     }
 72 | 
 73 |     .comment {
 74 |       color: #777;
 75 |       font-style: oblique;
 76 |     }
 77 | 
 78 |     .number {
 79 |       color: #369;
 80 |     }
 81 | 
 82 |     .class, .special {
 83 |       color: #1181B8;
 84 |     }
 85 | 
 86 |     a:link, a:visited {
 87 |       color: #000;
 88 |       text-decoration: none;
 89 |     }
 90 | 
 91 |     a:hover {
 92 |       color: #666;
 93 |     }
 94 | 
 95 |     .hint {
 96 |       position: absolute;
 97 |       right: 0;
 98 |       width: 1280px;
 99 |       font-size: 12px;
100 |       color: #999;
101 |         text-align: right;
102 |       direction:rtl;
103 |       padding-right:20px;
104 |       text-indent: 20px;
105 |     }
106 | 
107 |     .node circle {
108 |       cursor: pointer;
109 |       fill: #fff;
110 |       stroke: steelblue;
111 |       stroke-width: 1.5px;
112 |     }
113 | 
114 |     .node text {
115 |       font-size: 14px;
116 |     }
117 | 
118 |     path.link {
119 |       fill: none;
120 |       stroke: #ccc;
121 |       stroke-width: 1.5px;
122 |     }
123 | 
124 |         </style>
125 |       </head>
126 |       <body>
127 |         <div id="body">
128 |           <div id="footer">
129 |             Network Asset Tree
130 |             <div class="hint">Generated by SiLK and FlowPlotter - Clicks nodes to interact </div>
131 |           </div>
132 |         </div>
133 |     <script type="text/javascript">
134 | 
135 | dataplaceholder
136 | 
137 | var m = [20, 120, 20, 120],
138 |     w = 1280 - m[1] - m[3],
139 |     h = 800 - m[0] - m[2],
140 |     i = 0,
141 |     root;
142 | 
143 | var tree = d3.layout.tree()
144 |     .size([h, w]);
145 | 
146 | var diagonal = d3.svg.diagonal()
147 |     .projection(function(d) { return [d.y, d.x]; });
148 | 
149 | var vis = d3.select("#body").append("svg:svg")
150 |     .attr("width", w + m[1] + m[3])
151 |     .attr("height", h + m[0] + m[2])
152 |   .append("svg:g")
153 |     .attr("transform", "translate(" + m[3] + "," + m[0] + ")");
154 | 
155 | //d3.json("flare.json", function(json) {
156 | root = JSON.parse( myjson );
157 |   //root = json;
158 |   root.x0 = h / 2;
159 |   root.y0 = 0;
160 | 
161 | 
162 |   // Initialize the display to show blank 1st level child nodes
163 |   for (var i = 0; i < root.children.length; i++) {
164 |     toggle(root.children[i]);
165 | }
166 | 
167 | 
168 | 
169 | 
170 |   update(root);
171 | //});
172 | 
173 | function update(source) {
174 |   var duration = d3.event && d3.event.altKey ? 5000 : 500;
175 | 
176 |   // Compute the new tree layout.
177 |   var nodes = tree.nodes(root).reverse();
178 | 
179 |   // Normalize for fixed-depth.
180 |   nodes.forEach(function(d) { d.y = d.depth * 180; });
181 | 
182 |   // Update the nodes…
183 |   var node = vis.selectAll("g.node")
184 |       .data(nodes, function(d) { return d.id || (d.id = ++i); });
185 | 
186 |   // Enter any new nodes at the parent's previous position.
187 |   var nodeEnter = node.enter().append("svg:g")
188 |       .attr("class", "node")
189 |       .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
190 |       .on("click", function(d) { toggle(d); update(d); });
191 | 
192 |   nodeEnter.append("svg:circle")
193 |       .attr("r", 1e-6)
194 |       .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
195 | 
196 |   nodeEnter.append("svg:text")
197 |       .attr("x", function(d) { return d.children || d._children ? -10 : 10; })
198 |       .attr("dy", ".35em")
199 |       .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
200 |       .text(function(d) { return d.name; })
201 |       .style("fill-opacity", 1e-6);
202 | 
203 |   // Transition nodes to their new position.
204 |   var nodeUpdate = node.transition()
205 |       .duration(duration)
206 |       .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });
207 | 
208 |   nodeUpdate.select("circle")
209 |       .attr("r", 4.5)
210 |       .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
211 | 
212 |   nodeUpdate.select("text")
213 |       .style("fill-opacity", 1);
214 | 
215 |   // Transition exiting nodes to the parent's new position.
216 |   var nodeExit = node.exit().transition()
217 |       .duration(duration)
218 |       .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
219 |       .remove();
220 | 
221 |   nodeExit.select("circle")
222 |       .attr("r", 1e-6);
223 | 
224 |   nodeExit.select("text")
225 |       .style("fill-opacity", 1e-6);
226 | 
227 |   // Update the links…
228 |   var link = vis.selectAll("path.link")
229 |       .data(tree.links(nodes), function(d) { return d.target.id; });
230 | 
231 |   // Enter any new links at the parent's previous position.
232 |   link.enter().insert("svg:path", "g")
233 |       .attr("class", "link")
234 |       .attr("d", function(d) {
235 |         var o = {x: source.x0, y: source.y0};
236 |         return diagonal({source: o, target: o});
237 |       })
238 |     .transition()
239 |       .duration(duration)
240 |       .attr("d", diagonal);
241 | 
242 |   // Transition links to their new position.
243 |   link.transition()
244 |       .duration(duration)
245 |       .attr("d", diagonal);
246 | 
247 |   // Transition exiting nodes to the parent's new position.
248 |   link.exit().transition()
249 |       .duration(duration)
250 |       .attr("d", function(d) {
251 |         var o = {x: source.x, y: source.y};
252 |         return diagonal({source: o, target: o});
253 |       })
254 |       .remove();
255 | 
256 |   // Stash the old positions for transition.
257 |   nodes.forEach(function(d) {
258 |     d.x0 = d.x;
259 |     d.y0 = d.y;
260 |   });
261 | }
262 | 
263 | // Toggle children.
264 | function toggle(d) {
265 |   if (d.children) {
266 |     d._children = d.children;
267 |     d.children = null;
268 |   } else {
269 |     d.children = d._children;
270 |     d._children = null;
271 |   }
272 | }
273 | 
274 |     </script>
275 |   </body>
276 | </html>
277 | 


--------------------------------------------------------------------------------
/flowplotter.sh:
--------------------------------------------------------------------------------
  1 | #!/bin/bash
  2 | 
  3 | #FlowPlotter is a script that allows for the "easy" integration of SiLK results into various Google Visualization Chart APIs.
  4 | 
  5 | #GEOMAPGEOMAPGEOMAPGEOMAPGEOMAPGEOMAPGEOMAPGEOMAPGEOMAPGEOMAPGEOMAPGEOMAPGEOMAPGEOMAPGEOMAPGEOMAP
  6 | geomap () {
  7 | #Variable Creation
  8 | #independent variable is a string
  9 | #value is a string
 10 | title="$1 by $2"
 11 | independent="$1"
 12 | value="$2"
 13 | graphtitle="$independent by $value"
 14 | ######################
 15 | rwstats --top --count=275 --fields=$independent --value=$value --delimited=, |\
 16 |  grep ","| grep -v -- "--"| grep -v "a1" | grep -v "a2" | grep -v "us"| grep -v "o1" | cut -d "," -f1,2 |\
 17 |  sed "1 s/\([A-Za-z]\{1,20\}\),\([A-Za-z]\{1,20\}\)/['\1', '\2'],/g"|sed "s/\([a-z]\{2\}\),\([0-9]\{1,50\}\)/['\1', \2],/g"|sed '$s/,$//' > temp.test
 18 | 
 19 | sed '/dataplaceholder/{
 20 |     s/dataplaceholder//g
 21 |     r temp.test
 22 | }' googlechart/geomap.html
 23 | rm temp.test
 24 | }
 25 | #GEOMAPGEOMAPGEOMAPGEOMAPGEOMAPGEOMAPGEOMAPGEOMAPGEOMAPGEOMAPGEOMAPGEOMAPGEOMAPGEOMAPGEOMAPGEOMAP
 26 | 
 27 | 
 28 | 
 29 | #linechartlinechartlinechartlinechartlinechartlinechartlinechartlinechartlinechartlinechartlinechart
 30 | linechart () {
 31 | #Variable Creation
 32 | #independent variable is a string
 33 | #value is an string
 34 | title="$1 by $2"
 35 | resolution="$1"
 36 | value="$2"
 37 | number_of_values=$(echo $(( $(grep -o ',' <<<"$value" | grep -c .) + 2)))
 38 | valuelist=$(seq $number_of_values | tr '\n' ',' | sed 's/,$//g')
 39 | 
 40 | if [ "$1" -eq "$1" ] 2>/dev/null; then
 41 |   resolution="$1"
 42 | else
 43 |   echo "The resolution you selected is invalid. Your first argument to linechart should be an integer value in seconds"
 44 |   exit
 45 | fi
 46 | 
 47 | graphtitle="$valuename per $resolution second bins"
 48 | 
 49 | ##########################
 50 | #rwcount --bin-size=$resolution --delimited=, | cut -d "," -f1,$value|\
 51 | rwuniq --fields=stime --bin-time=$resolution --values=$value --delimited=, --no-titles --sort-output | cut -d "," -f$valuelist |\
 52 | sed "s/^\(.\{10\}T.\{8\}\)\,\(.*\)/['\1',\2],/g" | sed '$s/,$//' | sed "1 i\[stime,$value]" | sed "1 s/\[/\['/" | sed "1 s/,/','/g" | sed "1 s/\]/'\],/" > temp.test
 53 | 
 54 | 
 55 | #sed "s/\(.*\),\(.*\)/['\1', \2],/g"|sed '$s/,$//'| sed "s/, \([A-Za-z].*\)],/, '\1'],/g" > temp.test
 56 | 
 57 | sed '/dataplaceholder/{
 58 |     s/dataplaceholder//g
 59 |     r temp.test
 60 | }' googlechart/linechart.html | sed "s/titleplaceholder/${graphtitle}/g"
 61 | 
 62 | rm temp.test
 63 | }
 64 | #linechartlinechartlinechartlinechartlinechartlinechartlinechartlinechartlinechartlinechartlinechart
 65 | 
 66 | 
 67 | 
 68 | #treemaptreemaptreemaptreemaptreemaptreemaptreemaptreemaptreemaptreemaptreemaptreemaptreemaptreemap
 69 | treemap () {
 70 | #Variable Creation
 71 | #independent variable is a string
 72 | #value is a string
 73 | title="$1 by $2"
 74 | independent="$1"
 75 | value="$2"
 76 | graphtitle="$independent by $value"
 77 | #####################
 78 | echo "['$independent', 'parent', '$value']," > temp.test
 79 | echo "['$independent', null, 0]," >> temp.test
 80 | rwstats --fields=$independent --top --count=20  --no-titles --delimited=, --value=$value |\
 81 | cut -d "," -f1,2 |\
 82 | grep ,| sed "s/\(.*\),\(.*\)/['\1', '$independent', \2],/g"|sed '$s/,$//'| sed "s/, \([A-Za-z].*\)],/, '\1'],/g" | grep "," >> temp.test
 83 | 
 84 | sed '/dataplaceholder/{
 85 |     s/dataplaceholder//g
 86 |     r temp.test
 87 | }' googlechart/treemap.html | sed "s/titleplaceholder/${graphtitle}/g"
 88 | 
 89 | rm temp.test
 90 | }
 91 | #treemaptreemaptreemaptreemaptreemaptreemaptreemaptreemaptreemaptreemaptreemaptreemaptreemaptreemap
 92 | 
 93 | 
 94 | #timelinetimelinetimelinetimelinetimelinetimelinetimelinetimelinetimelinetimelinetimeline
 95 | timeline () {
 96 | #Variable Creation
 97 | #independent variable is a string
 98 | #dependent variable is a string
 99 | title='Suspicious Server Traffic'
100 | title="$1 by $2"
101 | independent="$1"
102 | dependent="$2"
103 | if [ -z "${independent}" ]; then
104 | independent="sip"
105 | fi
106 | if [ -z "${dependent}" ]; then
107 | dependent="dip"
108 | fi
109 | graphtitle="$independent by $dependent over time"
110 | ##############################
111 | rwsort --fields=stime | rwgroup --delta-field=stime --delta-value=2 --summarize | rwsort --fields=sip | rwcut --fields=$independent,$dependent,stime,etime --delimited=, --no-titles |\
112 | sed "s/\(.*\),\(.*\),\(.*\),\(.*\)/['\1', '\2', new Date(\3), new Date (\4)],/g"|sed '$s/,$//'| \
113 | sed "s/\([0-9]\{4\}\)\/\([0-9]\{2\}\)\/\([0-9]\{2\}\)T\([0-9]\{2\}\):\([0-9]\{2\}\):\([0-9]\{2\}\)\.[0-9]\{3\}/\1, \2, \3, \4, \5, \6/g" > temp.test
114 | 
115 | sed '/dataplaceholder/{
116 |     s/dataplaceholder//g
117 |     r temp.test
118 | }' googlechart/timeline.html | sed "s/titleplaceholder/${graphtitle}/g"
119 | 
120 | rm temp.test
121 | }
122 | #timelinetimelinetimelinetimelinetimelinetimelinetimelinetimelinetimelinetimelinetimeline
123 | 
124 | 
125 | #piechartpiechartpiechartpiechartpiechartpiechartpiechartpiechartpiechartpiechartpiechartpiechartpiechartpiechart
126 | piechart () {
127 | #Variable Creation
128 | #independent variable is a string
129 | #value is a string
130 | title="$1 by $2"
131 | independent="$1"
132 | value="$2"
133 | graphtitle="$independent by $value"
134 | #####################
135 | echo "['$independent', '$value']," > temp.test
136 | rwstats --fields=$independent --top --count=12  --no-titles --delimited=, --value=$value |\
137 | cut -d "," -f1,2 |\
138 | grep ,| sed "s/\(.*\),\(.*\)/['\1', \2],/g"|sed '$s/,$//'| sed "s/, \([A-Za-z].*\)],/, '\1'],/g" | grep "," >> temp.test
139 | 
140 | sed '/dataplaceholder/{
141 |     s/dataplaceholder//g
142 |     r temp.test
143 | }' googlechart/piechart.html | sed "s/titleplaceholder/${graphtitle}/g"
144 | 
145 | rm temp.test
146 | }
147 | #piechartpiechartpiechartpiechartpiechartpiechartpiechartpiechartpiechartpiechartpiechartpiechartpiechartpiechart
148 | 
149 | 
150 | #barchartbarchartbarchartbarchartbarchartbarchartbarchartbarchartbarchartbarchartbarchartbarchartbarchartbarchart
151 | barchart () {
152 | #Variable Creation
153 | #independent variable is a string
154 | #value is an string
155 | title="$1 by $2"
156 | independent="$1"
157 | value="$2"
158 | graphtitle="$independent by $value"
159 | #####################
160 | echo "['$independent', '$value']," > temp.test
161 | rwstats --fields=$independent --top --count=12  --no-titles --delimited=, --value=$value |\
162 | cut -d "," -f1,2 |\
163 | grep ,| sed "s/\(.*\),\(.*\)/['\1', \2],/g"|sed '$s/,$//'| sed "s/, \([A-Za-z].*\)],/, '\1'],/g" | grep "," >> temp.test
164 | 
165 | sed '/dataplaceholder/{
166 |     s/dataplaceholder//g
167 |     r temp.test
168 | }' googlechart/barchart.html | sed "s/titleplaceholder/${graphtitle}/g"
169 | 
170 | rm temp.test
171 | }
172 | #barchartbarchartbarchartbarchartbarchartbarchartbarchartbarchartbarchartbarchartbarchartbarchartbarchartbarchart
173 | 
174 | 
175 | #columnchartcolumnchartcolumnchartcolumnchartcolumnchartcolumnchartcolumnchartcolumnchartcolumnchartcolumnchartcolumnchartcolumnchartcolumnchartcolumnchart
176 | columnchart () {
177 | #Variable Creation
178 | #independent variable is a string
179 | #value is an string
180 | title="$1 by $2"
181 | independent="$1"
182 | value="$2"
183 | graphtitle="$independent by $value"
184 | #####################
185 | echo "['$independent', '$value']," > temp.test
186 | rwstats --fields=$independent --top --count=12  --no-titles --delimited=, --value=$value |\
187 | cut -d "," -f1,2 |\
188 | grep ,| sed "s/\(.*\),\(.*\)/['\1', \2],/g"|sed '$s/,$//'| sed "s/, \([A-Za-z].*\)],/, '\1'],/g" | grep "," >> temp.test
189 | 
190 | sed '/dataplaceholder/{
191 |     s/dataplaceholder//g
192 |     r temp.test
193 | }' googlechart/columnchart.html | sed "s/titleplaceholder/${graphtitle}/g"
194 | 
195 | rm temp.test
196 | }
197 | #columnchartcolumnchartcolumnchartcolumnchartcolumnchartcolumnchartcolumnchartcolumnchartcolumnchartcolumnchartcolumnchartcolumnchartcolumnchartcolumnchart
198 | 
199 | 
200 | 
201 | #tablecharttablecharttablecharttablecharttablecharttablecharttablecharttablecharttablecharttablecharttablecharttablecharttablecharttablecharttablecharttablecharttablecharttablecharttablecharttablecharttablecharttablecharttablechart
202 | tablechart () {
203 | #echo "['sTime', 'sIP', 'sPort', 'scc', 'dIP', 'dPort', 'dcc', 'protocol', 'initialFlags', 'flags', 'type', 'sensor', 'eTime']," > temp.test
204 | rwcut --fields=stime,sip,sport,scc,dip,dport,dcc,pro,initialF,flags,type,sen,etime --delimited=, --no-titles| head -1000 |\
205 |  perl -p -i -e "s/(.*?)\,(.*?)\,(.*?)\,(.*?)\,(.*?)\,(.*?)\,(.*?)\,(.*?)\,(.*?)\,(.*?)\,(.*?)\,(.*?)\,(.*?)$/['\$1', '\$2', '\$3', '\$4', '\$5', '\$6', \$7, '\$8', '\$9', '\$10', '\$11', '\$12', '\$13'],/" |\
206 |  sed 's/\-\-//g'| sed '$s/,$//' >>temp.test
207 | 
208 |  sed '/dataplaceholder/{
209 |     s/dataplaceholder//g
210 |     r temp.test
211 | }' googlechart/tablechart.html | sed "s/titleplaceholder/${graphtitle}/g"
212 | 
213 | rm temp.test
214 | }
215 | #tablecharttablecharttablecharttablecharttablecharttablecharttablecharttablecharttablecharttablecharttablecharttablecharttablecharttablecharttablecharttablecharttablecharttablecharttablecharttablecharttablecharttablecharttablechart
216 | 
217 | 
218 | 
219 | #bubblechartbubblechartbubblechartbubblechartbubblechartbubblechartbubblechartbubblechartbubblechartbubblechartbubblechartbubblechartbubblechartbubblechart
220 | bubblechart () {
221 | #Variable Creation
222 | #independent variable is a string
223 | #value is an string
224 | title="$1 by $2"
225 | independent="$1"
226 | graphtitle="Byte:Packet:Record for top 20 $independent"
227 | #####################
228 | #echo "['$independent', '$value']," > temp.test
229 | 
230 | rwstats --fields=$independent --value=bytes,records,packets --count=20 --delimited=" " | awk '{print $1,$4,$2,$1,$3}'| grep -v ":"|sed 's/ /,/g' |\
231 | sed "s/\([a-zA-Z]\{1,20\}\),\([a-zA-Z]\{1,20\}\),\([a-zA-Z]\{1,20\}\),\([a-zA-Z]\{1,20\}\),\([a-zA-Z]\{1,20\}\)/['\1', '\2', '\3', '\4', '\5'],/g" |\
232 | sed "s/\(.\{1,20\}\),\([0-9]\{1,20\}\),\([0-9]\{1,20\}\),\(.\{1,20\}\),\(.\{1,20\}\)/['\1', \2, \3, '\4', \5],/g" | sed '$s/,$//' >> temp.test
233 | 
234 | sed '/dataplaceholder/{
235 |     s/dataplaceholder//g
236 |     r temp.test
237 | }' googlechart/bubblechart.html | sed "s/titleplaceholder/${graphtitle}/g"
238 | 
239 | rm temp.test
240 | }
241 | #bubblechartbubblechartbubblechartbubblechartbubblechartbubblechartbubblechartbubblechartbubblechartbubblechartbubblechartbubblechartbubblechartbubblechart
242 | 
243 | 
244 | 
245 | #forceopacityforceopacityforceopacityforceopacityforceopacityforceopacityforceopacityforceopacityforceopacityforceopacityforceopacityforceopacityforceopacityforceopacity
246 | forceopacity () {
247 | #Variable Creation
248 | #source variable is a string
249 | #target variable is a string
250 | #value is an string
251 | title="$1 by $2"
252 | source="$1"
253 | if [ -z "$source" ]; then
254 | source="sip"
255 | echo "No source variable provided. Defaulting to sip"
256 | fi
257 | target="$2"
258 | if [ -z "$target" ]; then
259 | target="dip"
260 | echo "No target variable provided. Defaulting to dip"
261 | fi
262 | value="$3"
263 | if [ -z "$value" ]; then
264 | value="bytes"
265 | echo "No value variable provided. Defaulting to bytes"
266 | fi
267 | count="$4"
268 | if [ -z "$count" ]; then
269 | count="50"
270 | echo "No count variable provided. Defaulting to 50"
271 | fi
272 | graphtitle="source-target-value"
273 | #####################
274 | rwstats --top --count=$count --fields=$source,$target --value=$value --delimited=, --no-titles | cut -d ',' -f1,2,3 | sed '1 s/^/source,target,value\n/' >> temp.test
275 | 
276 | sed '/dataplaceholder/{
277 |     s/dataplaceholder//g
278 |     r temp.test
279 | }' d3chart/forceopacity.html | sed "s/titleplaceholder/${graphtitle}/g"
280 | 
281 | rm temp.test
282 | }
283 | #forceopacityforceopacityforceopacityforceopacityforceopacityforceopacityforceopacityforceopacityforceopacityforceopacityforceopacityforceopacityforceopacityforceopacity
284 | 
285 | 
286 | 
287 | #assetdiscoveryassetdiscoveryassetdiscoveryassetdiscoveryassetdiscoveryassetdiscoveryassetdiscoveryassetdiscoveryassetdiscoveryassetdiscoveryassetdiscoveryassetdiscoveryassetdiscoveryassetdiscovery
288 | assetdiscovery () {
289 | #Variable Creation
290 | #value is a string
291 | 
292 | rwfilter stdin --proto=0- --pass=stdout > test.rw
293 | 
294 | scripts/./AssetDiscoveryTree.sh test.rw $1
295 | rm test.rw
296 | }
297 | #assetdiscoveryassetdiscoveryassetdiscoveryassetdiscoveryassetdiscoveryassetdiscoveryassetdiscoveryassetdiscoveryassetdiscoveryassetdiscoveryassetdiscoveryassetdiscoveryassetdiscoveryassetdiscovery
298 | 
299 | #Function Initiation
300 | 
301 | if [ "$1" == "-h" ]; then
302 |   cat README.md
303 |   echo -e "\n"
304 |   exit 0
305 | fi
306 | 
307 | if [ "$1" != "geomap" -a "$1" != "linechart"  -a "$1" != "treemap"  -a "$1" != "timeline"  -a "$1" != "piechart"  -a "$1" != "barchart"  -a "$1" != "columnchart" -a "$1" != "bubblechart" -a "$1" != "forceopacity" -a "$1" != "assetdiscovery" ]; then
308 | echo ""
309 | echo "ERROR: You must specify a supported chart type. "
310 | echo ""
311 | echo "The only supported chart types for flowplotter are:"
312 | echo "./flowplotter.sh geomap [field] [value]"
313 | echo "./flowplotter.sh linechart [bin size in seconds] [value]"
314 | echo "./flowplotter.sh treemap [field] [value]"
315 | echo "./flowplotter.sh timeline [field] [field]"
316 | echo "./flowplotter.sh piechart [field] [value]"
317 | echo "./flowplotter.sh barchart [field] [value]"
318 | echo "./flowplotter.sh columnchart [field] [value]"
319 | echo "./flowplotter.sh bubblechart [value]"
320 | echo "./flowplotter.sh forceopacity [field] [field] [value]"
321 | echo "./flowplotter.sh assetdiscovery [threshold]"
322 | echo ""
323 | echo "flowplotter --help"
324 | echo "./flowplotter -h"
325 | echo ""
326 | exit 0
327 | fi
328 | 
329 | if [ "$1" = "geomap" ]; then
330 | geomap $2 $3
331 | fi
332 | if [ "$1" = "linechart" ]; then
333 | linechart $2 $3
334 | fi
335 | if [ "$1" = "treemap" ]; then
336 | treemap $2 $3
337 | fi
338 | if [ "$1" = "timeline" ]; then
339 | timeline $2 $3
340 | fi
341 | if [ "$1" = "piechart" ]; then
342 | piechart $2 $3
343 | fi
344 | if [ "$1" = "barchart" ]; then
345 | barchart $2 $3
346 | fi
347 | if [ "$1" = "columnchart" ]; then
348 | columnchart $2 $3
349 | fi
350 | if [ "$1" = "bubblechart" ]; then
351 | bubblechart $2
352 | fi
353 | if [ "$1" = "forceopacity" ]; then
354 | forceopacity $2 $3 $4 $5
355 | fi
356 | if [ "$1" = "assetdiscovery" ]; then
357 | assetdiscovery $2
358 | fi
359 | #if [ "$1" = "tablechart" ]; then
360 | #tablechart $2
361 | #fi
362 | 


--------------------------------------------------------------------------------
/googlechart/barchart.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |   <head>
 3 |     <script type="text/javascript" src="https://www.google.com/jsapi"></script>
 4 |     <script type="text/javascript">
 5 |       google.load("visualization", "1", {packages:["corechart"]});
 6 |       google.setOnLoadCallback(drawChart);
 7 |       function drawChart() {
 8 |         var data = google.visualization.arrayToDataTable([
 9 | 	dataplaceholder
10 |         ]);
11 | 
12 |         var options = {
13 |           title: 'titleplaceholder',
14 | 		  hAxis: {logScale: true}
15 |         };
16 | 
17 |         var chart = new google.visualization.BarChart(document.getElementById('barchart'));
18 |         chart.draw(data, options);
19 |       }
20 |     </script>
21 |   </head>
22 |   <body>
23 |     <div id="barchart" style="width: 100%; height: 100%;"></div>
24 |   </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/googlechart/bubblechart.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |   <head>
 3 |     <script type="text/javascript" src="https://www.google.com/jsapi"></script>
 4 |     <script type="text/javascript">
 5 |       google.load("visualization", "1", {packages:["corechart"]});
 6 |       google.setOnLoadCallback(drawChart);
 7 |       function drawChart() {
 8 |         var data = google.visualization.arrayToDataTable([
 9 | dataplaceholder
10 |         ]);
11 | 
12 |         var options = {
13 |           title: 'titleplaceholder',
14 |           hAxis: {title: 'Packets', logScale: true},
15 |           vAxis: {title: 'Bytes', logScale: true},
16 |           bubble: {textStyle: {fontSize: 10}}
17 |         };
18 | 
19 |         var chart = new google.visualization.BubbleChart(document.getElementById('chart_div'));
20 |         chart.draw(data, options);
21 |       }
22 |     </script>
23 |   </head>
24 |   <body>
25 |     <div id="chart_div" style="width: 100%; height: 100%;"></div>
26 |   </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/googlechart/columnchart.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |   <head>
 3 |     <script type="text/javascript" src="https://www.google.com/jsapi"></script>
 4 |     <script type="text/javascript">
 5 |       google.load("visualization", "1", {packages:["corechart"]});
 6 |       google.setOnLoadCallback(drawChart);
 7 |       function drawChart() {
 8 |         var data = google.visualization.arrayToDataTable([
 9 | 	dataplaceholder
10 |         ]);
11 | 
12 |         var options = {
13 |           title: 'titleplaceholder',
14 | 		  vAxis: {logScale: true}
15 |         };
16 | 
17 |         var chart = new google.visualization.ColumnChart(document.getElementById('columnchart'));
18 |         chart.draw(data, options);
19 |       }
20 |     </script>
21 |   </head>
22 |   <body>
23 |     <div id="columnchart" style="width: 100%; height: 100%;"></div>
24 |   </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/googlechart/geomap.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |   <head>
 3 |     <script type='text/javascript' src='https://www.google.com/jsapi'></script>
 4 |     <script type='text/javascript'>
 5 |      google.load('visualization', '1', {'packages': ['geochart']});
 6 |      google.setOnLoadCallback(drawRegionsMap);
 7 | 
 8 |       function drawRegionsMap() {
 9 |         var data = google.visualization.arrayToDataTable([
10 | dataplaceholder
11 |         ]);
12 | 
13 |         var options = {};
14 | 
15 |         var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
16 |         chart.draw(data, options);
17 |     };
18 |     </script>
19 |   </head>
20 |   <body>
21 |     <div id="chart_div" style="width: 100%; height: 100%;"></div>
22 |   </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/googlechart/histogram.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |   <head>
 3 |     <script type="text/javascript" src="https://www.google.com/jsapi"></script>
 4 |     <script type="text/javascript">
 5 |       google.load("visualization", "1", {packages:["corechart"]});
 6 |       google.setOnLoadCallback(drawChart);
 7 |       function drawChart() {
 8 |         var data = google.visualization.arrayToDataTable([
 9 | dataplaceholder
10 |         var options = {
11 |           title: 'Lengths of dinosaurs, in meters',
12 |           legend: { position: 'none' },
13 |         };
14 | 
15 |         var chart = new google.visualization.Histogram(document.getElementById('chart_div'));
16 |         chart.draw(data, options);
17 |       }
18 |     </script>
19 |   </head>
20 |   <body>
21 |     <div id="chart_div" style="width: 100%; height: 100%;"></div>
22 |   </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/googlechart/linechart.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |   <head>
 3 |     <script type="text/javascript" src="https://www.google.com/jsapi"></script>
 4 |     <script type="text/javascript">
 5 |       google.load("visualization", "1", {packages:["corechart"]});
 6 |       google.setOnLoadCallback(drawChart);
 7 |       function drawChart() {
 8 |         var data = google.visualization.arrayToDataTable([
 9 | 	dataplaceholder
10 |         ]);
11 | 
12 |         var options = {
13 |           title: 'titleplaceholder',
14 | 	  curveType: 'function',
15 | 	  vAxis: {logScale: true}
16 |         };
17 | 
18 |         var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
19 |         chart.draw(data, options);
20 | 		}
21 |     </script>
22 |   </head>
23 |   <body>
24 |     <div id="chart_div" style="width: 100%; height: 100%;"></div>
25 |   </body>
26 | </html>
27 | 


--------------------------------------------------------------------------------
/googlechart/orgchart.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |   <head>
 3 |     <script type='text/javascript' src='https://www.google.com/jsapi'></script>
 4 |     <script type='text/javascript'>
 5 |       google.load('visualization', '1', {packages:['orgchart']});
 6 |       google.setOnLoadCallback(drawChart);
 7 |       function drawChart() {
 8 |         var data = new google.visualization.DataTable();
 9 |         data.addColumn('string', 'Name');
10 |         data.addColumn('string', 'Manager');
11 |         data.addColumn('string', 'ToolTip');
12 |         data.addRows([
13 | dataplaceholder
14 |         ]);
15 |         var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
16 |         chart.draw(data, {allowHtml:true});
17 |       }
18 |     </script>
19 |   </head>
20 | 
21 |   <body>
22 |     <div id='chart_div' style="width: 100%; height: 100%;"></div>
23 |   </body>
24 | </html>
25 | 
26 | 
27 | 


--------------------------------------------------------------------------------
/googlechart/piechart.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |   <head>
 3 |     <script type="text/javascript" src="https://www.google.com/jsapi"></script>
 4 |     <script type="text/javascript">
 5 |       google.load("visualization", "1", {packages:["corechart"]});
 6 |       google.setOnLoadCallback(drawChart);
 7 |       function drawChart() {
 8 |         var data = google.visualization.arrayToDataTable([
 9 | 	dataplaceholder
10 |         ]);
11 | 
12 |         var options = {
13 |           title: 'titleplaceholder',
14 | 		  is3D: false,
15 |         };
16 | 
17 |         var chart = new google.visualization.PieChart(document.getElementById('piechart'));
18 |         chart.draw(data, options);
19 |       }
20 |     </script>
21 |   </head>
22 |   <body>
23 |     <div id="piechart" style="width: 100%; height: 100%;"></div>
24 |   </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/googlechart/tablechart.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |   <head>
 3 |     <script type='text/javascript' src='https://www.google.com/jsapi'></script>
 4 |     <script type='text/javascript'>
 5 |       google.load('visualization', '1', {packages:['table']});
 6 |       google.setOnLoadCallback(drawTable);
 7 |       function drawTable() {
 8 |         var data = new google.visualization.DataTable();
 9 |         data.addColumn('string', 'stime');
10 | 		data.addColumn('string', 'sip');
11 | 		data.addColumn('string', 'sport');
12 | 		data.addColumn('string', 'scc');
13 | 		data.addColumn('string', 'dip');
14 | 		data.addColumn('string', 'dport');
15 | 		data.addColumn('string', 'dcc');
16 | 		data.addColumn('string', 'pro');
17 | 		data.addColumn('string', 'initF');
18 | 		data.addColumn('string', 'flags');
19 | 		data.addColumn('string', 'type');
20 | 		data.addColumn('string', 'sensor');
21 | 		data.addColumn('string', 'etime');
22 |         data.addRows([
23 | dataplaceholder
24 |         ]);
25 | 
26 |         var table = new google.visualization.Table(document.getElementById('table_div'));
27 |         table.draw(data, {showRowNumber: true});
28 |       }
29 |     </script>
30 |   </head>
31 | 
32 |   <body>
33 |     <div id='table_div' style="width: 100%; height: 100%;"></div>
34 |   </body>
35 | </html>
36 | 


--------------------------------------------------------------------------------
/googlechart/timeline.html:
--------------------------------------------------------------------------------
 1 | <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization',
 2 |        'version':'1','packages':['timeline']}]}"></script>
 3 | <script type="text/javascript">
 4 | 
 5 | google.setOnLoadCallback(drawChart);
 6 | function drawChart() {
 7 | 
 8 |   var container = document.getElementById('example3.1');
 9 |   var chart = new google.visualization.Timeline(container);
10 | 
11 |   var dataTable = new google.visualization.DataTable();
12 |   dataTable.addColumn({ type: 'string', id: 'Position' });
13 |   dataTable.addColumn({ type: 'string', id: 'Name' });
14 |   dataTable.addColumn({ type: 'date', id: 'Start' });
15 |   dataTable.addColumn({ type: 'date', id: 'End' });
16 |   dataTable.addRows([
17 | dataplaceholder
18 | ]);
19 | 
20 |   chart.draw(dataTable);
21 | }
22 | </script>
23 | 
24 | <div id="example3.1" style="width: 100%; height: 100%;"></div>
25 | 


--------------------------------------------------------------------------------
/googlechart/treemap.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |   <head>
 3 |     <script type="text/javascript" src="https://www.google.com/jsapi"></script>
 4 |     <script type="text/javascript">
 5 |       google.load("visualization", "1", {packages:["treemap"]});
 6 |       google.setOnLoadCallback(drawChart);
 7 |       function drawChart() {
 8 |         // Create and populate the data table.
 9 |         var data = google.visualization.arrayToDataTable([
10 | 	dataplaceholder
11 |         ]);
12 | 
13 |         // Create and draw the visualization.
14 |        var tree = new google.visualization.TreeMap(document.getElementById('treemap_static_tooltip'));
15 | 
16 | 	var options = {
17 |  	 minColor: '#e7711c',
18 |     	 midColor: '#fff',
19 |     	 maxColor: '#4374e0',
20 |     	 showScale: true,
21 |     	 generateTooltip: showFullTooltip
22 |   	};
23 |   tree.draw(data, options);
24 | 	function showFullTooltip(row) {
25 |     	   return '<div style="background:#fd9; padding:10px; border-style:solid">' + data.getColumnLabel(0) + ' : ' + data.getValue(row, 0) + '<br>' + 
26 | 		   data.getColumnLabel(2) + ' : ' + data.getValue(row, 2) + ' </div>';
27 |   	}
28 |   }
29 |     </script>
30 |   </head>
31 | 
32 |   <body>
33 |     <div id="treemap_static_tooltip" style="width: 100%; height: 100%;"></div>
34 |   </body>
35 | </html>
36 | 


--------------------------------------------------------------------------------
/scripts/AssetDiscoveryTree.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/bash
 2 | 
 3 | #Generates an Asset List using a pre-existing filter file.
 4 | #Based on a combination of works from Applied Network Security Monitoring and http://www.sei.cmu.edu/reports/12tr006.pdf
 5 | 
 6 | #Usage
 7 | # Obtain a filter file with a large amount of network data, representative of all hosts on your network
 8 | # $ rwfilter --start-date=2014/05/13 --proto=0- --type=all --pass=sample.rw
 9 | 
10 | # Run AssetDiscoveryTree.sh against the file and send to an output html file
11 | # $ ./AssetDiscoveryTree.sh /home/jason/sample.rw > /home/jason/assetlist.html
12 | 
13 | # By default, you will be generating data for servers making up greater than 1 percent of all "server" traffic for a given service.
14 | # If instead you want a static number threshold, you can specify --count=50 to display the top 50 talkers for a service.
15 | # $ ./AssetDiscoveryTree.sh /home/jason/sample.rw --count=50 > /home/jason/assetlistTOP50.html
16 | 
17 | # If instead you want to threshold by byte size, you can specify --threshold=75000000 to display the services with greater than 75000000 bytes outbound.
18 | # $ ./AssetDiscoveryTree.sh /home/jason/sample.rw --threshold=75000000 > /home/jason/assetlistBYTETHRESHOLD.html
19 | 
20 | limitvalue=$2
21 | if [ -z "${limitvalue}" ]; then
22 | limitvalue="--percentage=1"
23 | fi
24 | 
25 | echo '{ "name": "Assets","children": [ ' > flare.temp.json
26 | 
27 | rwfilter $1 --type=outweb --sport=80,443,8080 --protocol=6 --packets=4- --ack-flag=1 --pass=stdout|rwstats --fields=sip $limitvalue --bytes --no-titles|cut -f 1 -d "|"|rwsetbuild > web_servers.set
28 | rwfilter $1 --type=outweb --sport=80,443,8080 --protocol=6 --packets=4- --ack-flag=1 --sipset=web_servers.set --pass=stdout|rwuniq --fields=sip --bytes --sort-output --no-titles --delimited=,|sed 's/^\([0-9]\{1,3\}\.[0-9]\{1,3\}\.[0-9]\{1,3\}\.[0-9]\{1,3\}\),\([0-9]\{1,\}\)$/\t{"name": "\1", "size": \2},/g' |sed '$s/,$//g' | sed '1s/^/\{"name": "Web Servers",\n"children": [/' | sed '$s/$/\n\]},/'  >> flare.temp.json
29 | 
30 | rwfilter $1 --type=out --sport=25,465,110,995,143,993 --protocol=6 --packets=4- --ack-flag=1 --pass=stdout|rwset --sip-file=smtpservers.set
31 | rwfilter $1 --type=out --sport=25,465,110,995,143,993 --sipset=smtpservers.set --protocol=6 --packets=4- --ack-flag=1 --pass=stdout|rwuniq --fields=sip --bytes --sort-output --no-titles --delimited=,|sed 's/^\([0-9]\{1,3\}\.[0-9]\{1,3\}\.[0-9]\{1,3\}\.[0-9]\{1,3\}\),\([0-9]\{1,\}\)$/\t{"name": "\1", "size": \2},/g' |sed '$s/,$//g' | sed '1s/^/\{"name": "SMTP Servers",\n"children": [/' | sed '$s/$/\n\]},/' >>flare.temp.json
32 | 
33 | rwfilter $1 --type=out --sport=53 --protocol=17 --pass=stdout|rwstats --fields=sip $limitvalue --packets --no-titles|cut -f 1 -d "|"| rwsetbuild > dnsservers.set
34 | rwfilter $1 --type=out --sport=53 --protocol=17 --sipset=dnsservers.set --pass=stdout | rwuniq --fields=sip --bytes --sort-output --no-titles --delimited=,|sed 's/^\([0-9]\{1,3\}\.[0-9]\{1,3\}\.[0-9]\{1,3\}\.[0-9]\{1,3\}\),\([0-9]\{1,\}\)$/\t{"name": "\1", "size": \2},/g' |sed '$s/,$//g' | sed '1s/^/\{"name": "DNS Servers",\n"children": [/' | sed '$s/$/\n\]},/' >>flare.temp.json
35 | 
36 | rwfilter $1 --type=out --protocol=47,50,51 --pass=stdout|rwuniq --fields=sip --no-titles|cut -f 1 -d "|" |rwsetbuild > vpn.set
37 | rwfilter $1 --type=out --sipset=vpn.set --pass=stdout|rwuniq --fields=sip --bytes --sort-output --no-titles --delimited=,|sed 's/^\([0-9]\{1,3\}\.[0-9]\{1,3\}\.[0-9]\{1,3\}\.[0-9]\{1,3\}\),\([0-9]\{1,\}\)$/\t{"name": "\1", "size": \2},/g' |sed '$s/,$//g' | sed '1s/^/\{"name": "VPN Servers",\n"children": [/' | sed '$s/$/\n\]},/' >>flare.temp.json
38 | 
39 | rwfilter $1 --type=out --protocol=6 --packets=4- --ack-flag=1 --sport=21 --pass=stdout|rwstats --fields=sip $limitvalue --bytes --no-titles|cut -f 1 -d "|"|rwsetbuild > ftpservers.set
40 | rwfilter $1 --type=out --sipset=ftpservers.set --sport=20 --flags-initial=S/SAFR --pass=stdout|rwuniq --fields=sip --bytes --sort-output --no-titles --delimited=,|sed 's/^\([0-9]\{1,3\}\.[0-9]\{1,3\}\.[0-9]\{1,3\}\.[0-9]\{1,3\}\),\([0-9]\{1,\}\)$/\t{"name": "\1", "size": \2},/g' |sed '$s/,$//g' | sed '1s/^/\{"name": "FTP Servers",\n"children": [/' | sed '$s/$/\n\]},/'  >>flare.temp.json
41 | 
42 | rwfilter $1 --type=out --protocol=6 --packets=4- --ack-flag=1 --sport=22 --pass=stdout|rwstats --fields=sip $limitvalue --bytes --no-titles|cut -f 1 -d "|"|rwsetbuild>sshservers.set
43 | rwfilter $1 --type=out --protocol=6 --packets=4- --ack-flag=1 --sipset=sshservers.set --sport=22 --pass=stdout | rwuniq --fields=sip --bytes --sort-output --no-titles --delimited=,|sed 's/^\([0-9]\{1,3\}\.[0-9]\{1,3\}\.[0-9]\{1,3\}\.[0-9]\{1,3\}\),\([0-9]\{1,\}\)$/\t{"name": "\1", "size": \2},/g' |sed '$s/,$//g' | sed '1s/^/\{"name": "SSH Servers",\n"children": [/' | sed '$s/$/\n\]},/' >>flare.temp.json
44 | 
45 | rwfilter $1 --type=out --protocol=6 --packets=4- --ack-flag=1 --sport=23 --pass=stdout|rwstats --fields=sip $limitvalue --bytes --no-titles|cut -f 1 -d "|"|rwsetbuild > telnetservers.set
46 | rwfilter $1 --type=out --protocol=6 --packets=4- --ack-flag=1 --sipset=telnetservers.set --sport=23 --pass=stdout|rwuniq --fields=sip --bytes --sort-output --no-titles --delimited=,|sed 's/^\([0-9]\{1,3\}\.[0-9]\{1,3\}\.[0-9]\{1,3\}\.[0-9]\{1,3\}\),\([0-9]\{1,\}\)$/\t{"name": "\1", "size": \2},/g' |sed '$s/,$//g' | sed '1s/^/\{"name": "Telnet Servers",\n"children": [/' | sed '$s/$/\n\]},/'  >>flare.temp.json
47 | 
48 | cat flare.temp.json | sed '$s/,$/\n/' | sed '$s/$/\]\}/' | tr '\n' ' ' | sed "s/^/var myjson = '/"| sed "s/$/';/" > assets.json
49 | 
50 | sed '/dataplaceholder/{
51 |     s/dataplaceholder//g
52 |     r assets.json
53 | }' d3chart/treeasset.html
54 | 
55 | rm *.set
56 | rm flare.temp.json
57 | rm assets.json
58 | 


--------------------------------------------------------------------------------