B

Brideau

@Brideau·18 public vizzes

Loading thumbnail…

Gist 15ec54668ea15cb0eada554bae7d6f13

This example demonstrates the concept of precision at k by generating a synthetic dataset of 1,000 “potential bad actors,” each labeled as fraudulent or not, and then computing precision for the top 40 ranked predictions based on a model’s probability scores. The code uses `faker` to create fake names and emails, `numpy.random` for random labeling, and `scipy.stats.truncnorm` to simulate skewed probabilities. It defines a custom `precision_at_k` function that sorts scores in descending order and calculates the fraction of true positives among the first *k* entries, while also comparing it to scikit-learn’s `average_precision_score` for context.

Loading thumbnail…

An implementation of Precision@k compatible with Scikit-learn.

This example demonstrates a custom implementation of the Precision@k metric that integrates directly with Scikit-learn's array utilities. It shows how to compute precision for the top *k* predictions, assuming a binary classification task. The function uses `column_or_1d` to flatten input arrays and `type_of_target` to validate the binary format. It sorts the true labels by descending prediction scores using `np.argsort`, then calculates the proportion of true positives among the top *k* entries. The code relies on NumPy for sorting and summing, and it returns a scalar float representing the precision value.

Loading thumbnail…

Cardano Node Test Metadata

This example visualizes the metadata structure of a Cardano stake pool as defined in a single `poolMetadata.json` file. It shows the JSON object’s key–value pairs—name, description, ticker, and homepage—rendered as a node-link diagram. The visualization uses `d3.forceSimulation` to position the central node and its attribute children, with text labels displayed via SVG. The source is a gist authored by Brideau, and the rendering approach relies on D3’s data join to bind the JSON fields to visual elements. The ticker "TEST" and description are directly mapped to visible text, while the homepage URL appears as a label without further interaction.

Loading thumbnail…

Using ogr2ogr from Scala

This example demonstrates how to invoke the GDAL `ogr2ogr` command-line utility directly from a Scala application to convert geographic data between formats. The code uses the `org.gdal.apps.ogr2ogr` class to execute conversions asynchronously via Scala’s `Future`, allowing non-blocking file processing. It shows two distinct conversions: one to ESRI Shapefile using default settings, and another to CSV with custom layer creation options (`-lco`) for geometry as WKT, automatic `.csvt` generation, and semicolon separators. The example reads from a GeoPackage input file and writes to organized subdirectories, demonstrating path handling with `java.nio.file.Paths` and directory creation via `Files.createDirectories`. Error handling is implemented through Scala’s `Try`-style success/failure callbacks.

Loading thumbnail…

Install GDAL with Java bindings on macOS High Sierra

This example shows how to read a GeoPackage and a GeoJSON file with GDAL’s OGR Java bindings in Scala, printing each dataset’s EPSG spatial reference code. It demonstrates both a blocking call and a non‑blocking variant using `scala.concurrent.Future`. The code registers OGR drivers with `ogr.RegisterAll()`, opens files via `ogr.OpenShared()`, and retrieves the layer’s spatial reference with `layer.GetSpatialRef()` before calling `srs.AutoIdentifyEPSG` and `srs.GetAuthorityCode(null)`. The build relies on `org.gdal:gdal:2.2.1` from the Boundless repository.

Loading thumbnail…

Gist de38d64005a8c46715b22c5b4b4a6cc5

This example verifies a Keybase identity claim by presenting a signed JSON message and its PGP signature. It demonstrates how to prove ownership of a GitHub account through a public gist, using the Keybase API to fetch and display the cryptographic proof. The visualization shows the verification data in a raw, text-based format, highlighting the fingerprint, username, and signature blocks. The code relies on the `keybase` command-line tool and JSON parsing to validate the signed object, emphasizing the transparency of web service bindings. The rendering approach is plain-text oriented, making the cryptographic details immediately readable.

Loading thumbnail…

Canadian Income Tax Line Chart

The visualization compares average income tax rates across Canadian provinces and territories for different years. Users select a province and a base year from dropdown menus to highlight how its tax burden has changed over time, with the selected province’s current rates overlaid in green and the historical rates in red dashed lines. Built with D3.js (v3) and d3kit, the chart renders SVG line charts for all regions in the background as faint gray lines, using data from `avgTaxAll.json`. Interactive updates rely on D3’s selection API and event handling to redraw the highlighted paths.

Loading thumbnail…

Circles Test

A grid of 1,000 semi-transparent circles animates and repositions itself every second. The circles vary in radius and color, and clicking one turns it black. Built with D3.js and the D3Kit Skeleton library, the visualization uses a linear scale for positioning and a category20 scale for colors. Data is generated randomly, with circle transitions handled by D3's `.transition()` method.

Loading thumbnail…

Hex Map

