Skip to content

Commit df0e5dd

Browse files
jalammarjalammar
committed
- Two interactive visualizations done.
- Fixed the text to use the correct average price per sq ft (180) - Still need to fix the gifs to the correct numbers
1 parent b5bb8c0 commit df0e5dd

11 files changed

+768
-180
lines changed

‎_layouts/default.html

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,13 @@
99
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
1010
<![endif]-->
1111

12+
<script src="/js/jquery-3.1.1.slim.min.js"></script>
13+
<script type="text/javascript" src="/js/d3.min.js"></script>
14+
15+
<link rel="stylesheet" href="{{ site.baseurl }}/css/bootstrap.min.css" />
16+
<link rel="stylesheet" href="{{ site.baseurl }}/css/bootstrap-theme.min.css" />
17+
<script src="{{ site.baseurl }}/js/bootstrap.min.js" > </script>
18+
1219
<link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/style.css" />
1320
<link rel="alternate" type="application/rss+xml" title="{{ site.name }} - {{ site.description }}" href="{{ site.baseurl }}/feed.xml" />
1421

‎_posts/2016-11-11-neural-networks-are-easy-and-you-can-too.md

Lines changed: 200 additions & 82 deletions
Large diffs are not rendered by default.

‎_sass/_bias_inputrange.scss

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
// Styling Cross-Browser Compatible Range Inputs with Sass
2+
// Github: https://github.com/darlanrod/input-range-sass
3+
// Author: Darlan Rod https://github.com/darlanrod
4+
// Version 1.1.0
5+
// MIT License
6+
7+
$bias-track-color: #ccc9fa !default;
8+
$thumb-color: #fff !default;
9+
10+
$thumb-radius: 20px !default;
11+
$thumb-height: 30px !default;
12+
$thumb-width: 30px !default;
13+
$thumb-shadow-size: 2px !default;
14+
$thumb-shadow-blur: 1px !default;
15+
$thumb-shadow-color: #555 !default;
16+
$thumb-border-width: 1px !default;
17+
$thumb-border-color: #111 !default;
18+
19+
$track-width: 100% !default;
20+
$track-height: 10px !default;
21+
$track-shadow-size: 0px !default;
22+
$track-shadow-blur: 2px !default;
23+
$track-shadow-color: #222 !default;
24+
$track-border-width: 1px !default;
25+
$track-border-color: #000 !default;
26+
27+
$track-radius: 5px !default;
28+
$contrast: 5% !default;
29+
30+
@mixin shadow($shadow-size, $shadow-blur, $shadow-color) {
31+
box-shadow: $shadow-size $shadow-size $shadow-blur $shadow-color, 0 0 $shadow-size lighten($shadow-color, 5%);
32+
}
33+
34+
@mixin track() {
35+
width: $track-width;
36+
height: $track-height;
37+
cursor: pointer;
38+
transition: all .2s ease;
39+
}
40+
41+
@mixin thumb() {
42+
@include shadow($thumb-shadow-size, $thumb-shadow-blur, $thumb-shadow-color);
43+
border: $thumb-border-width solid $thumb-border-color;
44+
height: $thumb-height;
45+
width: $thumb-width;
46+
border-radius: $thumb-radius;
47+
background: $thumb-color;
48+
cursor: pointer;
49+
}
50+
51+
[type=range].bias {
52+
-webkit-appearance: none;
53+
margin: $thumb-height / 2 0;
54+
width: $track-width;
55+
56+
&:focus {
57+
outline: none;
58+
}
59+
60+
&::-webkit-slider-runnable-track {
61+
@include track();
62+
@include shadow($track-shadow-size, $track-shadow-blur, $track-shadow-color);
63+
background: $bias-track-color;
64+
border: $track-border-width solid $track-border-color;
65+
border-radius: $track-radius;
66+
}
67+
68+
&::-webkit-slider-thumb {
69+
@include thumb();
70+
-webkit-appearance: none;
71+
margin-top: ((-$track-border-width * 2 + $track-height) / 2) - ($thumb-height / 2);
72+
}
73+
74+
&:focus::-webkit-slider-runnable-track {
75+
background: lighten($bias-track-color, $contrast);
76+
}
77+
78+
&::-moz-range-track {
79+
@include track();
80+
@include shadow($track-shadow-size, $track-shadow-blur, $track-shadow-color);
81+
background: $bias-track-color;
82+
border: $track-border-width solid $track-border-color;
83+
border-radius: $track-radius;
84+
}
85+
86+
&::-moz-range-thumb {
87+
@include thumb();
88+
}
89+
90+
&::-ms-track {
91+
@include track();
92+
background: transparent;
93+
border-color: transparent;
94+
border-width: $thumb-width 0;
95+
color: transparent;
96+
}
97+
98+
&::-ms-fill-lower {
99+
@include shadow($track-shadow-size, $track-shadow-blur, $track-shadow-color);
100+
background: darken($bias-track-color, $contrast);
101+
border: $track-border-width solid $track-border-color;
102+
border-radius: $track-radius * 2;
103+
}
104+
105+
&::-ms-fill-upper {
106+
@include shadow($track-shadow-size, $track-shadow-blur, $track-shadow-color);
107+
background: $bias-track-color;
108+
border: $track-border-width solid $track-border-color;
109+
border-radius: $track-radius * 2;
110+
}
111+
112+
&::-ms-thumb {
113+
@include thumb();
114+
}
115+
116+
&:focus::-ms-fill-lower {
117+
background: $bias-track-color;
118+
}
119+
120+
&:focus::-ms-fill-upper {
121+
background: lighten($bias-track-color, $contrast);
122+
}
123+
}

