KristinHenry

@KristinHenry·13 public vizzes

getting options

This example shows a Python script that automates downloading videos and embeds view counts directly into the saved filenames. The code iterates through a list of URLs, constructing a command for the `youtube-dl` library that specifies an output template using `%(title)s-%(view_count)s`. It then invokes the command through `subprocess.call` with the shell enabled, effectively fetching each video and naming the file according to its title and popularity metric as reported by the service. The visualization of this data would be derived from the resulting file names, reflecting the relationship between content and engagement.

Jun 26, 2018

Loading thumbnail…

looping over list of video links for downloading

This example shows a bare-bones automation script that downloads a series of videos by iterating through a list of URLs. It constructs a shell command using the `youtube-dl` tool for each link, then executes it via Python’s `subprocess.call` function with `shell=True`. The script relies solely on Python’s standard library, with no external visualization or plotting libraries. The data source is the hardcoded `links` list, and the rendering approach is simply terminal output from the download commands.

Jun 26, 2018

Loading thumbnail…

Testing interactive svg + canvas plot

Circles colored in five shades bounce across a 1050×1500 canvas, colliding and repelling while remaining within invisible boundaries. The visualization mixes two rendering systems: hundreds of smaller background molecules draw to a Canvas element, while twenty larger, interactive particles render as SVG circles. Both sets move through a shared quadtree-based collision detection routine in `map.updatePositions`, which adjusts positions and enforces edge bounds. A `d3.timer` loop continuously updates particle coordinates and redraws both the Canvas buffer and the SVG group, whose circles use `transform` attributes for translation.

Oct 1, 2016

Loading thumbnail…

Gist 4d1e447f82a7d2b425c4d1a3f5489e7a

A minimal example defines a custom `d3.foo()` method on the D3 namespace and calls it inside a page’s `console.log`, with the page loading the external script `d3-foo.js` that presumably defines this function. The rendered output is the return value of that method, shown only in the browser’s console. The code uses the standard D3 library, imported via a `<script>` tag, and demonstrates a simple extension pattern for library APIs. No data source, canvas, or SVG rendering is present; the example focuses solely on API invocation and console output.

Oct 1, 2016

Loading thumbnail…

Gist afb2c61a5f1e80066b6beb25830811f4

This example demonstrates a minimal JavaScript module that exports a function returning the number 42. It shows the basic structure of an ES6 module using the `export default` syntax. The code relies on JavaScript’s module system and contains no external libraries or data sources. The visualization simply renders a fixed constant value, with no dynamic behavior, animation, or DOM interaction. It serves as a placeholder or starting point for integrating a data-driven chart or graph in a larger application.

Oct 1, 2016

Loading thumbnail…

[Working with spatial data](https://github.com/enjalot/wwsd)

This example demonstrates how to map geospatial data using d3.js projections. It renders a world map with a custom cylindrical projection and highlights two points with red circles, including one at San Francisco’s coordinates. The code uses `d3.geo.projection`, `d3.geo.path`, and `d3.geo.mercator`, along with TopoJSON to load world-110m GeoJSON data. The map and points are drawn as SVG elements, with the projection scale and translation set explicitly.

Jun 26, 2016

Loading thumbnail…

[Working with spatial data](https://github.com/enjalot/wwsd)

This example demonstrates how latitude and longitude coordinates from a world GeoJSON file are projected onto an SVG canvas using a custom cylindrical map projection, with red circles marking London and San Francisco. Built with D3.js version 3.5.5, the code uses `d3.geo.projection` to define the cylindrical transformation and `d3.geo.path` to render the world map from the 110m-resolution GeoJSON data. The `projection([0,52])` and `projection([-122.4194,37.7749])` calls place the two cities, while the commented-out alternative projections (Mercator and azimuthal equidistant) show the flexibility of the approach.

Jun 26, 2016

Loading thumbnail…

[Working with spatial data](https://github.com/enjalot/wwsd)

This example demonstrates how to render geospatial data on a map using D3.js projections. The visualization displays world country boundaries loaded from a GeoJSON file, with the map centered using an azimuthal equidistant projection. The code uses d3.geo.path() to project and draw the geographic features onto an SVG canvas. It defines both a Mercator and an azimuthal equidistant projection, ultimately selecting the latter with a clip angle and rotation to create a polar view. The data comes from an external GeoJSON source hosted online.

Jun 26, 2016

Loading thumbnail…

[Working with spatial data](https://github.com/enjalot/wwsd)

This example shows a world map rendered in grayscale as a single filled path, using a Mercator projection to display geographic boundaries. It loads GeoJSON data of world countries from an external URL and draws them with D3.js version 3.5.5. The code uses `d3.geo.mercator()` to define the projection, `d3.geo.path()` to generate the SVG path data, and appends the result as one `path` element. The map fills the entire viewport, with the projection scaled and translated to center on a 960×500 canvas.

Jun 26, 2016

Loading thumbnail…

[Working with spatial data](https://github.com/enjalot/wwsd)

This example displays a world map using Leaflet with an OpenStreetMap tile layer, overlaid with country boundaries from a GeoJSON file. The visualization begins by initializing a Leaflet map centered on coordinates [30, 0] at zoom level 2. The code then loads geographic data from a static GeoJSON URL hosted on GitHub and adds it to the map via `L.geoJson()`. The integration uses Leaflet 0.7.7 alongside D3 3.5.5 for fetching the remote JSON data, demonstrating a straightforward workflow for combining interactive map tiles with custom spatial datasets.

Jun 26, 2016

Loading thumbnail…

SciFri Communication Modes Survey Results, Averages

The chart displays average communication method usage across age groups, showing that face-to-face interaction dominates for respondents under 26, while older groups rely more on phone calls, with overall averages varying by demographic. The visualization uses D3 v3 with SVG rendering, leveraging ordinal scales (`d3.scale.ordinal`) for grouped bar positioning and linear scales (`d3.scale.linear`) for the y-axis, along with axis helpers (`d3.svg.axis`) and color assignment via `d3.scale.ordinal().range()`. Data comes from a CSV file containing survey averages and reply counts per age bracket, with legend annotations for response totals.

Nov 25, 2015

Loading thumbnail…

Example of using a csv file generated by responses to a Google Form.

A scatterplot visualizes survey responses from a Google Form, showing each respondent's height versus number of pets, with dot size encoding the number of coding languages and color indicating their preferred drink. The visualization uses d3.csv to load the remote Google Spreadsheet data, d3.scale.linear for axes, d3.svg.axis for tick marks, and d3.selectAll with .on("mouseover") to display HTML tooltips. A categorical color scale (d3.scale.category10) drives the legend, while SVG circles render with opacity and hover highlighting.

Mar 3, 2014

Loading thumbnail…

Where did all the Flash Developers go?

This example traces the GitHub profiles of former Flash developers, mapping career trajectories for eighteen individuals and one company after the technology’s decline. A network visualization uses `d3.forceSimulation` to position nodes, with links connecting each developer to Riot Games, their common destination. The data comes from a manually curated markdown list, rendered as a static force-directed graph with `d3.select` and SVG elements. The layout clearly shows Riot Games as a central hub, absorbing the scattered Flash community.

Jun 9, 2013