This animated visualization presents a hexagon-based map of the contiguous United States, with each state rendered as a cluster of individual hexagons. The TopoJSON data (Hex1000Topo.json) contains a grid of 1,000 hexagons, and D3.js v3 projects and renders these as SVG polygons. On load, the hexagons assemble into place with an animation, building the map from a central point outward. Each hexagon is color-coded to represent the state it belongs to, creating a mosaic-like representation of U.S. state boundaries. The hover interaction could be used to reveal additional information, though the core visualization emphasizes the hexagonal tiling of geographic regions through smooth, animated transitions.

Loading thumbnail…

Hexagon Word List

A hexagon outline occupies the center of the screen, with seven randomly generated gibberish words stacked along its vertical axis. The words re-sort every two seconds as their associated scores change, causing entries to grow, shrink, and swap positions. The code uses d3.hexbin, Chance.js for word and integer generation, and underscore.js for sorting. SVG text elements animate font-size and y-position via d3 transitions.

Loading thumbnail…

PubNub-Powered Dynamic Wordcloud

A dynamic word cloud visualizes the most frequent words from a PubNub chat channel, updating every two seconds as new messages arrive. The word sizes reflect word frequency, with transitions animating font size and position changes as the data updates. Built with D3.js and the d3.layout.cloud plugin, it processes message history via the PubNub API, which is sampled randomly. The SVG rendering displays words in a centralized layout, using D3 transitions to smoothly update the visualization.

Loading thumbnail…

D3 + OpenLayers 3 for Canadian Polling Districts

This example combines D3 and OpenLayers 3 to render Canadian polling district boundaries from a TopoJSON file onto a Stamen watercolor tile map. It uses a custom OpenLayers `ol.source.ImageCanvas` with a `canvasFunction` to draw the districts via `d3.geo.path` and a Mercator projection. The code transforms geographic bounds between EPSG:4326 and EPSG:3857, calculates scale and translation to align the D3-rendered vector features with the map’s current view. Election district polygons display names, province codes, and census population data from the JSON source.

Loading thumbnail…

D3 + Leaflet for Canada

A choropleth-style map of Canadian 2011 federal polling districts is rendered over Leaflet base tiles, using D3.js to project and draw the district boundaries as SVG paths. The code uses `d3.geo.path` with `d3.geo.transform` to convert geographic coordinates to Leaflet layer points, and `topojson.feature` to decode the district geometries from the provided TopoJSON file. Hovering highlights each district in red based on the CSS `path:hover` rule. The map is built with D3 v3 and Leaflet v0.7.7, initialized to a view centered over Canada.

Loading thumbnail…

Canadian Polling Distrtict TopoJSON

This map shows Canadian federal electoral districts, with each district rendered as a gray path that highlights red on hover. The visualization uses the TopoJSON format to encode district boundaries and relies on the `d3.geo` path API to project and draw the geographic data. The projection is a Lambert conformal conic, applied specifically for Canada, with the map centered on the country and scaled to fit an SVG canvas. The district attributes include English and French names, province, and population data from the 2011 census, though only the district shapes and interactive hover effect are visually presented.

Loading thumbnail…

Canadian Province TopoJSON

This example displays a mesh of Canadian federal electoral districts from a 2011 TopoJSON file, highlighting each district boundary with a thin black stroke. Red dots mark the first coordinate of every arc in the topology, revealing the underlying data structure. The map uses a conic conformal projection and is rendered as SVG via `d3.geo.path`. The code employs `topojson.mesh` to extract boundaries and appends circles using each arc’s transformed starting point, based on the TopoJSON transform.

Loading thumbnail…

Canadian Province TopoJSON

This example displays a graticule-free map of Canadian provinces as a topojson mesh, rendered as SVG paths with black outlines. The code uses d3.geo.conicConformal for projection and d3.geo.path to draw the features. A scatter of small circles marks each arc’s starting point. The data comes from a topojson file that refines a GeoJSON FeatureCollection sourced from Natural Earth.

Loading thumbnail…

Perspective Vibrations

Two offset grids of blue squares appear to shift rhythmically side to side, creating a faux 3D perspective effect. The far grid uses lighter, smaller squares at full opacity, while the near grid uses darker, larger squares at half opacity. An animation loop redraws the canvas every 15 milliseconds, using D3.js only for its bundled code and the Canvas 2D API's `fillRect` and `clearRect`. Square sizes and positions are computed from a sine wave and depth-based projection formulas.

Loading thumbnail…

Connected Particles

A field of one thousand particles drifts vertically on a dark canvas, with each particle’s size varying according to its speed to suggest depth. Thin curved lines connect nearby particles, with opacity fading as the distance between pairs grows beyond a minimum threshold. This animated piece uses D3.js for its timer and the Canvas API for all drawing, implementing a custom algorithm that updates vertical positions and wraps particles around the screen edges.