‎_sass/_variables.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ $lightBlue: #31A2DA;
99
$pink: #EC008C;
1010
$yellow: #F8CA00;
1111
$darkYellow: #c8a300;
12+
$weightGreen: #4db755;
13+
$biasPurple: #6761c5;
1214

1315

1416
// Grays

‎_sass/_weight_inputrange.scss

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
// Styling Cross-Browser Compatible Range Inputs with Sass
2+
// Github: https://github.com/darlanrod/input-range-sass
3+
// Author: Darlan Rod https://github.com/darlanrod
4+
// Version 1.1.0
5+
// MIT License
6+
7+
$track-color: #a8e7ad !default;
8+
$thumb-color: #fff !default;
9+
10+
$thumb-radius: 20px !default;
11+
$thumb-height: 30px !default;
12+
$thumb-width: 30px !default;
13+
$thumb-shadow-size: 2px !default;
14+
$thumb-shadow-blur: 1px !default;
15+
$thumb-shadow-color: #555 !default;
16+
$thumb-border-width: 1px !default;
17+
$thumb-border-color: #111 !default;
18+
19+
$track-width: 100% !default;
20+
$track-height: 10px !default;
21+
$track-shadow-size: 0px !default;
22+
$track-shadow-blur: 2px !default;
23+
$track-shadow-color: #222 !default;
24+
$track-border-width: 1px !default;
25+
$track-border-color: #000 !default;
26+
27+
$track-radius: 5px !default;
28+
$contrast: 5% !default;
29+
30+
@mixin shadow($shadow-size, $shadow-blur, $shadow-color) {
31+
box-shadow: $shadow-size $shadow-size $shadow-blur $shadow-color, 0 0 $shadow-size lighten($shadow-color, 5%);
32+
}
33+
34+
@mixin track() {
35+
width: $track-width;
36+
height: $track-height;
37+
cursor: pointer;
38+
transition: all .2s ease;
39+
}
40+
41+
@mixin thumb() {
42+
@include shadow($thumb-shadow-size, $thumb-shadow-blur, $thumb-shadow-color);
43+
border: $thumb-border-width solid $thumb-border-color;
44+
height: $thumb-height;
45+
width: $thumb-width;
46+
border-radius: $thumb-radius;
47+
background: $thumb-color;
48+
cursor: pointer;
49+
}
50+
51+
[type=range].weight {
52+
-webkit-appearance: none;
53+
margin: $thumb-height / 2 0;
54+
width: $track-width;
55+
56+
&:focus {
57+
outline: none;
58+
}
59+
60+
&::-webkit-slider-runnable-track {
61+
@include track();
62+
@include shadow($track-shadow-size, $track-shadow-blur, $track-shadow-color);
63+
background: $track-color;
64+
border: $track-border-width solid $track-border-color;
65+
border-radius: $track-radius;
66+
}
67+
68+
&::-webkit-slider-thumb {
69+
@include thumb();
70+
-webkit-appearance: none;
71+
margin-top: ((-$track-border-width * 2 + $track-height) / 2) - ($thumb-height / 2);
72+
}
73+
74+
&:focus::-webkit-slider-runnable-track {
75+
background: lighten($track-color, $contrast);
76+
}
77+
78+
&::-moz-range-track {
79+
@include track();
80+
@include shadow($track-shadow-size, $track-shadow-blur, $track-shadow-color);
81+
background: $track-color;
82+
border: $track-border-width solid $track-border-color;
83+
border-radius: $track-radius;
84+
}
85+
86+
&::-moz-range-thumb {
87+
@include thumb();
88+
}
89+
90+
&::-ms-track {
91+
@include track();
92+
background: transparent;
93+
border-color: transparent;
94+
border-width: $thumb-width 0;
95+
color: transparent;
96+
}
97+
98+
&::-ms-fill-lower {
99+
@include shadow($track-shadow-size, $track-shadow-blur, $track-shadow-color);
100+
background: darken($track-color, $contrast);
101+
border: $track-border-width solid $track-border-color;
102+
border-radius: $track-radius * 2;
103+
}
104+
105+
&::-ms-fill-upper {
106+
@include shadow($track-shadow-size, $track-shadow-blur, $track-shadow-color);
107+
background: $track-color;
108+
border: $track-border-width solid $track-border-color;
109+
border-radius: $track-radius * 2;
110+
}
111+
112+
&::-ms-thumb {
113+
@include thumb();
114+
}
115+
116+
&:focus::-ms-fill-lower {
117+
background: $track-color;
118+
}
119+
120+
&:focus::-ms-fill-upper {
121+
background: lighten($track-color, $contrast);
122+
}
123+
}

‎images/data_points_graph_animated.gif

771 Bytes
Loading

‎images/lines_and_errors_animated.gif

457 Bytes
Loading

‎images/simple_NN_1.png

-139 Bytes
Loading

0 commit comments

Comments
 (0)