Sav10

@Sav10·6 public vizzes

Gist 575a4d1a506d4f39d35f

This example presents a collection of Python code snippets for data manipulation with the pandas library, focusing on common DataFrame operations. It demonstrates techniques for filtering rows based on column values, handling missing data, renaming columns, and performing data type conversions. The snippets also cover more advanced operations like pivot tables, merging delimited values, and using `pd.melt` for reshaping data. The code includes functions like `df.column_name.unique()`, `pd.pivot_table`, and `df.assign` to illustrate practical workflows for cleaning and transforming tabular data.

Oct 7, 2021

Loading thumbnail…

Useful d3 v4 and js data snipets

This example demonstrates a collection of reusable D3 v4 and JavaScript snippets for data visualization, covering responsive SVG scaling, color scales, and shape generators. It includes a `responsivefy` function that adjusts SVG dimensions to its container, and showcases ordinal and sequential color scales, line and Voronoi generators with specific curve settings. The code also illustrates data transformation techniques using `forEach`, Underscore.js methods, and a queue for loading distant JSON data. Additionally, it provides a map implementation using `d3.geoMercator`, `d3.geoPath`, and a zoom interaction, with an SVG-based legend. The rendering is SVG-based.

Aug 3, 2017

Loading thumbnail…

Useful leaflet and map sipets

This example demonstrates how to build an interactive map using the Leaflet JavaScript library, displaying point data over a base tile layer with a custom info window that updates on click. The code sets up a map with a CartoDB basemap, and creates a custom control using `L.control` and `L.DomUtil` to show details like name and value extracted from a data array. It uses Leaflet's `tileLayer` for background tiles and implements a click-handler that parses a CSS class name to find the corresponding data point. The visualization exemplifies a custom Leaflet control for on-demand data display.

Apr 4, 2017

Loading thumbnail…

Stacked Bar Chart

This stacked bar chart uses a CSV file of state populations by age group, ordering states by total population. The bars encode each age group’s contribution using ordinal color mapping, with axes and legends. Built with d3.dsv for data loading, d3.scaleBand, d3.scaleLinear, and d3.scaleOrdinal for scales, d3.stack for stacking, d3.axis for axes, and d3.format for SI-prefixed tick labels. The chart is rendered as SVG with conventional margins for axes and a legend.

Jul 28, 2016

Loading thumbnail…

Brushable Horizontal Bar Chart - I

This example shows a brushable horizontal bar chart that lets viewers explore a large, randomly generated dataset by adjusting a selection box in a mini chart on the right. The main chart on the left displays the selected bars in detail, with the y-axis labels and bar lengths updating based on the brush extent. The chart uses D3 v3 with SVG rendering, employing `d3.svg.brush` for the interactive selection, `d3.scale.ordinal` and `d3.scale.linear` for scales, and an ordinal brush pattern adapted from an external example. Scrolling the mouse wheel also moves the brush, and resizing handles allow users to change the number of visible bars.

Jul 27, 2016

Loading thumbnail…

Gist dd2e67a3840f57071f10

This example shows a side-by-side cheatsheet for PhantomJS and CasperJS, two headless browser automation libraries. The visualization is a plain-text code reference, not a graphical chart, listing API methods and configuration options from each tool's JavaScript interface. It displays installation commands via Homebrew, page interaction functions like `page.open` and `page.evaluate`, and CasperJS-specific methods such as `casper.start`, `casper.then`, and `casper.waitFor`. The data comes directly from the documented APIs of PhantomJS and CasperJS, presented as a static textual reference without any interactive or dynamic rendering.

Jul 24, 2014