initial tag cloud
This commit is contained in:
Gil Barbara
@@ -1,4 +1,5 @@
|
||||
var React = require('react/addons');
|
||||
var React = require('react/addons'),
|
||||
ScaleLog = require('../utils/scaleLog');
|
||||
|
||||
var Header = React.createClass({
|
||||
mixins: [React.addons.PureRenderMixin],
|
||||
@@ -7,14 +8,75 @@ var Header = React.createClass({
|
||||
logos: React.PropTypes.array.isRequired
|
||||
},
|
||||
|
||||
render: function () {
|
||||
var props = this.props;
|
||||
componentWillMount () {
|
||||
let tags = {},
|
||||
sizer = {
|
||||
min: 1,
|
||||
max: 0
|
||||
};
|
||||
|
||||
this.props.logos.forEach(function (d) {
|
||||
d.tags.forEach(function (t) {
|
||||
if (!tags.hasOwnProperty(t)) {
|
||||
tags[t] = 0;
|
||||
}
|
||||
tags[t]++;
|
||||
});
|
||||
});
|
||||
|
||||
tags = this.sortObject(tags);
|
||||
|
||||
tags.forEach((t) => {
|
||||
if (t.value < sizer.min) {
|
||||
sizer.min = t.value;
|
||||
}
|
||||
if (t.value > sizer.max) {
|
||||
sizer.max = t.value;
|
||||
}
|
||||
});
|
||||
|
||||
this.setState({
|
||||
tags: tags,
|
||||
scale: new ScaleLog(sizer)
|
||||
});
|
||||
},
|
||||
|
||||
sortObject (obj) {
|
||||
var arr = [];
|
||||
for (var prop in obj) {
|
||||
if (obj.hasOwnProperty(prop)) {
|
||||
arr.push({
|
||||
key: prop,
|
||||
value: obj[prop]
|
||||
});
|
||||
}
|
||||
}
|
||||
/*arr.sort(function (a, b) {
|
||||
return b.value - a.value;
|
||||
});*/
|
||||
arr.sort(function (a, b) {
|
||||
return a.key.toLowerCase().localeCompare(b.key.toLowerCase());
|
||||
}); //use this to sort as strings
|
||||
|
||||
return arr;
|
||||
},
|
||||
|
||||
render () {
|
||||
var state = this.state;
|
||||
|
||||
return (
|
||||
<header>
|
||||
<img src="media/svg-porn.svg" className="logo"/>
|
||||
|
||||
<h3>A collection of svg logos for developers.</h3>
|
||||
|
||||
<div className="tag-cloud">
|
||||
{state.tags.map((d, i) => {
|
||||
return (<a key={i} href="#"
|
||||
style={{ fontSize: state.scale.value(d.value)}}>{d.key + ' (' + d.value + ')'}</a>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,9 +1,6 @@
|
||||
var React = require('react'),
|
||||
App = require('./App');
|
||||
|
||||
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
React.render(<App/>, document.getElementById('react'));
|
||||
});
|
||||
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
class ScaleLog {
|
||||
constructor (options) {
|
||||
options = options || {};
|
||||
this.fontMin = options.fontMin || 1.2;
|
||||
this.fontMax = options.fontMax || 5;
|
||||
this.unit = options.unit || 'rem';
|
||||
this.min = (options.min || 1);
|
||||
this.max = (options.max || 50);
|
||||
|
||||
this.scale = (this.max - this.min) / (this.fontMax - this.fontMin);
|
||||
}
|
||||
|
||||
value (qty) {
|
||||
return (qty === this.min ? this.fontMin : (qty / this.max) * (this.fontMax - this.fontMin) + this.fontMin).toFixed(2) + this.unit;
|
||||
//Math.exp((position - this.fontMin) * this.scale + this.min);
|
||||
}
|
||||
}
|
||||
|
||||
// Usage: new LogSlider({ min: 10, max: 100 });
|
||||
|
||||
module.exports = ScaleLog;
|
||||
@@ -11,6 +11,7 @@ html {
|
||||
body {
|
||||
background-color: $bg-color;
|
||||
font-family: Lato, sans-serif;
|
||||
font-size: 1.4rem;
|
||||
margin: 0;
|
||||
min-height: 100%;
|
||||
padding: 0;
|
||||
@@ -78,6 +79,23 @@ header {
|
||||
max-width: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
.tag-cloud {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-flow: wrap;
|
||||
|
||||
a {
|
||||
background-color: $link-color;
|
||||
border-radius: 5px;
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
margin: 1rem;
|
||||
padding: 0.5rem 1rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.logos {
|
||||
|
||||
+16
-13
@@ -8,25 +8,29 @@
|
||||
},
|
||||
"license": "CC0-1.0",
|
||||
"homepage": "http://gilbarbara.github.io/logos/",
|
||||
"dependencies": {
|
||||
"d3": "^3.5",
|
||||
"react": "^0.13"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babelify": "^6.1.2",
|
||||
"babelify": "^6.1",
|
||||
"browser-sync": "^2.7",
|
||||
"browserify": "^10.2.4",
|
||||
"browserify": "^10.2",
|
||||
"connect": "^3.4",
|
||||
"connect-history-api-fallback": "^1.1.0",
|
||||
"connect-history-api-fallback": "^1.1",
|
||||
"del": "^1.2",
|
||||
"eslint": "^0.23.0",
|
||||
"eslint-plugin-react": "^2.5.2",
|
||||
"gulp": "^3.9.0",
|
||||
"eslint": "^0.23",
|
||||
"eslint-plugin-react": "^2.5",
|
||||
"gulp": "^3.9",
|
||||
"gulp-autoprefixer": "^2.3",
|
||||
"gulp-cache": "^0.2",
|
||||
"gulp-changed": "^1.2",
|
||||
"gulp-compile-handlebars": "^0.5.0",
|
||||
"gulp-compile-handlebars": "^0.5",
|
||||
"gulp-cssmin": "^0.1",
|
||||
"gulp-eslint": "^0.14",
|
||||
"gulp-filter": "^2.0",
|
||||
"gulp-flatten": "0.0.4",
|
||||
"gulp-gh-pages": "^0.5.2",
|
||||
"gulp-gh-pages": "^0.5",
|
||||
"gulp-if": "^1.2",
|
||||
"gulp-imagemin": "^2.2",
|
||||
"gulp-load-plugins": "^0.10",
|
||||
@@ -34,16 +38,15 @@
|
||||
"gulp-rename": "^1.2",
|
||||
"gulp-sass": "^2.0",
|
||||
"gulp-size": "^1.2",
|
||||
"gulp-tap": "^0.1.3",
|
||||
"gulp-tap": "^0.1",
|
||||
"gulp-uglify": "^1.2",
|
||||
"gulp-useref": "^1.2",
|
||||
"gulp-util": "^3.0",
|
||||
"merge-stream": "^0.1",
|
||||
"react": "^0.13.3",
|
||||
"run-sequence": "^1.1",
|
||||
"vinyl-buffer": "^1.0.0",
|
||||
"vinyl-source-stream": "^1.1.0",
|
||||
"watchify": "^3.2.2"
|
||||
"vinyl-buffer": "^1.0",
|
||||
"vinyl-source-stream": "^1.1",
|
||||
"watchify": "^3.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
|
||||
+50
@@ -0,0 +1,50 @@
|
||||
var request = require("request")
|
||||
|
||||
var url = 'https://raw.githubusercontent.com/gilbarbara/logos/master/assets/logos.json',
|
||||
vars = {
|
||||
tags: {},
|
||||
list: []
|
||||
},
|
||||
tags;
|
||||
|
||||
function sortObject(obj) {
|
||||
var arr = [];
|
||||
for (var prop in obj) {
|
||||
if (obj.hasOwnProperty(prop)) {
|
||||
arr.push({
|
||||
'key': prop,
|
||||
'value': obj[prop]
|
||||
});
|
||||
}
|
||||
}
|
||||
arr.sort(function(a, b) { return b.value - a.value; });
|
||||
//arr.sort(function(a, b) { a.value.toLowerCase().localeCompare(b.value.toLowerCase()); }); //use this to sort as strings
|
||||
return arr; // returns array
|
||||
}
|
||||
|
||||
request({
|
||||
url: url,
|
||||
json: true
|
||||
}, function (error, response, body) {
|
||||
|
||||
if (!error && response.statusCode === 200) {
|
||||
vars.logos = body.items;
|
||||
|
||||
vars.logos.forEach(function (d, i) {
|
||||
d.tags.forEach(function (t) {
|
||||
|
||||
vars.list.push(t);
|
||||
if (!vars.tags.hasOwnProperty(t)) {
|
||||
vars.tags[t] = 0;
|
||||
}
|
||||
vars.tags[t]++;
|
||||
});
|
||||
});
|
||||
|
||||
tags = sortObject(vars.tags);
|
||||
console.log(tags);
|
||||
console.log(tags.length);
|
||||
|
||||
console.log(vars.list.join('", "'));
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user