Skip to content

Instantly share code, notes, and snippets.

View hugolpz's full-sized avatar
🎯
Focusing

Lopez Hugo hugolpz

🎯
Focusing
56 followers · 92 following
View GitHub Profile
@hugolpz
hugolpz / .block
Created July 2, 2019 09:54 — forked from micahstubbs/.block
world map 09 ckmeans cluster min breaks
height: 510
border: no
license CC0-1.0
@hugolpz
hugolpz / README.md
Created April 28, 2017 16:10 — forked from ericcoopey/README.md
Animating Changes in Force Diagram

Demonstrates how to dynamically add and remove nodes to a force diagram. This was functionality that should seemingly be easy, but was surprisingly hard. Many people were asking how to do this in forums, and this final product is the amalgamation of several commenters half baked (but not really functioning) solutions.

This one demonstrates changes in a social network diagram as relationships are added, removed, and updated. Add nodes by name, add links complete with custom lengths.

Also shows how to add labels to a force diagram.

@hugolpz
hugolpz / README.md
Created November 4, 2016 18:10 — forked from syntagmatic/README.md
Comparing Map Projections

A mashup of Map Projection Distortions and transitions using the D3.js extended geographic projections plugin.

A comparison of map projections by four different types of distortion:

  • Acc. 40° 150% – The Acceptance index is a numerical measure that summarizes overall projection distortion, in this case with a maximum angular distortion of 40° and areal distortion of up to 150%.
  • Scale – The weighted mean error for overall scale distortion.
  • Areal – The weighted mean error for areal distortion.
  • Angular – The mean angular deformation index.

Lower is better. Data transcribed from the Natural Earth Projection by @mbostock.

@hugolpz
hugolpz / .block
Last active November 4, 2016 18:01 — forked from mbostock/.block
Vector Tiles
license: gpl-3.0
@hugolpz
hugolpz / child_window.js
Created December 17, 2015 15:37 — forked from asiviero/child_window.js
Open a child window on Alloy/Titanium
$.child_window.open();
@hugolpz
hugolpz / d3.geo.projection.v0.min.js
Last active August 29, 2015 14:16 — forked from emeeks/index.html
Minimal D3js line smoothing
!function(){function t(t,a){return{type:"Feature",id:t.id,properties:t.properties,geometry:n(t.geometry,a)}}function n(t,a){if(!t)return null;if("GeometryCollection"===t.type)return{type:"GeometryCollection",geometries:object.geometries.map(function(t){return n(t,a)})};if(!la.hasOwnProperty(t.type))return null;var r=la[t.type];return d3.geo.stream(t,a(r)),r.result()}function a(){}function r(t){if((n=t.length)<4)return!1;for(var n,a=0,r=t[n-1][1]*t[0][0]-t[n-1][0]*t[0][1];++a<n;)r+=t[a-1][1]*t[a][0]-t[a-1][0]*t[a][1];return 0>=r}function e(t,n){for(var a=n[0],r=n[1],e=!1,o=0,i=t.length,h=i-1;i>o;h=o++){var u=t[o],M=u[0],s=u[1],c=t[h],f=c[0],v=c[1];s>r^v>r&&(f-M)*(r-s)/(v-s)+M>a&&(e=!e)}return e}function o(t){return t?t/Math.sin(t):1}function i(t){return t>0?1:0>t?-1:0}function h(t){return t>1?pa:-1>t?-pa:Math.asin(t)}function u(t){return t>1?0:-1>t?ba:Math.acos(t)}function M(t){return t>0?Math.sqrt(t):0}function s(t){function n(t,n){var a=Math.cos(t),e=Math.cos(n),o=Math.sin(n),i=e*a,h=-((1-i?Math.log(.5*(1+i)
@hugolpz
hugolpz / README.md
Last active August 29, 2015 14:14 — forked from mbostock/.block

This choropleth encodes unemployment rates from 2008 with a quantize scale ranging from 0 to 15%. A threshold scale is a useful alternative for coloring arbitrary ranges.

@hugolpz
hugolpz / README.md
Last active August 29, 2015 14:14 — forked from mbostock/.block
Map zoom + responsive frame

Click States to test me !>Click States to test me !

Alternative of: Map zoom + static frame, with more details.

Exploration around automatic centering, zooming, and responsive framing. This gist have RESPONSIVE frames.

Here, only the width is provided, the minimal height is calculated from the svg hook's width and the projected shape ratio. This tied frame is the relevant approach when waste of the webpage's space is not acceptable.

Inputs are the topojson file, a target feature (shape), and the svg canevas width=300px. Height, if missing (as in this demo), is recalculated elegantly. There is always a 5% margin on each side of the shape.

@hugolpz
hugolpz / README.md
Last active August 29, 2015 14:10 — forked from emeeks/README.md
Friendly geo-area selection

WP style user-friendly selection of geo-coordinates (decimal degrees).

@hugolpz
hugolpz / index.html
Last active July 24, 2020 06:26 — forked from emeeks/index.html
From pixelized to curvy lines
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Interpolating Geodata</title>
<meta charset="utf-8" />
</head>
<style>
html,body {
height: 100%;
width: 100%;
margin: 0;