Skip to content

Instantly share code, notes, and snippets.

@frewsxcv frewsxcv/README.md forked from mbostock/.block
Created Dec 6, 2012

Embed
What would you like to do?
Stacked Area Chart

This stacked area chart is constructed from a TSV file storing the market share of several popular web browsers over the last year. Data is from Clicky Web Analytics. The chart employs conventional margins and a number of D3 features:

date IE Chrome Firefox Safari Opera
11-Oct-13 41.62 22.36 25.58 9.13 1.22
11-Oct-14 41.95 22.15 25.78 8.79 1.25
11-Oct-15 37.64 24.77 25.96 10.16 1.39
11-Oct-16 37.27 24.65 25.98 10.59 1.44
11-Oct-17 42.74 21.87 25.01 9.12 1.17
11-Oct-18 42.14 22.22 25.26 9.1 1.19
11-Oct-19 41.92 22.42 25.3 9.07 1.21
11-Oct-20 42.41 22.08 25.28 8.94 1.18
11-Oct-21 42.74 22.23 25.19 8.5 1.25
11-Oct-22 36.95 25.45 26.03 10.06 1.42
11-Oct-23 37.52 24.73 25.79 10.46 1.43
11-Oct-24 42.69 22.14 24.95 8.98 1.15
11-Oct-25 42.31 22.26 25.1 9.04 1.2
11-Oct-26 42.22 22.28 25.17 9.08 1.16
11-Oct-27 42.62 22.36 24.98 8.8 1.15
11-Oct-28 42.76 22.36 25.05 8.55 1.19
11-Oct-29 38.92 24.36 25.34 9.99 1.3
11-Oct-30 38.06 24.58 25.63 10.26 1.39
11-Oct-31 42.1 22.45 25.18 8.97 1.2
11-Nov-1 41.05 23 25.51 9.14 1.21
11-Nov-2 41.26 23.22 25.22 9.03 1.18
11-Nov-3 41.21 23.5 24.99 9.01 1.2
11-Nov-4 41.64 23.21 25.05 8.78 1.23
11-Nov-5 37.13 25.68 25.46 10.29 1.35
11-Nov-6 35.97 25.88 25.85 10.78 1.43
11-Nov-7 41.41 23.06 24.95 9.33 1.17
11-Nov-8 41.69 23.09 24.86 9.1 1.17
11-Nov-9 41.32 23.11 25.13 9.12 1.22
11-Nov-10 41.3 23.33 25.12 8.92 1.24
11-Nov-11 40.68 23.8 25.24 8.96 1.23
11-Nov-12 37.02 26.11 25.4 10.09 1.3
11-Nov-13 36.95 25.88 25.48 10.27 1.34
11-Nov-14 41.76 23.15 24.82 9.05 1.14
11-Nov-15 41.54 23.17 24.96 9.09 1.16
11-Nov-16 41.88 23.1 24.88 8.87 1.18
11-Nov-17 42.07 22.97 24.94 8.75 1.19
11-Nov-18 42.26 22.97 25.02 8.44 1.21
11-Nov-19 37.89 25.56 25.29 9.87 1.32
11-Nov-20 37.22 25.34 25.6 10.37 1.4
11-Nov-21 42.06 22.93 24.9 8.87 1.15
11-Nov-22 42.27 23 24.83 8.65 1.17
11-Nov-23 41.64 23.48 24.99 8.59 1.22
11-Nov-24 40.29 24.33 25.28 8.64 1.35
11-Nov-25 40.75 23.67 25.34 8.83 1.3
11-Nov-26 38.82 24.92 24.88 10.03 1.27
11-Nov-27 38 25.17 25.26 10.1 1.37
11-Nov-28 42.31 22.51 24.82 9.1 1.17
11-Nov-29 41.85 22.91 24.99 8.93 1.22
11-Nov-30 41.19 23.4 25.06 9.11 1.16
11-Dec-1 41.25 23.61 24.98 8.95 1.12
11-Dec-2 40.63 24.04 25.39 8.67 1.16
11-Dec-3 36.95 26.13 25.46 10.06 1.32
11-Dec-4 36.83 25.8 25.44 10.49 1.35
11-Dec-5 40.85 23.78 24.95 9.16 1.17
11-Dec-6 41.04 23.61 24.94 9.14 1.18
11-Dec-7 41.42 23.73 24.72 8.84 1.2
11-Dec-8 40.92 23.74 25.07 8.94 1.24
11-Dec-9 40.98 23.59 25.34 8.76 1.24
11-Dec-10 36.85 25.92 25.35 10.44 1.35
11-Dec-11 36.54 25.19 26.65 10.18 1.35
11-Dec-12 39.77 23.35 26.74 8.91 1.15
11-Dec-13 41.39 23.39 24.98 8.95 1.21
11-Dec-14 41.09 23.64 25.01 8.96 1.21
11-Dec-15 40.58 24.14 25.16 8.79 1.24
11-Dec-16 41 23.93 25.13 8.58 1.27
11-Dec-17 37.11 26.12 25.24 10.02 1.43
11-Dec-18 37.19 25.81 25.32 10.14 1.45
11-Dec-19 40.62 24.31 24.95 8.8 1.23
11-Dec-20 40.6 24.09 25.16 8.79 1.28
11-Dec-21 40.49 24.48 25.03 8.64 1.27
11-Dec-22 39.92 24.75 25.24 8.69 1.3
11-Dec-23 39.83 25.09 24.92 8.7 1.37
11-Dec-24 39.02 25.65 24.09 9.73 1.43
11-Dec-25 38.62 25.8 24.36 9.56 1.57
11-Dec-26 40.12 25.1 24.33 9.03 1.35
11-Dec-27 41.76 24.06 24.18 8.68 1.24
11-Dec-28 41.71 24.17 24.17 8.63 1.24
11-Dec-29 41.89 24.15 24.04 8.6 1.23
11-Dec-30 41.23 24.41 24.15 8.86 1.27
11-Dec-31 40.41 24.61 23.95 9.7 1.24
12-Jan-1 39.01 24.9 24.48 10.24 1.3
12-Jan-2 40.19 24.5 24.34 9.75 1.15
12-Jan-3 42 23.77 24.17 8.88 1.11
12-Jan-4 41.69 24.04 24.28 8.77 1.13
12-Jan-5 41.13 24.44 24.39 8.79 1.16
12-Jan-6 41.27 24.48 24.34 8.62 1.21
12-Jan-7 37.72 26.29 24.43 10.18 1.3
12-Jan-8 37.37 26.31 24.53 10.36 1.36
12-Jan-9 40.12 24.71 24.69 9.24 1.16
12-Jan-10 39.19 25.37 24.96 9.21 1.18
12-Jan-11 39.9 25.04 24.7 9.08 1.19
12-Jan-12 39.59 25.16 24.79 9.18 1.2
12-Jan-13 40.48 24.79 24.58 8.82 1.22
12-Jan-14 35.72 27.33 24.91 10.61 1.34
12-Jan-15 35.8 27.08 25.06 10.57 1.4
12-Jan-16 38.6 25.7 24.84 9.55 1.22
12-Jan-17 40.19 25.06 24.42 9.03 1.22
12-Jan-18 39.65 25.43 24.56 9.02 1.26
12-Jan-19 38.81 25.57 25.06 9.14 1.31
12-Jan-20 39.08 25.58 24.96 8.98 1.32
12-Jan-21 34.69 27.92 25.07 10.79 1.42
12-Jan-22 33.88 28.15 25.51 10.88 1.49
12-Jan-23 39.39 25.28 24.69 9.31 1.22
12-Jan-24 38.91 25.64 24.86 9.23 1.26
12-Jan-25 39.07 25.62 24.68 9.15 1.36
12-Jan-26 39.4 25.49 24.61 9.09 1.3
12-Jan-27 38.9 25.8 24.94 8.97 1.29
12-Jan-28 33.78 28.54 25.33 10.8 1.44
12-Jan-29 33.61 28.45 25.36 10.99 1.5
12-Jan-30 38.53 25.94 24.72 9.45 1.26
12-Jan-31 38.74 25.83 24.61 9.3 1.44
12-Feb-1 38.85 25.92 24.63 9.07 1.46
12-Feb-2 39.27 25.77 24.55 8.86 1.48
12-Feb-3 39.75 25.63 24.44 8.71 1.36
12-Feb-4 36.01 27.92 24.39 10.16 1.4
12-Feb-5 35.07 28.11 24.77 10.48 1.46
12-Feb-6 39.38 25.85 24.3 9.14 1.22
12-Feb-7 39.54 25.76 24.28 9.06 1.24
12-Feb-8 39.16 26.15 24.32 9.04 1.24
12-Feb-9 39.54 25.86 24.35 8.92 1.23
12-Feb-10 39.39 25.74 24.66 8.78 1.33
12-Feb-11 34.62 28.34 24.99 10.43 1.53
12-Feb-12 34.47 28.15 25.07 10.56 1.64
12-Feb-13 39.22 25.66 24.63 8.97 1.42
12-Feb-14 38.97 25.79 24.88 8.8 1.45
12-Feb-15 38.28 26.11 24.94 9.13 1.45
12-Feb-16 38.23 26.31 24.85 9.08 1.43
12-Feb-17 38.15 26.6 24.86 8.87 1.42
12-Feb-18 34.05 28.92 25.01 10.29 1.63
12-Feb-19 34.38 28.23 25.21 10.39 1.7
12-Feb-20 37.23 26.53 24.94 9.72 1.48
12-Feb-21 38.31 26.22 24.58 9.36 1.43
12-Feb-22 38.65 26.27 24.44 9.19 1.36
12-Feb-23 39.21 26.1 24.38 8.86 1.35
12-Feb-24 39.53 26.02 24.31 8.7 1.35
12-Feb-25 34.67 28.54 24.64 10.62 1.43
12-Feb-26 33.55 28.98 24.95 10.92 1.5
12-Feb-27 38.81 26.28 24.31 9.29 1.23
12-Feb-28 38.76 26.24 24.36 9.29 1.25
12-Feb-29 38.8 26.18 24.43 9.23 1.26
12-Mar-1 38.76 26.36 24.52 8.94 1.33
12-Mar-2 39.05 26.38 24.37 8.76 1.34
12-Mar-3 35.11 28.76 24.54 10.04 1.45
12-Mar-4 34.14 29.12 24.76 10.42 1.47
12-Mar-5 38.84 26.47 24.28 9.06 1.24
12-Mar-6 38.75 26.7 24.21 8.98 1.27
12-Mar-7 38.54 26.81 24.16 9.15 1.23
12-Mar-8 38.92 26.63 24.24 8.86 1.25
12-Mar-9 38.5 27.23 24.37 8.47 1.32
12-Mar-10 35.02 29.05 24.41 9.93 1.49
12-Mar-11 34.43 28.86 24.73 10.36 1.52
12-Mar-12 39.29 26.11 24.19 9.09 1.21
12-Mar-13 39.06 26.21 24.33 9.04 1.25
12-Mar-14 38.85 26.4 24.3 9.1 1.26
12-Mar-15 38.68 26.5 24.41 9.03 1.27
12-Mar-16 38.44 26.85 24.6 8.64 1.37
12-Mar-17 34.74 29.11 24.6 9.97 1.49
12-Mar-18 33.93 29.2 24.9 10.32 1.56
12-Mar-19 38.48 26.35 24.59 9.24 1.24
12-Mar-20 38.82 26.41 24.41 9.02 1.25
12-Mar-21 38.7 26.52 24.5 8.88 1.3
12-Mar-22 38.78 26.59 24.46 8.71 1.35
12-Mar-23 39.36 26.13 24.52 8.49 1.4
12-Mar-24 34.82 28.71 24.65 10.19 1.54
12-Mar-25 34.18 28.72 25 10.38 1.62
12-Mar-26 38.33 26.62 24.66 8.98 1.32
12-Mar-27 38.03 26.89 24.67 8.97 1.33
12-Mar-28 37.81 26.8 24.86 8.97 1.47
12-Mar-29 38.07 26.72 24.73 8.95 1.43
12-Mar-30 38.15 26.8 24.75 8.72 1.49
12-Mar-31 34.65 28.91 24.69 10.14 1.51
12-Apr-1 34.01 29.13 24.95 10.12 1.69
12-Apr-2 38.21 26.83 24.43 9.11 1.32
12-Apr-3 37.77 27.08 24.7 9.05 1.31
12-Apr-4 37.85 26.99 24.78 8.93 1.35
12-Apr-5 37.63 27.23 24.76 8.88 1.41
12-Apr-6 36.59 27.74 25 9.04 1.53
12-Apr-7 34.6 28.83 24.97 9.87 1.63
12-Apr-8 33.97 29.32 25 9.89 1.73
12-Apr-9 38.38 27.08 24.11 9.01 1.34
12-Apr-10 39.17 26.62 24.09 8.73 1.3
12-Apr-11 38.11 27.48 24.42 8.54 1.35
12-Apr-12 37.96 27.77 24.42 8.36 1.4
12-Apr-13 37.84 27.89 24.54 8.18 1.45
12-Apr-14 34.51 29.74 24.57 9.48 1.61
12-Apr-15 34.1 29.26 24.93 9.93 1.68
12-Apr-16 38.39 26.85 24.48 8.81 1.37
12-Apr-17 38.17 26.95 24.61 8.72 1.45
12-Apr-18 38.66 26.79 24.42 8.63 1.4
12-Apr-19 38.17 27.01 24.65 8.6 1.46
12-Apr-20 38.37 26.82 24.89 8.37 1.44
12-Apr-21 34.01 29.43 25.06 9.7 1.67
12-Apr-22 33.64 29.3 25.17 10.06 1.72
12-Apr-23 38.02 27.06 24.54 8.87 1.4
12-Apr-24 37.72 27.18 24.66 8.83 1.5
12-Apr-25 37.46 27.44 24.67 8.83 1.49
12-Apr-26 37.14 27.72 24.78 8.77 1.47
12-Apr-27 37.98 26.97 24.81 8.53 1.56
12-Apr-28 34.37 29.1 24.76 10.03 1.64
12-Apr-29 33.89 29.2 24.98 10.12 1.7
12-Apr-30 37.52 27.2 24.55 9.18 1.43
12-May-1 36.79 27.68 24.56 9.42 1.44
12-May-2 37.11 27.51 24.83 8.86 1.45
12-May-3 37.1 27.48 24.93 8.69 1.56
12-May-4 37.27 27.27 25.01 8.51 1.58
12-May-5 33.37 29.61 24.96 9.95 1.72
12-May-6 33.02 29.56 25.21 10.08 1.74
12-May-7 37.39 27.12 24.64 9.06 1.4
12-May-8 37.33 27.36 24.6 8.95 1.41
12-May-9 37.49 27.06 24.59 8.94 1.42
12-May-10 37.61 27.11 24.54 8.82 1.43
12-May-11 37.5 27.2 24.66 8.44 1.55
12-May-12 33.08 29.73 24.94 9.73 1.79
12-May-13 32.45 29.93 25.32 9.96 1.84
12-May-14 37.63 27.2 24.43 8.82 1.39
12-May-15 37.37 27.41 24.54 8.91 1.42
12-May-16 37.08 27.52 24.64 8.77 1.45
12-May-17 36.74 27.74 24.6 8.73 1.49
12-May-18 37.17 27.37 24.66 8.47 1.53
12-May-19 32.84 29.71 25.11 9.78 1.78
12-May-20 32.45 30 25.35 9.91 1.8
12-May-21 36.96 27.51 24.62 8.91 1.44
12-May-22 36.82 27.77 24.81 8.8 1.41
12-May-23 36.57 28.06 25.02 8.71 1.52
12-May-24 36.23 28.25 25.17 8.68 1.55
12-May-25 35.78 28.99 25.03 8.47 1.6
12-May-26 31.88 31.09 25.27 9.77 1.86
12-May-27 31.38 31.47 25.57 9.49 1.96
12-May-28 33.82 30.22 24.95 9.45 1.45
12-May-29 36.58 28.8 24.3 8.99 1.22
12-May-30 36.52 28.89 24.72 8.4 1.35
12-May-31 36.48 28.97 24.35 8.68 1.4
12-Jun-1 36.72 28.51 24.56 8.47 1.62
12-Jun-2 33.03 30.46 24.73 9.82 1.84
12-Jun-3 32.73 30.51 24.92 9.85 1.88
12-Jun-4 37.2 28.07 24.25 8.86 1.51
12-Jun-5 36.62 28.38 24.51 8.83 1.54
12-Jun-6 37.16 28.3 24.21 8.72 1.51
12-Jun-7 37.22 28.3 24.21 8.54 1.61
12-Jun-8 36.85 28.54 24.44 8.36 1.7
12-Jun-9 32.71 30.98 24.59 9.81 1.81
12-Jun-10 32.64 30.57 24.9 9.95 1.82
12-Jun-11 37.43 28.12 24.01 8.85 1.47
12-Jun-12 37.41 28.04 24.14 8.78 1.52
12-Jun-13 37.09 28.4 24.17 8.67 1.55
12-Jun-14 36.89 28.52 24.21 8.65 1.6
12-Jun-15 36.74 28.67 24.47 8.3 1.68
12-Jun-16 33 30.51 24.73 9.66 1.94
12-Jun-17 32.57 30.64 24.85 9.85 1.95
12-Jun-18 36.95 28.43 24.18 8.76 1.55
12-Jun-19 37.53 28.29 23.91 8.58 1.55
12-Jun-20 37.64 28.41 23.74 8.52 1.53
12-Jun-21 38.19 28.28 23.49 8.44 1.45
12-Jun-22 37.28 28.84 23.77 8.45 1.51
12-Jun-23 33.71 30.25 24.33 9.76 1.79
12-Jun-24 33.71 30.18 24.35 9.79 1.82
12-Jun-25 37.52 28.34 23.73 8.81 1.47
12-Jun-26 37.91 28.22 23.52 8.78 1.42
12-Jun-27 37.47 28.71 23.61 8.73 1.34
12-Jun-28 37.29 28.85 23.58 8.92 1.22
12-Jun-29 37.25 29.08 23.45 8.87 1.2
12-Jun-30 34.08 30.67 23.65 9.98 1.49
12-Jul-1 33.93 30.48 23.92 9.85 1.72
12-Jul-2 37.83 28.67 23.21 8.87 1.29
12-Jul-3 37.59 28.79 23.45 8.64 1.38
12-Jul-4 35.27 30.2 23.99 8.83 1.55
12-Jul-5 37.41 29.12 23.34 8.65 1.33
12-Jul-6 37.68 28.95 23.47 8.42 1.35
12-Jul-7 34.34 30.49 23.53 10.04 1.45
12-Jul-8 34.22 30.26 23.81 10.02 1.53
12-Jul-9 38.1 28.38 23.3 8.8 1.29
12-Jul-10 37.59 28.74 23.4 8.74 1.39
12-Jul-11 37.05 29.07 23.59 8.78 1.38
12-Jul-12 36.73 29.35 23.71 8.63 1.46
12-Jul-13 36.14 29.43 24.27 8.33 1.71
12-Jul-14 32.45 31.12 24.59 9.73 1.97
12-Jul-15 32.65 30.86 24.51 9.84 2
12-Jul-16 35.97 29.53 24 8.73 1.64
12-Jul-17 35.9 29.69 24.03 8.66 1.6
12-Jul-18 35.89 29.64 24.05 8.62 1.66
12-Jul-19 35.55 29.82 24.32 8.45 1.71
12-Jul-20 35.35 30.22 24.17 8.69 1.42
12-Jul-21 32.68 31.54 23.9 10.38 1.34
12-Jul-22 32.3 31.72 24.01 10.43 1.39
12-Jul-23 36.54 29.66 23.32 9.22 1.12
12-Jul-24 36.8 29.73 23.22 8.95 1.16
12-Jul-25 36.87 29.67 23.09 9.06 1.17
12-Jul-26 37.24 29.42 22.94 9.09 1.18
12-Jul-27 36.96 29.85 22.96 8.93 1.16
12-Jul-28 33.24 31.56 23.26 10.55 1.24
12-Jul-29 33.88 31.14 23.19 10.31 1.35
12-Jul-30 37.99 29.1 22.55 9.11 1.14
12-Jul-31 36.87 29.8 22.86 9.23 1.11
12-Aug-1 36.82 29.97 22.78 9.18 1.12
12-Aug-2 36.99 29.65 22.91 9.12 1.17
12-Aug-3 36.35 29.9 23.33 9.02 1.23
12-Aug-4 33.35 31.37 23.3 10.54 1.28
12-Aug-5 33.02 31.19 23.56 10.74 1.33
12-Aug-6 36.6 29.79 23.05 9.27 1.15
12-Aug-7 37.88 28.95 22.66 9.21 1.16
12-Aug-8 38.04 28.93 22.62 9.06 1.21
12-Aug-9 38.95 28.51 22.21 9 1.21
12-Aug-10 37.85 29.04 22.63 9.12 1.22
12-Aug-11 34.65 30.69 22.66 10.58 1.28
12-Aug-12 34.73 30.64 22.7 10.43 1.35
12-Aug-13 38.27 28.99 22.2 9.26 1.13
12-Aug-14 38.35 28.93 22.16 9.24 1.16
12-Aug-15 38.17 29.21 22.01 9.27 1.21
12-Aug-16 38.01 29.31 22.26 9.05 1.22
12-Aug-17 39.08 28.74 22.01 8.82 1.21
12-Aug-18 33.1 31.71 22.99 10.69 1.34
12-Aug-19 35.27 30.38 22.24 10.57 1.39
12-Aug-20 38.26 28.86 21.94 9.6 1.19
12-Aug-21 37.61 29.18 22.26 9.61 1.19
12-Aug-22 37.59 29.26 22.24 9.58 1.19
12-Aug-23 37.1 29.49 22.36 9.7 1.2
12-Aug-24 37.23 29.31 22.49 9.59 1.23
12-Aug-25 32.87 31.42 22.8 11.42 1.33
12-Aug-26 33.7 30.86 22.67 11.26 1.38
12-Aug-27 35.72 29.98 22.82 10.19 1.18
12-Aug-28 35.46 30.14 23.01 10.05 1.2
12-Aug-29 35.27 30.31 23.01 10.05 1.2
12-Aug-30 35.27 30.2 23.03 10.14 1.21
12-Aug-31 35.41 30.23 23.05 9.93 1.22
12-Sep-1 31.68 32.29 23.17 11.38 1.33
12-Sep-2 32.21 31.97 23.09 11.14 1.43
12-Sep-3 32.79 31.54 23.4 10.84 1.28
12-Sep-4 36.6 29.57 22.51 10.02 1.15
12-Sep-5 36.58 29.57 22.52 10.02 1.15
12-Sep-6 36.66 29.59 22.58 9.86 1.16
12-Sep-7 37.65 29.13 22.26 9.62 1.19
12-Sep-8 32.56 31.63 22.67 11.67 1.33
12-Sep-9 32.91 31.4 22.46 11.74 1.35
12-Sep-10 37.47 29.24 22.17 9.87 1.12
12-Sep-11 37.33 29.41 22.26 9.76 1.1
12-Sep-12 36.66 29.79 22.13 10.12 1.16
12-Sep-13 36.44 29.67 22.6 9.98 1.18
12-Sep-14 37.23 29.35 22.34 9.77 1.16
12-Sep-15 32.52 31.76 22.66 11.61 1.29
12-Sep-16 31.94 31.71 23.01 11.85 1.35
12-Sep-17 36.06 29.74 22.62 10.36 1.08
12-Sep-18 36.35 29.47 22.59 10.36 1.08
12-Sep-19 35.59 30.16 22.57 10.37 1.15
12-Sep-20 35.54 30.27 22.78 10.07 1.17
12-Sep-21 35.89 30.2 22.78 9.76 1.2
12-Sep-22 31.43 32.77 22.75 11.49 1.4
12-Sep-23 30.65 32.8 23.06 11.9 1.43
12-Sep-24 35.69 30.19 22.66 10.12 1.19
12-Sep-25 35.78 30.17 22.67 10.04 1.18
12-Sep-26 35.64 30.31 22.66 10.07 1.16
12-Sep-27 36.16 30.25 22.37 9.94 1.11
12-Sep-28 36.15 30.37 22.47 9.69 1.17
12-Sep-29 32.2 32.53 22.49 11.33 1.28
12-Sep-30 31.85 32.62 22.56 11.45 1.36
12-Oct-1 36.53 30.02 22.24 9.93 1.14
12-Oct-2 37 30.09 21.95 9.65 1.16
12-Oct-3 36.53 30.33 22.12 9.71 1.16
12-Oct-4 37.22 29.98 22.01 9.45 1.18
12-Oct-5 37.04 30.23 22.12 9.25 1.19
12-Oct-6 33.03 32.47 22.19 10.83 1.3
12-Oct-7 32.8 32.37 22.23 11.07 1.36
12-Oct-8 36.48 30.49 21.68 10.05 1.14
12-Oct-9 35.71 30.95 22.14 9.91 1.13
12-Oct-10 35.29 31.19 22.3 9.92 1.14
12-Oct-11 35.28 31.25 22.31 9.82 1.16
12-Oct-12 35.25 31.22 22.54 9.6 1.21
12-Oct-13 31.99 33.4 22.95 9.89 1.56
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.browser text {
text-anchor: end;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.js"></script>
<script>
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var parseDate = d3.time.format("%y-%b-%d").parse,
formatPercent = d3.format(".0%");
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var color = d3.scale.category20();
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickFormat(formatPercent);
var area = d3.svg.area()
.x(function(d) { return x(d.date); })
.y0(function(d) { return y(d.y0); })
.y1(function(d) { return y(d.y0 + d.y); });
var stack = d3.layout.stack()
.values(function(d) { return d.values; });
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.tsv("data.tsv", function(error, data) {
color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));
data.forEach(function(d) {
d.date = parseDate(d.date);
});
var browsers = stack(color.domain().map(function(name) {
console.log({
name: name,
values: data.map(function(d) {
return {date: d.date, y: d[name] / 100};
})
}));
return {
name: name,
values: data.map(function(d) {
return {date: d.date, y: d[name] / 100};
})
};
}));
x.domain(d3.extent(data, function(d) { return d.date; }));
var browser = svg.selectAll(".browser")
.data(browsers)
.enter().append("g")
.attr("class", "browser");
browser.append("path")
.attr("class", "area")
.attr("d", function(d) { return area(d.values); })
.style("fill", 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.y0 + d.value.y / 2) + ")"; })
.attr("x", -6)
.attr("dy", ".35em")
.text(function(d) { return d.name; });
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.