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
/ README.md
Last active
August 29, 2015 14:14
— forked from mbostock/.block
Click States to test me !
Alternative of: Map zoom + responsive frame, with more details.
Exploration around automatic centering, zooming. This one has STATIC frame, the frame's dimensions are not answering to the central shape.
Here, both the width and height are provided, definitively setting the canevas' dimensions, which may be a relevant approach when waste of the webpage's space is not important.
It is also projection proof.
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.
WP style user-friendly selection of geo-coordinates (decimal degrees).
Rather refer to Codio : https://codio.com/hugolpz/wikiatlas-d3/tree/1.1_bb_geo-area_select%2FREADME.md
Drag & drop geographic game.
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).
Live JS Demo by Lopez Hugo
A Pen by Lopez Hugo on CodePen.
Few tricks:
-
use
d3.xml()to load the external SVG, simply including it as an image hides it from the DOM and d3. For an example of this, take a look here. -
d3.select()can then be used to query and modify its attributes -
The height|width are relative to the svg viewbox. Not related to the width and height of it on the page. This is important because any transforms or animations you do will all reference these coordinates.
-
Movement should be calculated according to your will, potentially via mathematical formula.
Made with minimal JQuery, CSS, and Bootstrap. Answer to JQuery limitation of slideUp() which only hide by default. Extended with some sugar for the show case. http://stackoverflow.com/questions/7121147/slideup-only-hides-cant-show-using-slideup
A Pen by Lopez Hugo on CodePen.
This page is about embedding raster images into svg or html as data URI string. Data URI being base64 string, we first need to convert our image into base64 strings. There I explain how to do it server side and client side.
Given image.png as a valid image, let's creates a *.b64 copy as a text file containing a valid base64 text string.
openssl base64 -in image.png -out image.b64
echo $(cat image.b64)