Skip to content

Commit

Permalink
First pass of cleanup for w3c#180
Browse files Browse the repository at this point in the history
  • Loading branch information
@almossawi
almossawi committed Nov 28, 2014
1 parent a120494 commit d624fbb
Show file tree
Hide file tree
Showing 3 changed files with 48 additions and 54 deletions.
27 changes: 11 additions & 16 deletions dev.htm
View file
Expand Up @@ -311,6 +311,7 @@ <h2 class='trunk-title'>Histograms</h2>
subject to drastic change
</div>
</div>

<div class='row trunk-section'>
<div class='col-lg-4'>
<h2 class='trunk-title'>Handling Missing Data</h2>
Expand All @@ -325,25 +326,17 @@ <h2 class='trunk-title'>Handling Missing Data</h2>
</div>
</div>
</div>

<div class='row trunk-section'>
<div class='row col-lg-12'>
<div class='col-lg-2'></div>
<div class='col-lg-8'>
<h2 class='trunk-title'>Data Tables</h2>
<p>
Sometimes the easiest and most appropriate way to display data is to make a table. MetricsGraphics.js aims to make the creation of data tables very simple. We are working on implementing sparklines, bullet charts, and other niceties.
</p>
</div>
<div class='col-lg-2'></div>
</div>
<div class='row col-lg-12'>
<div class='row'>
<div class='col-lg-1'></div>
<div class='col-lg-10 text-center' id='table1'></div>
<div class='col-lg-1'></div>
</div>
<div class='col-lg-4'>
<h2 class='trunk-title'>Data Tables</h2>
<p>
A table is often the most appropriate way to present data. We aim to make the creation of data tables very simple. We are working on implementing sparklines, bullet charts, and other niceties.
</p>
</div>
<div class='col-lg-8 text-center' id='table1'></div>
</div>

<div class='row trunk-section'>
<div class='col-lg-4'>
<h2 class='trunk-title'>Data-Based Button Layouts</h2>
Expand All @@ -357,6 +350,7 @@ <h2 class='trunk-title'>Data-Based Button Layouts</h2>
</div>
</div>
</div>

<div class='row trunk-section'>
<div class='col-lg-4'>
<h2 class='trunk-title'>Barplots</h2>
Expand All @@ -371,6 +365,7 @@ <h2 class='trunk-title'>Barplots</h2>
</div>
</div>
</div>

<div class='footer'>
<a href='http://metricsgraphicsjs.org'>MetricsGraphics.js 1.0</a>
<br />Created by <a href='https://twitter.com/alialmossawi'>Ali Almossawi</a> and
Expand Down
17 changes: 15 additions & 2 deletions examples.htm
View file
Expand Up @@ -302,19 +302,31 @@ <h2 class='trunk-title'>Handling Missing Data</h2>
</div>
</div>
</div>

<div class='row trunk-section'>
<div class='col-lg-4'>
<h2 class='trunk-title'>Data Tables</h2>
<p>
Sometimes the easiest and most appropriate way to display data is to make a table. MetricsGraphics.js aims to make the creation of data tables very simple. We are working on implementing sparklines, bullet charts, and other niceties.
A table is often the most appropriate way to present data. We aim to make the creation of data tables very simple. We are working on implementing sparklines, bullet charts, and other niceties.
</p>
</div>
<div class='col-lg-8 text-center' id='table1'></div>
</div>

<div class='row trunk-section'>
<div class='col-lg-4'>
<h2 class='trunk-title'>Data-Based Button Layouts</h2>
<p>
It can be very useful to have buttons easily made out of a data set for easy segmenting &amp; selecting.
</p>
</div>
<div class='col-lg-8'>
<div class='row'>
<div class='col-lg-12 text-center' id='table1'></div>
<div class='col-lg-12 text-center' id='buttons'></div>
</div>
</div>
</div>

<div class='row trunk-section'>
<div class='col-lg-4'>
<h2 class='trunk-title'>Barplots</h2>
Expand All @@ -329,6 +341,7 @@ <h2 class='trunk-title'>Barplots</h2>
</div>
</div>
</div>

<div class='footer'>
<a href='http://metricsgraphicsjs.org'>MetricsGraphics.js 1.0</a>
<br />Created by <a href='https://twitter.com/alialmossawi'>Ali Almossawi</a> and
Expand Down
58 changes: 22 additions & 36 deletions js/main.js
View file
Expand Up @@ -218,14 +218,10 @@ $(document).ready(function() {
right: torso.right,
target: '#missing1',
linked: true,
y_rug:true,
y_extended_ticks: true,
x_accessor: 'date',
y_accessor: ['value', 'value2', 'value3']
});



})

