Skip to content

Instantly share code, notes, and snippets.

View petrosh's full-sized avatar

Alex Petrosh petrosh

19 followers · 9 following
  • Umbria, Italy
View GitHub Profile
@petrosh
petrosh / README.md
Created May 11, 2017 13:48 — forked from lsquaredleland/README.md
Colour Density Hexbin

#Colour Density Hexbin Dots are placed randomly, then they are grouped by the raster. The tile colour is determined by the dot density. Raster is a hexbin.

Based off this: Hexagonal Binning

@petrosh
petrosh / README.md
Last active April 21, 2018 14:36 — forked from elidupuis/README.md
Path from mouse or touch input

Simple Drawing Example

Click and drag your mouse (or finger on touch device) to draw a line. A new path is created for each touch or click.

Paths are stored in a nested array; you can inspect the variable in console: session (assuming the example is in it's own window).

@petrosh
petrosh / .block
Last active May 4, 2017 15:13 — forked from mbostock/.block
Star Map
license: gpl-3.0
height: 960
@petrosh
petrosh / README.md
Last active April 21, 2017 16:51 — forked from emeeks/README.md
Slightly Random Colors

I think it may be more legible for information visualization to utilize a rougher specification for color and other element aspects. In this implementation, perturbations of color and line thickness provide a less uniform set of squares, but they are still nearly the same color. Perturbations of color, size, and line can all provide not only a nuanced aesthetic, but perhaps also convey a certain uncertainty in the data visualization. Using rgb specification, you imply a sort of precision similar to decimal precision in spatial coordinates, and by wiring your visualization to produce a slightly rougher color spectrum on output, you might correct for that. While line jitter has been a feature of drawing packages for some time, I haven't seen procedural application of this kind of perturbation to traditional data visualization.

I'm going to add some perturbation of paths following the same concept. I'll also put a few buttons in for user interaction.

@petrosh
petrosh / config.json
Last active April 7, 2017 15:23 — forked from anonymous/config.json
Bootstrap Customizer Config
{
"vars": {
"@gray-base": "#000",
"@gray-darker": "lighten(@gray-base, 13.5%)",
"@gray-dark": "lighten(@gray-base, 20%)",
"@gray": "lighten(@gray-base, 33.5%)",
"@gray-light": "lighten(@gray-base, 46.7%)",
"@gray-lighter": "lighten(@gray-base, 93.5%)",
"@brand-primary": "darken(#428bca, 6.5%)",
"@brand-success": "#5cb85c",
@petrosh
petrosh / index.html
Created March 26, 2017 12:56
Responsive with CSS em
<!doctype html>
<title>responsive with CSS em</title>
<meta charset="utf-8">
<style type="text/css">
html {
font-size: calc(0.6em + 1vw);
}
</style>
@petrosh
petrosh / 0.md
Last active March 20, 2017 17:02
HTML colors
@petrosh
petrosh / README.md
Created February 28, 2017 22:02 — forked from jonathantneal/README.md
SASS @font-face mixin

Font Face

A mixin for writing @font-face rules in SASS.

Usage

Create a font face rule. Embedded OpenType, WOFF2, WOFF, TrueType, and SVG files are automatically sourced.

@include font-face(Samplino, fonts/Samplino);
@petrosh
petrosh / Simple.coffee
Created February 11, 2017 20:13 — forked from apiv/Simple and Flexible Base View Class in Coffescript
This is a simple coffeescript class that provides a flexible platform for creating interactive views; much like BackboneJS, although library-independent. TODO: use the document.querySelector for setup elements and event binding. querySelector can be implemented easily on browsers that don't include native support.
###
Helper functions
###
###
@function {getElementsByDataEl}: find and return elements by data-el attribute
@param {parent}: the DOM node to search through
@param {elements}: Array of data-el values to find
###
@petrosh
petrosh / navigation.html
Created December 18, 2016 17:07
Nested Jekyll page navigation without plugins
{% capture html %}
<ul>
{% if include.context == "/" %}
<li class="{% if page.url == "/" %}active{% endif %}">
<a href="{{ site.baseurl }}/">{{ site.title }}</a>
</li>
{% endif %}
{% assign entries = site.pages | sort: "path" %}
{% for entry in entries %}