Last active
October 10, 2015 22:48
-
-
Save bacanu/3763496 to your computer and use it in GitHub Desktop.
a content layout using d3.js, lightweight-jsonp and jquery-full-house
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- things you will need --> | |
| <script src = 'http://code.jquery.com/jquery-1.8.2.min.js' ></script> | |
| <script src = 'http://d3js.org/d3.v2.min.js' ></script> | |
| <script src = 'https://raw.github.com/IntoMethod/Lightweight-JSONP/master/jsonp.js' ></script> | |
| <script src = 'https://raw.github.com/kuchumovn/jquery-full-house/master/jquery-full-house.js' ></script> | |
| <script> | |
| var treemap = d3.layout.treemap() | |
| .sort( function(a, b ){ return a.data && b.data ? (a.data.ups - a.data.downs ) - ( b.data.ups - b.data.downs ) : 1; } ) // i'm not a very smart man | |
| .value(function(d) { | |
| return d.data ? ( d.data.ups - d.data.downs ) + 500 : 1 ; // make it more uniform so we don't end up with 3px x 120px blocks or something | |
| }); | |
| var JSONP; | |
| $(document).ready(function(){ | |
| JSONP.init({ | |
| callbackName: 'jsonp' | |
| }); | |
| JSONP.get("http://reddit.com/hot.json", {}, function(response){ | |
| reddit = response; | |
| data = { "name":"base", "children":reddit.data.children }; // because it needs an object not an array | |
| treemap.size([ $("body").width(), $("body").height()] ); | |
| var divs = d3.select("body").selectAll("div").data( treemap ( data ) ).enter() | |
| .append("div") | |
| .style("width", function(d){ return d.dx + 'px'; } ) | |
| .style("height", function(d){ return d.dy + 'px'; } ) | |
| .style("left", function(d){ return d.x + 'px'; } ) | |
| .style("top", function(d){ return d.y + 'px'; } ) | |
| var kids = divs.filter( function (d){ return d.data.data ? true : false; } ) | |
| .attr("class", "pleasefill") | |
| kids.filter( function(d){ return d.data.data.domain == 'i.imgur.com' ? true : false ; } ) | |
| .style( 'background-image', function ( d) { return "url('"+ d.data.data.url +"')"; } ) | |
| .style( 'background-size', 'cover' ) | |
| .attr("class", "none") | |
| kids.filter( function(d){ return d.data.data.domain == 'imgur.com' ? true : false ; } ) | |
| .attr("class", "") | |
| .style( 'background-image', function ( d) { | |
| if ( d.data.data.url.indexOf("imgur.com/a/") !== -1 ) | |
| { | |
| console.log ( d.data.data.url ); | |
| } | |
| else | |
| { | |
| return "url('"+ d.data.data.url +".jpg')"; | |
| } | |
| }) | |
| .style( 'background-size', function(d){ return 'cover'; }) | |
| kids.append("a") | |
| .html( function(d, i){ | |
| return d.data.data.title; | |
| }) | |
| .attr("href", function(d){ return d.data.data.url; } ) | |
| .attr("title", function(d){ return d.data.data.title + " ups: " + d.data.data.ups + " / downs: "+ d.data.data.downs;; } ) | |
| divs.filter( function (d){ return d.data.data ? false : true; } ) | |
| $(".pleasefill>a").fill_with_text(); // jquery fullhouse in action | |
| }); | |
| /** | |
| * how it could be improved | |
| * | |
| * alternate value algorithm: ( 25 - position(1to25) ) * some_number | |
| * if the upvote count (for reddit) is > than the average, than add the difference to the value so that anything important really stands out | |
| * | |
| * make it pretty | |
| * make it fast | |
| */ | |
| }); | |
| </script> | |
| <style> | |
| body | |
| { | |
| margin:0; | |
| padding:0; | |
| position:relative; | |
| width:100%; | |
| height:100%; | |
| margin:0 auto; | |
| background:rgb(40,40,40); | |
| } | |
| body div | |
| { | |
| position:absolute; | |
| overflow:hidden; | |
| border:5px solid rgb(40,40,40); | |
| outline:1px solid white; | |
| outline-offset:1px solid white; | |
| box-sizing: border-box; | |
| background-repeat:no-repeat; | |
| } | |
| body div>a | |
| { | |
| font-family:Arial; | |
| color:white; | |
| background:rgb(40,40,40); | |
| text-decoration:none; | |
| display:inline-block; | |
| padding:1px; | |
| overflow:hidden | |
| display:block; | |
| } | |
| body div.pleasefill>a | |
| { | |
| width:100%; | |
| height:100%; | |
| } | |
| </style> | |
| <body> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Could you please fix the broken link to d3.js, using http://d3js.org/d3.v2.min.js ? Thanks!