Skip to main content
100%

Leveraging the phantom-crowbar to steal vector graphics, on the daily

✓ Published0🌍 Public
Aandyreagan
Last edited Sep 26, 2014
Created on Sep 26, 2014

This daily automation script scrapes a suite of hedonometer.org visualizations—including time series, shift plots, U.S. maps, state and city Sankey diagrams, and bar charts—using the phantom-crowbar tool to extract inline SVG from the live pages. It then converts each captured SVG file to PDF via Inkscape’s command-line interface. The data reflects daily sentiment scores from the hedonometer site, with separate outputs for books like Frankenstein and city comparisons between 2013 and 2014. The script relies on shell date utilities to name files by current date, demonstrating a repeatable pipeline for archiving web graphics.

AI-generated description

Similar vizzes

Loading thumbnail…

svgsaver crowbar

svgsaver Crowbar is a bookmarklet that extracts inline SVG images and their associated styles from an HTML page, converting them into downloadable SVG or PNG files. It traverses the document to collect SVG elements, applies a whitelist of CSS properties and attributes to ensure fidelity, and generates a clean SVG file. The tool also supports saving as PNG via canvas rendering. The example demonstrates how a lightweight bookmarklet can programmatically serialize and export vector graphics embedded in web pages, preserving visual styling while offering format flexibility.

HHypercubed
61% match
Loading thumbnail…

Save SVG as PNG

This example demonstrates a workflow for converting a dynamically generated D3 SVG into a static PNG file, ensuring pixel-perfect consistency between the two. The process first uses the SVG Crowbar bookmarklet to extract the SVG from the browser, then loads that SVG into an HTML page with a Canvas element, drawing it via the Canvas API’s `drawImage` method. Finally, the canvas’s `toDataURL` method exports the rendered image as a PNG, which is automatically downloaded using an anchor element with a `download` attribute.

Mmbostock
58% match
Loading thumbnail…

Gist dfbc4b41961e5b098fffce6af3828f57

This visualization scrapes Instagram profile data to compare follower counts, post engagement, and captions across influencers in different industries. Using Selenium to automate Chrome and BeautifulSoup to parse page JSON, the script extracts post dates, like counts, comments, and partnership flags from each profile’s embedded `_sharedData` blob. It then compiles the results into a pandas DataFrame and exports them to CSV. The example highlights the workflow of collecting social-media metrics at scale, with the final chart likely plotting follower growth or engagement trends per industry.

AArizonaTay
57% match
Loading thumbnail…

random shell stuff

This example demonstrates a shell-scripting workflow for scaffolding interactive data-visualization projects, showing how to automate the setup of a project directory structure and download essential JavaScript libraries. The script creates nested folders for images, stylesheets, scripts, and CoffeeScript sources, then fetches libraries such as d3.js, polymaps.js, underscore.js, and backbone.js via curl. It also generates a CoffeeScript starter file and a Rakefile with a watch task for compiling CoffeeScript to JavaScript. The visualization itself is not rendered; instead, the code focuses on environment preparation and dependency management.

CCaged
57% match
Loading thumbnail…

App_Sentiments

This dashboard fetches CSV sentiment data from a GitHub raw URL and presents it through summary cards, an SVG bar chart, and an interactive data table. Using the Fetch API and a custom CSV parser, the application calculates aggregate metrics and renders randomized sample bars as placeholder visualizations, while CSS grid and flexbox handle the responsive layout. The chart is built with native SVG elements manipulated via JavaScript, and the table includes hover-highlighted rows for readability.

Mmeangreen0067@gmail.com
57% match
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.

SSav10
57% match
Loading thumbnail…

Take a snapshot of a page with phantom JS

This example captures a static snapshot of a live web page using PhantomJS. It loads the DC Metro Metrics daily service report for February 23, 2015, then waits five seconds before writing the rendered HTML content to standard output, producing a full page dump. The code relies on PhantomJS’s `webpage` and `system` modules, setting a Chrome user-agent and using `page.open` with a callback and `setTimeout` to ensure the page finishes rendering. The result is a saved HTML file that preserves the report’s final visual state.

LLeeMendelowitz
57% match
Loading thumbnail…

Gist 41e56c91ab9d245a846939ab9a448e40

This visualization tracks the archival status of web resources across years, showing counts of collected, archived, and not-archived items. It uses a grouped bar chart or line chart to compare yearly totals, with stacked segments for different archive services like archive.org, archive-it.org, and archive.today. The code employs D3.js’s `d3.forceSimulation` for layout and `transition.attrTween` for animated updates, while rendering via SVG paths. Data comes from the provided CSV file, which is parsed using `d3.csv` and mapped to scales for year and count.

HHussamHallak
57% match