d3.json('data/fake_users3.json', function(data) {
Expand Down Expand Up @@ -721,17 +717,6 @@ $(document).ready(function() {
}
})

//add bar charts
// var names = ['first', 'second', 'third', 'fourth', 'fifth']
// var bar_data = [];
// d3.range(5).map(function(d){
// return Math.floor(d3.random.logNormal()()*100);
// }).forEach(function(d,i){
// d3.range(d).forEach(function(di,ii){
// bar_data.push(names[i]);
// })
// });

var bar_data = [
{'label': 'first', 'value':4, 'baseline':4.2, 'prediction': 2},
{'label': 'second', 'value':2.1, 'baseline':3.1, 'prediction': 3},
Expand Down Expand Up @@ -852,7 +837,6 @@ $(document).ready(function() {
});
})


//
var bdata = [
{a:'apples', b:'quartz'},
Expand All @@ -871,39 +855,41 @@ $(document).ready(function() {

// data tables
var table_data = [
{'year': 1852,'value1': 10.2, 'value2': 1030004.43423,'share':.12, 'total':34003400, 'temp': 43, 'geo': 'United Kingdom', 'description': "Having a way of describing a row can be useful."},
{'year': 1901,'value1': 10.1, 'value2': 54003.223, 'share':.11, 'total':4302100, 'temp': 55, 'geo': 'United States', 'description': "More made-up numbers."},
{'year': 1732,'value1': 4.3, 'value2': 1004.91422, 'share':.14, 'total':4300240, 'temp': 42, 'geo': 'France', 'description': "We didn't specify a title for this column."},
{'year': 1945,'value1': 2.9, 'value2': 2430.121, 'share':.23, 'total':24000000, 'temp': 54, 'geo': 'Brazil', 'description': "Brazil, Brazil."},
{'year': 1910,'value1': 1.0, 'value2': 5432.3, 'share':.19, 'total':130000, 'temp': 52, 'geo': 'India', 'description': "Last description in the whole thing."}
{ 'year': 1852, 'value1': 10.2, 'value2': 1030004.43423,'share':.12, 'total': 34003400, 'temp': 43, 'geo': 'United Kingdom', 'description': "Having a way of describing a row can be useful." },
{ 'year': 1901, 'value1': 10.1, 'value2': 54003.223, 'share':.11, 'total': 4302100, 'temp': 55, 'geo': 'United States', 'description': "More made-up numbers." },
{ 'year': 1732, 'value1': 4.3, 'value2': 1004.91422, 'share':.14, 'total': 4300240, 'temp': 42, 'geo': 'France', 'description': "We didn't specify a title for this column." },
{ 'year': 1945, 'value1': 2.9, 'value2': 2430.121, 'share':.23, 'total': 24000000, 'temp': 54, 'geo': 'Brazil', 'description': "Brazil, Brazil." },
{ 'year': 1910, 'value1': 1.0, 'value2': 5432.3, 'share':.19, 'total': 130000, 'temp': 52, 'geo': 'India', 'description': "Last description in the whole thing." }
]

var table1 = new data_table({
data: table_data,
title: 'First Table',
description: 'A table has many of the same properties as a data_graphic.'
})
data: table_data,
title: 'First Table',
description: 'A table has many of the same properties as a data_graphic.'
})
.target('#table1')
.title( {
.title({
accessor: 'geo',
secondary_accessor:'year',
label: 'Country',
description: 'These are arbitrary countries I thought of, on the spot, with arbitrary years underneath.'})
.number({accessor: 'value1', label: 'Size', value_formatter:function(d){return d+' yrds'}})
.number({accessor: 'value2', label: 'Score', round:2, font_weight: 'bold'})
.number({accessor: 'temp', label: 'Temp.', format:'temperature', width:100, color: 'gray'})
description: 'These are arbitrary countries with arbitrary years underneath.'
})
.number({ accessor: 'value1', label: 'Size', value_formatter: function(d){ return d+' yrds' }})
.number({ accessor: 'value2', label: 'Score', round: 2, font_weight: 'bold' })
.number({ accessor: 'temp', label: 'Temp.', format: 'temperature', width: 100, color: 'gray' })
.number({
accessor: 'total',
label: 'Volume',
format:'count', currency:'$',
width:100,
font_weight: function(d){return d < 5000000 ? 'bold' : '300'},
color: function(d){return d < 5000000 ? '#b20000' : 'black'}
format: 'count', currency: '$',
width: 100,
font_weight: function(d){ return d < 5000000 ? 'bold' : '300' },
color: function(d){ return d < 5000000 ? '#b20000' : 'black' }
})
.number({accessor: 'share', label: 'Share', format:'percentage', width:100})
.text({accessor: 'description', width:240, font_style: 'italic'})
.number({ accessor: 'share', label: 'Share', format: 'percentage', width: 100 })
.text({ accessor: 'description', width: 240, font_style: 'italic' })
.display();


//add this scatterplot and color the groups based on the theme
addScatterplotSizeAndColor('light');

Expand Down

0 comments on commit d624fbb

Please sign in to comment.