From 9a9de600af539e9b1adc141cf058df8c5fcdc596 Mon Sep 17 00:00:00 2001 From: Gil Barbara Date: Sun, 12 Jul 2015 16:06:04 -0300 Subject: [PATCH] initial tag cloud --- app/scripts/components/Header.jsx | 68 +++++++++++++++++++++++++++++-- app/scripts/main.js | 3 -- app/scripts/utils/scaleLog.js | 21 ++++++++++ app/styles/main.scss | 18 ++++++++ package.json | 29 +++++++------ request.js | 50 +++++++++++++++++++++++ 6 files changed, 170 insertions(+), 19 deletions(-) create mode 100644 app/scripts/utils/scaleLog.js create mode 100644 request.js diff --git a/app/scripts/components/Header.jsx b/app/scripts/components/Header.jsx index 8c5a06e..f4e8c86 100644 --- a/app/scripts/components/Header.jsx +++ b/app/scripts/components/Header.jsx @@ -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 (

A collection of svg logos for developers.

+ +
+ {state.tags.map((d, i) => { + return ({d.key + ' (' + d.value + ')'} + ); + })} +
); } diff --git a/app/scripts/main.js b/app/scripts/main.js index 74af881..0d3285e 100644 --- a/app/scripts/main.js +++ b/app/scripts/main.js @@ -1,9 +1,6 @@ var React = require('react'), App = require('./App'); - - document.addEventListener('DOMContentLoaded', function () { React.render(, document.getElementById('react')); }); - diff --git a/app/scripts/utils/scaleLog.js b/app/scripts/utils/scaleLog.js new file mode 100644 index 0000000..ed1a49e --- /dev/null +++ b/app/scripts/utils/scaleLog.js @@ -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; diff --git a/app/styles/main.scss b/app/styles/main.scss index b8ecb24..ea7f7bc 100644 --- a/app/styles/main.scss +++ b/app/styles/main.scss @@ -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 { diff --git a/package.json b/package.json index de0e432..2ca749b 100644 --- a/package.json +++ b/package.json @@ -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" diff --git a/request.js b/request.js new file mode 100644 index 0000000..6f59fde --- /dev/null +++ b/request.js @@ -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('", "')); + } +}) \ No newline at end of file