Tell us what works and what could be better. We read every submission.
@angelicahl88·3 public vizzes
This example demonstrates a responsive CSS grid system built with Sass, showing how a six-column block scales proportionally within a twelve-column layout. The code defines reusable `grid-width` and `context-width` functions to calculate column dimensions based on configurable gutter and width values, while the `the-grid` mixin applies the resulting percentage width to any element. The `.block` class uses this mixin with six columns, producing a fluid layout that adapts to its container. The implementation relies on Sass’s function and mixin features, with no external JavaScript libraries or data sources involved.
Resumé Sankey is a responsive Sankey diagram that visualizes a professional résumé as a flow of experiences and skills. Built with D3 v3 and rendered in SVG, it adapts its height based on viewport width. The diagram features rounded nodes colored in muted earth tones, with dashed links connecting career stages. Hovering over a node highlights its associated links while dimming unrelated connections, using CSS transitions for smooth visual feedback. The visualization is fully responsive, adjusting its layout dimensions for desktop and mobile displays.
Ekokartan is a radar chart that visualizes the percentage of organic food purchases across different product categories in Sweden, with values ranging from 5.6% for bread to 73.5% for coffee and tea. The chart displays a four-level circular grid with axes labeled by product group, and a shaded polygon represents the aggregated organic purchase share. Built with D3.js version 3.5.5, it uses `d3.csv` to load the data and `d3.scale.linear` for the radial scale, with SVG circles and paths for the grid and data area. The visualization is styled with the Lato font and a custom legend, and it is hosted as part of a geoshepherds.com interactive feature.