Skip to content

Instantly share code, notes, and snippets.

@micahstubbs

micahstubbs/.block

Last active March 12, 2016 22:55
Show Gist options
  • Save micahstubbs/804226bdbaf7f67af900 to your computer and use it in GitHub Desktop.
Save micahstubbs/804226bdbaf7f67af900 to your computer and use it in GitHub Desktop.
Download ZIP
browser market share - fixed y axis max
Raw
.block
license: CC0-1.0
Raw
README.md

A line chart with the y-axis domain max fixed at 100.

The y-axis label appears at the max y value of all of the lines.

Raw
data.csv
date IE Chrome Firefox Safari Opera Android 360 Safe Browser Maxthon Yandex Browser Sony PS3 Silk Sogou Explorer Mozilla Chromium QQ Browser AOL SeaMonkey RockMelt BlackBerry UC Browser Pale Moon Iron Coc Coc TheWorld Flock Puffin Other
2008-07 68.57 0 26.14 3.3 1.78 0 0 0 0 0 0 0 0 0 0 0 0.04 0 0 0 0 0 0 0 0 0 0.17
2008-08 68.91 0 26.08 2.99 1.83 0 0 0 0 0 0 0 0 0 0 0 0.04 0 0 0 0 0 0 0 0 0 0.15
2008-09 67.16 1.03 25.77 3 2.86 0 0 0 0 0 0 0 0 0 0 0 0.04 0 0 0 0 0 0 0 0 0 0.14
2008-10 67.68 1.02 25.54 2.91 2.69 0 0 0 0 0 0 0 0 0 0 0 0.04 0 0 0 0 0 0 0 0 0 0.13
2008-11 68.14 0.93 25.27 2.49 3.01 0 0 0 0 0.02 0 0 0 0 0 0 0.03 0 0 0 0 0 0 0 0 0 0.11
2008-12 67.84 1.21 25.23 2.41 2.83 0 0 0 0 0.06 0 0 0.08 0 0 0.14 0.03 0 0 0 0 0 0 0 0.01 0 0.15
2009-01 65.41 1.38 27.03 2.57 2.92 0 0 0 0 0.08 0 0 0.15 0 0 0.27 0.04 0 0 0 0 0 0 0 0.01 0 0.14
2009-02 64.43 1.52 27.85 2.59 2.95 0 0 0 0 0.07 0 0 0.15 0 0 0.26 0.04 0 0 0 0 0 0 0 0.01 0 0.14
2009-03 62.52 1.73 29.4 2.73 2.94 0 0 0 0 0.08 0 0 0.16 0 0 0.25 0.03 0 0 0 0 0 0 0 0.01 0 0.14
2009-04 61.88 2.07 29.67 2.75 2.96 0 0 0 0 0.1 0 0 0.17 0 0 0.24 0.03 0 0 0 0 0 0 0 0.01 0 0.13
2009-05 62.09 2.42 28.75 2.65 3.23 0 0 0 0 0.09 0 0 0.4 0 0 0.21 0.03 0 0 0 0 0 0 0 0.01 0 0.13
2009-06 59.49 2.82 30.33 2.93 3.36 0 0 0 0 0.11 0 0 0.55 0 0 0.21 0.03 0 0 0 0 0 0 0 0.02 0 0.15
2009-07 60.11 3.01 30.5 3.02 2.64 0 0 0 0 0.14 0 0 0.2 0 0 0.2 0.03 0 0 0 0 0 0 0 0.01 0 0.13
2009-08 58.69 3.38 31.28 3.25 2.67 0 0 0 0 0.15 0 0 0.24 0 0 0.19 0.03 0 0 0 0 0 0 0 0.01 0 0.11
2009-09 58.37 3.69 31.34 3.28 2.62 0 0 0 0 0.12 0 0 0.26 0 0 0.18 0.03 0 0 0 0 0 0 0 0.01 0 0.09
2009-10 57.96 4.17 31.82 3.47 1.88 0 0 0 0 0.13 0 0 0.28 0 0 0.17 0.03 0 0 0 0 0 0 0 0.01 0 0.09
2009-11 56.57 4.66 32.21 3.67 2.02 0 0 0 0 0.14 0 0 0.44 0 0 0.16 0.03 0 0 0 0 0 0 0 0.01 0 0.09
2009-12 55.72 5.45 31.97 3.48 2.06 0 0 0.28 0 0.15 0 0 0.6 0 0 0.14 0.03 0 0 0 0 0 0 0 0.01 0 0.1
2010-01 55.25 6.04 31.64 3.76 2 0 0 0.38 0 0.15 0 0 0.48 0 0 0.14 0.03 0 0 0 0 0 0 0 0.02 0 0.11
2010-02 54.5 6.72 31.82 4.08 1.97 0 0 0.3 0 0.13 0 0 0.16 0 0 0.14 0.03 0 0 0 0 0 0 0 0.03 0 0.11
2010-03 54.44 7.29 31.27 4.16 1.97 0 0 0.28 0 0.13 0 0 0.16 0 0 0.13 0.03 0 0 0 0 0 0 0 0.03 0 0.1
2010-04 53.26 8.06 31.74 4.23 1.82 0 0 0.26 0 0.14 0 0 0.16 0 0 0.12 0.03 0 0 0 0 0 0 0 0.03 0 0.14
2010-05 52.77 8.61 31.64 4.14 1.96 0 0 0.24 0 0.14 0 0 0.15 0 0 0.11 0.03 0 0 0 0 0 0 0 0.03 0 0.17
2010-06 52.86 9.24 31.15 4.07 1.91 0 0 0.22 0 0.15 0 0 0.14 0 0 0.11 0.03 0 0 0 0 0 0 0 0.03 0 0.09
2010-07 52.68 9.88 30.69 4.09 1.91 0 0 0.2 0 0.15 0 0 0.12 0 0 0.11 0.03 0 0 0 0 0 0 0 0.03 0 0.1
2010-08 51.34 10.76 31.09 4.23 1.88 0 0 0.19 0 0.15 0 0 0.11 0 0 0.1 0.03 0 0 0 0 0 0 0 0.03 0 0.09
2010-09 49.87 11.54 31.5 4.42 2.03 0 0 0.18 0 0.14 0 0 0.1 0 0 0.08 0.03 0 0 0 0 0 0 0 0.02 0 0.08
2010-10 49.21 12.39 31.24 4.56 2 0 0 0.17 0 0.14 0 0 0.1 0 0 0.07 0.03 0 0 0 0 0 0 0 0.03 0 0.07
2010-11 48.16 13.35 31.17 4.7 2.01 0 0 0.18 0 0.13 0 0 0.09 0 0 0.06 0.03 0 0 0 0 0 0 0 0.03 0 0.08
2010-12 46.94 14.85 30.76 4.79 2.07 0 0 0.17 0 0.15 0 0 0.09 0 0 0.06 0.03 0 0 0 0 0 0 0 0.02 0 0.07
2011-01 46 15.68 30.68 5.09 2 0.01 0 0.15 0 0.15 0 0 0.08 0 0 0.06 0.03 0 0 0 0 0 0 0 0.02 0 0.07
2011-02 45.44 16.54 30.37 5.08 2 0.01 0 0.16 0 0.14 0 0 0.08 0 0 0.05 0.03 0 0 0 0 0 0 0 0.02 0 0.07
2011-03 45.11 17.37 29.98 5.02 1.97 0.02 0 0.17 0 0.13 0 0 0.07 0 0 0.05 0.03 0 0 0 0 0 0 0 0.02 0 0.06
2011-04 44.52 18.29 29.67 5.04 1.91 0.02 0 0.17 0 0.14 0 0 0.06 0.01 0 0.04 0.02 0.01 0 0 0 0 0 0 0.02 0 0.06
2011-05 43.87 19.36 29.29 5.01 1.84 0.03 0 0.15 0 0.15 0 0 0.05 0.05 0 0.02 0.02 0.04 0 0 0 0.02 0 0 0.02 0 0.07
2011-06 43.58 20.65 28.34 5.07 1.74 0.04 0 0.15 0 0.14 0 0 0.04 0.05 0 0.02 0.02 0.03 0 0 0 0.02 0 0 0.02 0 0.07
2011-07 42.45 22.14 27.95 5.17 1.66 0.06 0 0.16 0 0.15 0 0 0.04 0.05 0 0.02 0.02 0.03 0 0 0 0.02 0 0 0.02 0 0.06
2011-08 41.89 23.16 27.49 5.19 1.67 0.07 0 0.13 0 0.15 0 0 0.03 0.05 0 0.01 0.02 0.03 0 0 0 0.02 0 0 0.02 0 0.06
2011-09 41.66 23.61 26.79 5.6 1.72 0.07 0 0.14 0 0.15 0 0 0.03 0.05 0 0.01 0.02 0.03 0.01 0 0 0.02 0 0 0.01 0 0.06
2011-10 40.18 25 26.39 5.93 1.81 0.13 0 0.14 0 0.15 0 0 0.03 0.06 0 0.01 0.03 0.03 0.01 0 0 0.02 0 0 0.01 0 0.06
2011-11 40.63 25.69 25.23 5.92 1.82 0.15 0 0.13 0 0.14 0 0 0.03 0.06 0 0.01 0.03 0.03 0.01 0 0 0.02 0 0.02 0.01 0 0.08
2011-12 38.65 27.27 25.27 6.08 1.98 0.19 0 0.1 0 0.15 0 0 0.02 0.07 0 0.01 0.03 0.03 0.01 0 0 0.02 0 0.02 0.01 0 0.08
2012-01 37.45 28.4 24.78 6.62 1.95 0.24 0 0.09 0 0.14 0 0 0.02 0.07 0 0.01 0.03 0.03 0.03 0 0 0.02 0 0.02 0.02 0 0.08
2012-02 35.75 29.84 24.88 6.77 2.02 0.25 0 0.09 0 0.04 0 0 0.02 0.07 0 0.01 0.03 0.03 0.03 0 0 0.02 0 0.02 0.02 0 0.09
2012-03 34.81 30.87 24.98 6.72 1.78 0.27 0 0.1 0 0.06 0.04 0 0.02 0.07 0 0.01 0.04 0.04 0.03 0 0 0.03 0 0.02 0.03 0 0.08
2012-04 34.07 31.23 24.87 7.13 1.72 0.29 0 0.11 0 0.12 0.08 0 0.02 0.07 0.01 0.01 0.04 0.05 0.03 0 0 0.03 0 0.02 0.02 0 0.08
2012-05 32.12 32.43 25.55 7.09 1.77 0.31 0.02 0.12 0 0.12 0.08 0 0.02 0.07 0.02 0 0.03 0.06 0.03 0 0 0.03 0 0.02 0.02 0 0.08
2012-06 32.31 32.76 24.56 7 1.77 0.34 0.32 0.12 0 0.13 0.08 0 0.02 0.07 0.02 0 0.03 0.06 0.03 0 0.03 0.03 0 0.02 0.01 0 0.23
2012-07 32.04 33.81 23.73 7.12 1.72 0.36 0.43 0.12 0 0.13 0.1 0.01 0.01 0.08 0.02 0 0.02 0.06 0.03 0 0.03 0.02 0 0.02 0.01 0 0.1
2012-08 32.85 33.59 22.85 7.39 1.63 0.38 0.4 0.12 0 0.14 0.1 0.11 0.01 0.08 0.03 0 0.02 0.06 0.03 0 0.03 0.02 0 0.02 0.01 0 0.12
2012-09 32.7 34.21 22.4 7.7 1.61 0.41 0.06 0.13 0 0.13 0.09 0.12 0.01 0.09 0.03 0 0.02 0.06 0.03 0 0.03 0.02 0 0.02 0.01 0 0.1
2012-10 32.08 34.77 22.32 7.81 1.63 0.44 0.07 0.13 0 0.13 0.08 0.13 0.01 0.08 0.03 0 0.02 0.06 0.03 0 0.03 0.01 0 0.02 0.01 0 0.09
2012-11 31.23 35.72 22.37 7.83 1.39 0.49 0.08 0.14 0.01 0.13 0.08 0.13 0.01 0.08 0.03 0 0.02 0.05 0.04 0 0.03 0.01 0 0.02 0.01 0 0.09
2012-12 30.78 36.42 21.89 7.92 1.26 0.59 0.17 0.16 0.05 0.14 0.08 0.13 0.01 0.08 0.03 0 0.02 0.05 0.04 0 0.03 0.01 0 0.02 0.01 0 0.1
2013-01 30.71 36.52 21.42 8.29 1.19 0.69 0.1 0.15 0.12 0.13 0.15 0.13 0.01 0.06 0.03 0 0.02 0.05 0.04 0 0.03 0.01 0 0.02 0.01 0 0.1
2013-02 29.82 37.09 21.34 8.6 1.22 0.74 0.1 0.15 0.16 0.12 0.17 0.13 0.01 0.05 0.03 0 0.02 0.04 0.04 0 0.04 0.01 0 0.02 0.01 0 0.1
2013-03 29.3 38.07 20.87 8.5 1.17 0.77 0.12 0.17 0.2 0.12 0.17 0.16 0.01 0.06 0.03 0 0.02 0.04 0.04 0.01 0.04 0.01 0 0.02 0.01 0 0.1
2013-04 29.71 39.15 20.06 8 1.01 0.74 0.14 0.16 0.23 0.11 0.15 0.16 0.01 0.07 0.03 0 0.02 0.04 0.04 0.01 0.04 0.01 0 0.02 0 0 0.1
2013-05 27.72 41.38 19.76 7.96 1 0.78 0.14 0.17 0.26 0.11 0.15 0.16 0.01 0.07 0.04 0 0.02 0.03 0.03 0.01 0.03 0.01 0 0.02 0 0 0.12
2013-06 25.44 42.68 20.01 8.39 1.03 0.86 0.18 0.19 0.31 0.12 0.17 0.18 0.02 0.07 0.04 0 0.02 0.03 0.04 0.01 0.04 0.02 0 0.02 0 0 0.13
2013-07 24.53 43.12 20.09 8.59 1.1 0.92 0.18 0.19 0.3 0.13 0.18 0.18 0.01 0.08 0.05 0 0.02 0.03 0.04 0.01 0.04 0.02 0 0.02 0 0.02 0.18
2013-08 25.55 42.78 19.25 8.57 1.16 0.94 0.22 0.19 0.32 0.13 0.17 0.19 0.01 0.07 0.06 0 0.02 0.02 0.03 0.02 0.04 0.02 0 0.02 0 0.03 0.18
2013-09 28.56 40.8 18.36 8.52 1.16 0.92 0.24 0.19 0.33 0.1 0.16 0.16 0.01 0.08 0.05 0 0.02 0.01 0.03 0.01 0.04 0.02 0 0.02 0 0.03 0.18
2013-10 28.96 40.44 18.11 8.54 1.2 0.9 0.41 0.2 0.31 0.09 0.16 0.16 0.01 0.07 0.06 0 0.02 0.01 0.03 0.02 0.04 0.02 0 0.02 0 0.03 0.2
2013-11 27.31 41.87 18.15 8.5 1.18 0.94 0.55 0.22 0.32 0.09 0.17 0.15 0.02 0.08 0.07 0 0.02 0.01 0.03 0.02 0.04 0.02 0 0.03 0 0.03 0.19
2013-12 23.24 43.92 18.95 9.14 1.31 1.13 0.69 0.23 0.34 0.09 0.21 0.17 0.02 0.07 0.08 0 0.02 0.01 0.03 0.02 0.02 0.02 0 0.03 0 0.03 0.21
2014-01 22.86 43.68 18.92 9.74 1.3 1.22 0.59 0.23 0.37 0.08 0.24 0.19 0.02 0.07 0.09 0 0.02 0.01 0.03 0.02 0.02 0.02 0 0.03 0 0.03 0.21
2014-02 22.58 43.85 19.24 9.68 1.34 1.2 0.37 0.25 0.34 0.09 0.23 0.23 0.02 0.07 0.1 0 0.02 0.01 0.03 0.03 0.02 0.02 0 0.03 0 0.03 0.21
2014-03 22.58 43.66 18.75 9.91 1.38 1.18 0.84 0.25 0.33 0.08 0.22 0.16 0.02 0.08 0.1 0 0.02 0.01 0.03 0.03 0.02 0.02 0 0.04 0 0.03 0.24
2014-04 21.43 45.22 18.62 9.79 1.39 1.17 0.68 0.23 0.37 0.08 0.21 0.15 0.02 0.11 0.09 0 0.02 0.01 0.03 0.03 0.02 0.02 0 0.03 0 0.04 0.23
2014-05 20.78 45.6 18.72 10.02 1.35 1.24 0.68 0.22 0.29 0.07 0.21 0.14 0.02 0.12 0.09 0 0.02 0 0.02 0.04 0.02 0.02 0 0.03 0 0.04 0.24
2014-06 20.98 45.46 17.95 10.3 1.37 1.34 0.91 0.24 0.3 0.07 0.23 0.15 0.03 0.1 0.11 0 0.02 0 0.02 0.04 0.02 0.02 0.05 0.04 0 0.04 0.2
2014-07 21.38 45.28 17.52 10.6 1.39 1.36 0.78 0.23 0.29 0.06 0.24 0.16 0.03 0.11 0.12 0 0.02 0 0.02 0.04 0.02 0.02 0.05 0.03 0 0.03 0.21
2014-08 20.31 46.26 17.5 10.81 1.47 1.37 0.5 0.23 0.33 0.06 0.25 0.19 0.03 0.11 0.13 0 0.02 0 0.02 0.05 0.02 0.02 0.07 0.02 0 0.03 0.2
2014-09 20.46 45.58 17.44 11.21 1.39 1.33 0.81 0.26 0.28 0.05 0.25 0.2 0.03 0.09 0.14 0 0.02 0 0.02 0.05 0.02 0.02 0.07 0.03 0 0.03 0.21
2014-10 19.3 47.63 17.04 10.99 1.33 1.36 0.66 0.24 0.29 0.05 0.22 0.19 0.04 0.08 0.12 0 0.02 0 0.02 0.04 0.02 0.02 0.06 0.03 0 0.03 0.19
2014-11 19.6 48.06 16.74 10.63 1.43 1.6 0.16 0.22 0.34 0.06 0.22 0.2 0.04 0.09 0.11 0 0.02 0.01 0.02 0.05 0.02 0.05 0.08 0.01 0 0.04 0.19
2014-12 22.3 46.13 16.34 10.3 1.43 1.58 0.17 0.22 0.31 0.05 0.25 0.19 0.04 0.09 0.11 0 0.02 0 0.02 0.06 0.02 0.03 0.08 0.01 0 0.04 0.21
2015-01 19.28 48.15 16.96 10.28 1.58 1.58 0.29 0.24 0.33 0.05 0.25 0.21 0.05 0.11 0.13 0 0.02 0 0.02 0.07 0.03 0.02 0.09 0.01 0 0.04 0.23
2015-02 18.91 48.71 16.53 10.21 1.63 1.61 0.46 0.25 0.34 0.05 0.24 0.22 0.04 0.12 0.15 0 0.02 0 0.02 0.07 0.03 0.01 0.11 0.02 0 0.03 0.24
2015-03 18.06 49.19 16.96 10.4 1.65 1.48 0.34 0.24 0.35 0.04 0.24 0.23 0.04 0.12 0.14 0 0.02 0 0.02 0.08 0.03 0.01 0.09 0.02 0 0.03 0.24
2015-04 18.28 49.84 16.77 9.88 1.65 1.28 0.39 0.25 0.35 0.04 0.22 0.23 0.03 0.13 0.14 0 0.02 0 0.01 0.08 0.03 0.01 0.1 0.02 0 0.03 0.22
2015-05 18.3 49.24 16.39 10.83 1.65 1.4 0.34 0.23 0.35 0.04 0.21 0.2 0.04 0.12 0.13 0 0.02 0 0.01 0.09 0.02 0.01 0.1 0.01 0 0.03 0.21
2015-06 18.5 49.65 16.11 10.55 1.65 1.42 0.23 0.23 0.35 0.03 0.22 0.23 0.04 0.12 0.14 0 0.02 0 0.01 0.1 0.03 0.01 0.1 0.01 0 0.03 0.22
2015-07 17.19 51.74 15.68 9.79 1.83 1.51 0.14 0.25 0.4 0.03 0.24 0.26 0.04 0.13 0.17 0 0.03 0 0.02 0.11 0.03 0.01 0.1 0.01 0 0.03 0.27
2015-08 16.01 52.75 15.69 9.31 1.81 1.39 0.14 0.25 0.43 0.04 0.22 0.29 0.03 0.15 0.2 0 0.02 0 0.01 0.13 0.02 0.02 0.1 0.01 0 0.04 0.91
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>
var margin = {top: 20, right: 80, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var parseDate = d3.time.format("%Y-%m").parse;
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var color = d3.scale.category10();
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.line()
.interpolate("basis")
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.yVariable); });
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.csv("data.csv", function(error, data) {
if (error) throw error;
color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));
data.forEach(function(d) {
d.date = parseDate(d.date);
//console.log(d.date);
});
var browsers = color.domain().map(function(name) {
return {
name: name,
values: data.map(function(d) {
return {date: d.date, yVariable: +d[name]};
})
};
});
console.log("browsers")
console.log(browsers);
// get an array of all of the values that we can
// compute the max of
var marketShares = [];
color.domain().forEach(function(name) {
data.map(function(d) { return +d[name] }).forEach(function(el){
marketShares.push(el);
})
})
console.log("max marketShare")
console.log(d3.max(marketShares));
console.log("marketShares");
console.log(marketShares);
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([
d3.min(browsers, function(c) { return d3.min(c.values, function(v) { return v.yVariable; }); }),
100// d3.max(browsers, function(c) { return d3.max(c.values, function(v) { return v.yVariable; }); })
]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("x", 0) // y(d3.max(marketShares))
.attr("y", -margin.left*.75)
.attr("transform", "translate(0," + y(d3.max(marketShares)) + ")" + " " + "rotate(-90)")
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Market Share (%)");
console.log(d3.max(function(d) { return d.yVariable }))
var browser = svg.selectAll(".browser")
.data(browsers)
.enter().append("g")
.attr("class", "browser");
browser.append("path")
.attr("class", "line")
.attr("d", function(d) { return line(d.values); })
.style("stroke", function(d) { return color(d.name); });
browser.append("text")
.datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
.attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.yVariable) + ")"; })
.attr("x", 3)
.attr("dy", ".35em")
.style("opacity", 1)
.text(function(d) { return d.name; });
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment