diff options
Diffstat (limited to 'priv/static/metrics-graphics-3.0-alpha3/examples/charts/axes.htm')
| -rw-r--r-- | priv/static/metrics-graphics-3.0-alpha3/examples/charts/axes.htm | 486 |
1 files changed, 0 insertions, 486 deletions
diff --git a/priv/static/metrics-graphics-3.0-alpha3/examples/charts/axes.htm b/priv/static/metrics-graphics-3.0-alpha3/examples/charts/axes.htm deleted file mode 100644 index 375120a..0000000 --- a/priv/static/metrics-graphics-3.0-alpha3/examples/charts/axes.htm +++ /dev/null @@ -1,486 +0,0 @@ - <div class='row trunk-section'> - <div class='col-lg-7 text-center' id='xnotdate'></div> - <div class='col-lg-5'> - <div class='data-column'><a href='data/xnotdate.json'>data</a></div> - -<pre><code class='javascript'>d3.json('data/xnotdate.json', function(data) { - MG.data_graphic({ - title: "Axis Labels", - description: "A graphic where we're not plotting dates on the x-axis and where the axes include labels and the line animates on load. We've also enabled extended ticks along the y-axis.", - data: data, - animate_on_load: true, - area: false, - width: 600, - height: 240, - right: 40, - left: 90, - bottom: 50, - y_extended_ticks: true, - target: '#xnotdate', - x_accessor: 'males', - y_accessor: 'females', - x_label: 'males', - y_label: 'females', - }); -});</code></pre> - - </div> - </div> - - <div class='row trunk-section'> - <div class='col-lg-7 text-center' id='percentage'></div> - <div class='col-lg-5'> - <div class='data-column'><a href='data/some_percentage.json'>data</a></div> - -<pre><code class='javascript'>d3.json('data/some_percentage.json', function(data) { - for (var i = 0; i < data.length; i++) { - data[i] = MG.convert.date(data[i], 'date'); - } - - MG.data_graphic({ - title: "Some Percentages", - description: "Here is an example that shows percentages.", - data: data, - width: 600, - height: 200, - right: 40, - format: 'percentage', - target: '#percentage' - }); -});</code></pre> - - </div> - </div> - - <div class='row trunk-section'> - <div class='col-lg-7 text-center' id='currency'></div> - <div class='col-lg-5'> - <div class='data-column'><a href='data/some_currency.json'>data</a></div> - -<pre><code class='javascript'>d3.json('data/some_currency.json', function(data) { - data = MG.convert.date(data, 'date'); - MG.data_graphic({ - title: "Some Currency", - description: "Here is an example that uses custom units for currency.", - data: data, - width: 600, - height: 200, - right: 40, - target: '#currency', - yax_units: '$' - }); -});</code></pre> - - </div> - </div> - - <div class='row trunk-section'> - <div class='col-lg-7 text-center' id='log1'></div> - <div class='col-lg-5'> - <div class='data-column'><a href='data/log.json'>data</a></div> - -<pre><code class='javascript'>d3.json('data/log.json', function(data) { - data = [data]; - for (var i = 0; i < data.length; i++) { - data[i] = MG.convert.date(data[i], 'date'); - } - - MG.data_graphic({ - title: "Log Scale", - description: "You can change the y-axis' scale to logarithmic by setting <i>y_scale_type</i> to <i>log</i>.", - data: data, - y_scale_type: 'log', - width: 600, - height: 200, - right: 40, - target: '#log1' - }); -});</code></pre> - - </div> - </div> - - <div class='row trunk-section'> - <div class='col-lg-7 text-center'> - <div class='col-lg-12 text-center' id='hidden1'></div> - <div class='col-lg-12 text-center' id='hidden2'></div> - </div> - <div class='col-lg-5'> - <div class='data-column'> - <a href='data/fake_users1.json'>data 1</a>, - <a href='data/brief-1.json'>data 2</a> - </div> - -<pre><code class='javascript'>d3.json('data/fake_users1.json', function(data) { - data = MG.convert.date(data, 'date'); - MG.data_graphic({ - title: "No X Axis", - description: "You can hide either axis by setting <i>x_axis</i> or <i>y_axis</i> to false.", - data: data, - decimals: 0, - width: 600, - height: 200, - right: 40, - xax_count: 4, - target: '#hidden1', - area: false, - x_axis: false, - }); -}); - -d3.json('data/brief-1.json', function(data) { - data = MG.convert.date(data, 'date'); - MG.data_graphic({ - title: "No Y Axis", - description: "You can hide either axis by setting <i>x_axis</i> or <i>y_axis</i> to false.", - data: data, - decimals: 0, - width: 600, - height: 200, - right: 20, - xax_count: 4, - target: '#hidden2', - area: false, - y_axis: false - }); -});</code></pre> - - </div> - </div> - - <div class='row trunk-section'> - <div class='col-lg-7 text-center' id='y_rug'></div> - <div class='col-lg-5'> - <div class='data-column'><a href='data/fake_users1.json'>data</a></div> - -<pre><code class='javascript'>d3.json('data/fake_users1.json', function(data) { - data = MG.convert.date(data, 'date'); - MG.data_graphic({ - title: "Rug Plots", - description: "You can set rug plots either axis by setting <i>x_rug</i> or <i>y_rug</i> to true.", - data: data, - decimals: 0, - width: 600, - height: 200, - right: 40, - target: '#y_rug', - area: false, - y_rug: true - }); -});</code></pre> - - </div> -</div> - - - - - - - - - - -<div class='row trunk-section'> - <div class='col-lg-7 text-center'> - <div class='row'> - <div class='col-lg-6 text-center' id='axis-pos-1'></div> - <div class='col-lg-6 text-center' id='axis-pos-2'></div> - </div> - <div class='row'> - <div class='col-lg-6 text-center' id='axis-pos-3'></div> - <div class='col-lg-6 text-center' id='axis-pos-4'></div> - </div> - </div> - <div class='col-lg-5'> - <div class='data-column'> - <a href='data/fake_users1.json'>data 1</a>, - <a href='data/brief-1.json'>data 2</a> - </div> - -<pre><code class='javascript'>d3.json('data/brief-1.json', function(data) { - data = MG.convert.date(data, 'date'); - var position = [['left', 'top'],['right', 'top'], ['left', 'bottom'], ['right', 'bottom']]; - position.forEach(function(pos,i) { - console.log(pos,i) - var i = i+1; - - MG.data_graphic({ - title: "Axis Positions: " + pos[0] +', ' + pos[1], - description: "Set <i>x_axis_position: " + pos[1] + "</i> and <i>x_axis_position: " + pos[0] +"</i>.", - x_axis_position: pos[1], - y_axis_position: pos[0], - data: data, - decimals: 0, - left: pos[0] === 'right' ? 20 : 50, - right: pos[0] === 'left' ? 20 : 50, - top: pos[1] === 'bottom' ? 50 : 50, - bottom: pos[1] === 'top' ? 25 : 50, - target: '#axis-pos-'+i, - area: false - }); - }) -});</code></pre> - - </div> -</div> - - -<script> -d3.json('data/brief-1.json', function(data) { - data = MG.convert.date(data, 'date'); - var position = [['left', 'top'],['right', 'top'], ['left', 'bottom'], ['right', 'bottom']]; - position.forEach(function(pos,i) { - var i = i+1; - - MG.data_graphic({ - title: "Axis Positions: " + pos[0] +', ' + pos[1], - description: "Set <i>x_axis_position: " + pos[1] + "</i> and <i>x_axis_position: " + pos[0] +"</i>.", - x_axis_position: pos[1], - y_axis_position: pos[0], - data: data, - decimals: 0, - left: pos[0] === 'right' ? 20 : 50, - right: pos[0] === 'left' ? 20 : 50, - top: pos[1] === 'bottom' ? 50 : 50, - bottom: pos[1] === 'top' ? 25 : 50, - target: '#axis-pos-'+i, - area: false - }); - }) -}); -</script> - - - - - - - - - - <div class='row trunk-section'> - <div class='col-lg-7 text-center'> - <div class='col-lg-6 text-center' id='neg1'></div> - <div class='col-lg-6 text-center' id='neg2'></div> - <div class='col-lg-6 text-center' id='y-axis-not-zero'></div> - </div> - <div class='col-lg-5'> - <div class='data-column'> - <a href='data/neg1.json'>data 1</a>, - <a href='data/neg2.json'>data 2</a> - </div> - -<pre><code class='javascript'>d3.json('data/neg1.json', function(data) { - data = MG.convert.date(data, 'date'); - MG.data_graphic({ - title: "Negative Values 1", - description: "MG defaults to 0 on the y-axis as min if there are no negative numbers. If there are negatives, should provide some buffer below.", - data: data, - width: 295, - height: 220, - right: 10, - target: '#neg1' - }); - - var data2 = MG.clone(data).map(function(d) { - d.value = d.value + 550; - return d; - }); - - MG.data_graphic({ - title: "Y-Axis Not Zero", - data: data2, - width: 295, - height: 220, - right: 10, - min_y_from_data: true, - yax_units: '$', - target: '#y-axis-not-zero', - x_accessor: 'date', - y_accessor: 'value' - }); -}); - -d3.json('data/neg2.json', function(data) { - MG.data_graphic({ - title: "Negative Values 2", - data: data, - width: 295, - height: 220, - right: 10, - target: '#neg2', - x_accessor: 'subject', - y_accessor: 'measure' - }); -});</code></pre> - - </div> - </div> - -<script> -MG._hooks = {}; -d3.json('data/xnotdate.json', function(data) { - MG.data_graphic({ - title: "Axis Labels", - description: "A graphic where we're not plotting dates on the x-axis and where the axes include labels and the line animates on load. We've also enabled extended ticks along the y-axis.", - data: data, - animate_on_load: true, - area: false, - width: 600, - height: 240, - right: 40, - left: 90, - bottom: 50, - y_extended_ticks: true, - target: '#xnotdate', - x_accessor: 'males', - y_accessor: 'females', - x_label: 'males', - y_label: 'females', - }); -}); - -d3.json('data/some_percentage.json', function(data) { - for (var i = 0; i < data.length; i++) { - data[i] = MG.convert.date(data[i], 'date'); - } - - MG.data_graphic({ - title: "Some Percentages", - description: "Here is an example that shows percentages.", - data: data, - width: 600, - height: 200, - right: 40, - format: 'percentage', - target: '#percentage' - }); -}); - -d3.json('data/some_currency.json', function(data) { - data = MG.convert.date(data, 'date'); - MG.data_graphic({ - title: "Some Currency", - description: "Here is an example that uses custom units for currency.", - data: data, - width: 600, - height: 200, - right: 40, - target: '#currency', - yax_units: '$' - }); -}); - -d3.json('data/log.json', function(data) { - data = [data]; - for (var i = 0; i < data.length; i++) { - data[i] = MG.convert.date(data[i], 'date'); - } - - MG.data_graphic({ - title: "Log Scale", - description: "You can change the y-axis' scale to logarithmic by setting <i>y_scale_type</i> to <i>log</i>.", - data: data, - y_scale_type: 'log', - width: 600, - height: 200, - right: 40, - target: '#log1' - }); -}); - -d3.json('data/fake_users1.json', function(data) { - data = MG.convert.date(data, 'date'); - MG.data_graphic({ - title: "No X Axis", - description: "You can hide either axis by setting <i>x_axis</i> or <i>y_axis</i> to false.", - data: data, - decimals: 0, - width: 600, - height: 200, - right: 40, - xax_count: 4, - target: '#hidden1', - area: false, - x_axis: false, - }); -}); - -d3.json('data/brief-1.json', function(data) { - data = MG.convert.date(data, 'date'); - MG.data_graphic({ - title: "No Y Axis", - description: "You can hide either axis by setting <i>x_axis</i> or <i>y_axis</i> to false.", - data: data, - decimals: 0, - width: 600, - height: 200, - right: 20, - xax_count: 4, - target: '#hidden2', - area: false, - y_axis: false - }); -}); - -d3.json('data/fake_users1.json', function(data) { - data = MG.convert.date(data, 'date'); - MG.data_graphic({ - title: "Rug Plots", - description: "You can set rug plots either axis by setting <i>x_rug</i> or <i>y_rug</i> to true.", - data: data, - decimals: 0, - width: 600, - height: 200, - right: 40, - target: '#y_rug', - area: false, - y_rug: true - }); -}); - -d3.json('data/neg1.json', function(data) { - data = MG.convert.date(data, 'date'); - MG.data_graphic({ - title: "Negative Values 1", - description: "MG defaults to 0 on the y-axis as min if there are no negative numbers. If there are negatives, should provide some buffer below.", - data: data, - width: 295, - height: 220, - right: 10, - target: '#neg1' - }); - - var data2 = MG.clone(data).map(function(d) { - d.value = d.value + 550; - return d; - }); - - MG.data_graphic({ - title: "Y-Axis Not Zero", - data: data2, - width: 295, - height: 220, - right: 10, - min_y_from_data: true, - yax_units: '$', - target: '#y-axis-not-zero', - x_accessor: 'date', - y_accessor: 'value' - }); -}); - -d3.json('data/neg2.json', function(data) { - MG.data_graphic({ - title: "Negative Values 2", - data: data, - width: 295, - height: 220, - right: 10, - target: '#neg2', - x_accessor: 'subject', - y_accessor: 'measure' - }); -}); -</script> |