SamuelRiversMoore

@SamuelRiversMoore·6 public vizzes

Gist c196418fe72b707e3082568ad77439cc

This example demonstrates a responsive CSS grid system built with Sass, showing how column widths, ordering, visibility, and alignment adapt across five breakpoints (xl, lg, md, sm, xs). The layout defines 12-column proportional widths, auto-sizing columns, and utility classes for hiding, showing, and reordering content. It uses Sass `@each` loops and `@media` queries to generate breakpoint-specific styles, with variables like `$size-xl` and `$grid-spacing` controlling the responsive behavior. The grid container adjusts its max-width based on each breakpoint value.

Jul 30, 2019

Loading thumbnail…

Gist cb2cc8b6e09fea8880fbaeca47c59dca

This example demonstrates a shell script that configures group-based file permissions for a web-served directory named "kirby". It shows the step-by-step process of changing ownership to the `www-data` group and applying specific read/write/execute modes for directories and files, while also setting the setgid bit and default access control lists via `setfacl`. The second half of the script condenses these commands into a single chained operation using `&&`, illustrating an alternative approach with the same outcome.

May 29, 2019

Loading thumbnail…

Global zoom pan

This example shows an orthographic globe that responds to both dragging and zooming. Drag gestures rotate the projection, while zooming scales the globe’s size. The visualization uses a d3.geoOrthographic projection with a d3.geoPath renderer to draw world country boundaries from a GeoJSON file hosted by visionscarto.net. Interaction is handled via d3.zoom for scaling and d3.drag for rotation, with linear scales mapping screen coordinates to latitude and longitude offsets. The globe’s sphere is rendered as a light blue background, and a single orange point marks a specific coordinate.

Dec 7, 2017

Loading thumbnail…

experiment1

An interactive orthographic globe displays a graticule grid that can be rotated by dragging and zoomed via the mouse wheel. The visualization uses a custom `d3.zoom` and `d3.drag` event handler to modify the `d3.geoOrthographic` projection’s rotation and scale, then redraws the graticule path generated by `d3.geoGraticule` and rendered with `d3.geoPath`. The SVG output is styled to a fixed 400 by 300 viewport, with the projection centered within it.

Dec 7, 2017

Loading thumbnail…

fresh block

An interactive azimuthal equidistant map of the world shows a red geodesic line and an orange point near Asia. Dragging rotates the projection, while zooming scales the SVG group containing all map elements. The visualization loads GeoJSON country boundaries from visionscarto.net and renders them as paths using `d3.geoPath` with a `d3.geoAzimuthalEquidistant` projection. Interaction is handled by `d3.drag` and `d3.zoom`, with rotation applied directly to the projection on each drag event.

Dec 7, 2017

Loading thumbnail…

Gist 0026d46aee766aec1655be453b27d90b

This example shows a gulp task for deploying static website files to a remote FTP server. It uses `vinyl-ftp` to create an FTP connection and `gulp-util` for logging, then streams files from a local `dist` directory using `gulp.src`. The task filters uploads with `conn.newer` to only transfer files newer than those on the server, and writes them to `/public/www/` via `conn.dest`. The visible code does not include any data visualization, instead focusing on automated deployment workflow.

Mar 8, 2017