Skip to main content
Log in
S

Saminu

@Saminu·35 public vizzes

Loading thumbnail…

app.py - Visualizing Uncertainty in Models using Pandas, Scikit Learn, Jinja, Flask, and D3.js

This example predicts the conference category of paper abstracts using a Naive Bayes classifier, then displays the model’s classification report to visualize prediction uncertainty. The Flask app loads a CSV of IEEE abstracts, vectorizes them with CountVectorizer, trains a MultinomialNB model, and renders the report via Jinja templates. D3.js is referenced for potential charting, though the visible code uses Pandas, scikit-learn’s classification_report, and Flask request handling to show precision, recall, and F1-scores per category.

Jul 10, 2019
Loading thumbnail…

Home

This interactive web application predicts the likely category of an IEEE VIS paper based on a user-submitted abstract. The interface presents a clean, centered cover page with a text area for input and a submit button, utilizing the Bootstrap 4 framework for styling and layout. Upon submission, the form sends the text via a POST request to a backend `predict` endpoint, though the specific prediction model and any resulting visualization are not shown in this code. The page includes navigation links and a footer directing to a Medium article.

Jul 10, 2019
Loading thumbnail…

prediction.html - Visualizing Uncertainty in Models using Pandas, Scikit Learn, Jinja, Flask, and D3.js

This example shows the prediction results of a machine learning model that classifies paper abstracts into IEEE Vis conference tracks (InfoVis, SciVis, VAST, or Vis). The interface displays the predicted category, the model’s accuracy, and bar charts for macro and weighted average precision, recall, and F1-score. The charts include an uncertainty value derived from the accuracy metric. Built with a Flask and Jinja backend, the page uses D3.js with a custom `uvis.barChart()` API that applies a gradient type, while the classification report is passed from Python’s scikit-learn into JavaScript for rendering.

Jul 10, 2019
Loading thumbnail…

style.css - Visualizing Uncertainty in Models using Pandas, Scikit Learn, Jinja, Flask, and D3.js

This example demonstrates how a web application presents the results of a machine-learning model, specifically focusing on visualizing prediction uncertainty for educational purposes. The interface, styled with CSS and using Bootstrap-like classes (e.g., `.card-deck`, `.box-shadow`), displays model output cards within a responsive layout. The application is built using Python libraries such as Pandas for data handling and Scikit-learn for model training, while the server-side is powered by Flask and Jinja2 templates to render dynamic HTML. Interactive visualization of the data points and uncertainty intervals is achieved using D3.js for client-side rendering, with the code referencing CSS properties for layout control rather than specific D3 API functions.

Jul 10, 2019
Loading thumbnail…

3D

This example visualizes the Iris dataset as an interactive 3D scatterplot matrix (SPLOM), showing all unique combinations of three measurement columns in four separate WebGL-rendered plots. Each plot is generated using Three.js and the dex.charts.elegans.ScatterPlot API, with points colored by species. The data is framed using dex.csv.getCombinationFrames, and the plots are laid out side-by-side with jQuery Gridster, allowing orbit and perspective rotation.

Jun 19, 2017
Loading thumbnail…

pictogram table | d3v4

This pictogram table shows employment, wage, and change data for U.S. states, using icons to represent values. Clicking column headers sorts the rows. The implementation builds an HTML table with d3, using `d3.scaleThreshold` to map values to icon counts or arrow directions, and `d3.format` for text. State icons come from ProPublica’s StateFace font, other icons from Font Awesome. Data is loaded from a local JSON file using queue.

May 30, 2017
Loading thumbnail…

Directed Graph Editor

This interactive editor demonstrates force-directed graph editing with D3 v3’s `d3.layout.force`, rendering nodes and edges as SVG elements. Users can add nodes by clicking empty space and create edges by dragging between nodes, while keyboard shortcuts toggle edge direction (left/right/both), node reflexivity, and delete selections. The code uses `marker-start` and `marker-end` SVG markers to draw directed arrows, and `circle` styling plus `stroke-dasharray` to indicate selected nodes and edges. Node positions update continuously via the force simulation’s `tick` event, with color assignment from `d3.scale.category10`.

Apr 11, 2017
Loading thumbnail…

Issues Ratings

This interactive visualization tracks public concern about major political and social issues in the UK from 1974 to 2014, based on Ipsos MORI survey data. Each issue is plotted as a colored line, and users can click legend entries to show or hide categories, with a brushable timeline slider for zooming into specific periods. Built with D3 v3, the SVG chart uses `d3.svg.line` with basis interpolation and `d3.svg.brush` to create the focus and context views. A mouse-tracking overlay reveals precise values for the hovered date.

Apr 11, 2017
Loading thumbnail…

My CV

This example visualizes a resume as an interactive timeline, plotting education, work experience, and notable events on a single horizontal axis. It uses D3.js (v3) to create SVG elements, including a time scale for positioning and an axis for reference. Work and education periods are shown as colored rectangles, while events are marked with circles and dashed connector lines. The text for each item is rotated and positioned based on an index, with the data defined in JavaScript arrays containing start and end dates. The layout places events above the axis and work history below it.

Apr 8, 2017
Loading thumbnail…

Zoom and double Area

A zoomable area chart displays monthly S&P 500 index prices from 2000 to 2010. The main chart uses a cardinal curve area, while a smaller context view shows the full series with a monotone curve. Users can brush the context chart or drag the main chart to zoom, with both interactions synced via `d3.brushX` and `d3.zoom`. The code uses `d3.scaleTime`, `d3.area`, and SVG rendering, with data loaded from a CSV file.

Apr 7, 2017
Loading thumbnail…

Vertical Zoom

This interactive scatter plot displays data breaches from 2006 to 2016, plotting the number of records stolen against time. Each point represents a breach, colored by the method of leak (e.g., "hacked," "inside job"). A zoomable navigation panel at the bottom allows users to vertically brush over a region to filter the main chart, which redraws the y-axis domain. The visualization uses D3 v4, including `d3.brushY` for brushing, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.scaleOrdinal` for categorical colors.

Apr 6, 2017
Loading thumbnail…

Nigeria Minerals

An interactive bubble chart maps Kickstarter projects by city, using circle size to represent the number of backers and color to indicate project subcategory. Selecting a city from a dropdown updates the visualization, which is rendered as an SVG using D3 v4. The code leverages `d3.pack` for the bubble layout, `d3.scaleOrdinal` with `d3.schemeCategory20c` for color mapping, and `d3.map` for data joins. Project data comes from CSV files and the chart shows backer counts per project.

Apr 4, 2017
Loading thumbnail…

Mines Production Nigeria

A dynamic bubble chart visualizes sample data for Nigerian mines production, with seven bubbles colored by category and sized by a radius value. Animated every three seconds, the chart cycles through adding a new bubble, updating an existing one's properties, and removing the last bubble. Built with d3.v3, it uses a custom bubble chart module with d3.layout.force for collision detection and positioning, and d3.scale.sqrt for radius scaling. Randomly assigned colors come from a d3.scale.category20 palette, and hover tooltips display the bubble's name and radius.

Apr 3, 2017
Loading thumbnail…

polyline

This example renders 1000 randomly generated 3D points as a single SVG `<polyline>` element, using a `<marker>` to draw small line segments at each point. The code demonstrates high-performance SVG rendering by updating the polyline’s point coordinates directly via the `SVGPointList` API instead of re-serializing string attributes. It also shows CSS styling of markers and a static pseudo-3D projection (rotation is commented out). The visualization highlights that SVG `transform` updates are not GPU-accelerated, unlike HTML elements, as noted in the README.

Apr 3, 2017
Loading thumbnail…

Visual Analytics

This interactive visualization presents the Environmental Performance Index (EPI) for countries, allowing users to select a nation from a Leaflet-based map and view its score breakdown. Two animated bar charts display the categories of Environmental Health and Ecosystem Vitality, with color-coded bars for each sub-metric. The code uses d3.v4’s scaleLinear and scaleBand for positioning, and transitions animate bar widths when a new country is selected. Data comes from the provided epi2014.csv file, with map geometries sourced from the world.json GeoJSON file.

Apr 3, 2017
Loading thumbnail…

Parallel Coord Nations

This visualization uses a parallel coordinates chart to display environmental performance indicators for 178 countries, with each vertical axis representing a different metric such as health impacts, air quality, and biodiversity. The code loads data from a CSV file using d3.csv and renders the chart as SVG in D3 v3. Users can select a specific country from a dropdown menu to highlight its corresponding line while graying out others, and brushing on any axis filters the displayed countries. Random colors are applied to axis labels, with line colors and widths encoding rank.

Apr 3, 2017
Loading thumbnail…

Mass Shootings

This interactive map and chart visualizes over 1,000 mass shooting events in the US from January 2013 to December 2015, sourced from shootingtracker.com. The map displays circles sized by casualties, color-coded by whether deaths occurred. A linked bar chart below allows filtering by week via a draggable brush, toggle between event counts, deaths, or injuries, and animate the data progression. Built with D3.js, Crossfilter.js, and Mapbox, it enables exploration through panning, zooming, and clicking to reveal detailed event metadata.

Apr 1, 2017
Loading thumbnail…

1D-2D-3D

This interactive visualization demonstrates a force-directed graph rendered in one, two, or three dimensions. Users can switch between dimensional modes and cycle through different network datasets, including character co-occurrences in *Les Misérables*, a collection of D3 blocks, and the dependency structure of the D3 library itself. The simulation runs on a custom fork of the d3-force physics engine, extended to support various dimensionalities. It uses Three.js and WebGL for 3D rendering, while the underlying force calculations adapt their indexing structure to the selected dimension.

Mar 27, 2017
Loading thumbnail…

Football Pitch

This interactive tactics board displays a Premier League regulation-size soccer pitch with player markers positioned for a match. The visualization uses an SVG rendered through D3.js, with a green grass background, white pitch markings, and draggable elements loaded from a tab-separated dataset containing player coordinates and team assignments. The code constructs the pitch geometry using D3’s `append` and `attr` methods to draw rectangles, circles, and lines, while player positions come from the provided dots.txt file with team colors mapped via the kits.txt data.

Mar 20, 2017
Loading thumbnail…

x3dom in D3

This example combines D3.js with x3dom to render an interactive 3D scatterplot of 40 randomly generated points. Three coordinate axes are drawn using the custom `d3_x3dom_axis.x3domAxis` API, with colored lines for x, y, and z scales. A 3D scene is built by appending `x3d`, `scene`, and `viewpoint` elements, while points are plotted as spheres via appended `transform`, `shape`, and `sphere` elements. The code uses D3's `scaleLinear` for mapping data ranges and demonstrates direct DOM manipulation through D3 selections in an x3dom context.

Feb 11, 2017
Loading thumbnail…

Crude Oil Pipelines in US

This visualization displays a map of crude oil pipelines across the United States, with each pipeline colored according to its operating company. The map shows state boundaries, city labels, and pipeline routes, with a panel that displays the pipeline name and operator on mouseover. The code uses D3.js v4 with `d3.geoPath`, `d3.geoAlbersUsa`, and `topojson` to render the map, reading geographic data from a TopoJSON file containing both pipeline and state/city features. Pipeline colors are mapped to operator names, and hovering highlights the selected pipeline while dimming others. The data originates from the U.S. Energy Information Administration’s pipeline shapefiles and Atlas-Make for states and cities.

Jan 31, 2017
Loading thumbnail…

Odyssey.js Slides

This example presents a map-based story told through a sequence of slides, focusing on pipeline leak incidents in Nigeria and the Williams Transco leak history. Using the Odyssey.js library, the visualization alternates between map views and informational slides, with navigation controlled by keyboard arrow keys or on-screen buttons. The map is rendered with CartoDB’s base-light tile layer, and the story integration uses Odyssey.js’s `O.Template`, `O.Story`, and `O.Actions.Slides` APIs to manage the slide transitions. A dot progress indicator shows the user’s position within the narrative.

Jan 31, 2017
Loading thumbnail…

d3 to three

An interactive 3D globe displays a list of people with their photos and Twitter handles; selecting a person or choosing "Show All" rotates the globe to highlight their geolocated cities. D3 generates the globe's texture from TopoJSON country data and handles UI transitions and scroll tweening, while Three.js renders the WebGL scene. The example adapts Mike Bostock's World Tour and Steve Hall's WebGL globe approach.

Jan 18, 2017
Loading thumbnail…

Average rent by London borough, 2012 and 2013

This interactive choropleth maps average monthly private rents across London boroughs for 2012 and 2013, with a dropdown menu to switch between the two years and instantly recolor the map. It uses D3 v3 with a Mercator projection, `d3.geo.path` for rendering SVG paths from GeoJSON boundary data, and `d3.scale.quantize` with ColorBrewer greys to encode rental values. Hovering highlights a borough and shows a tooltip with its name and price. The rent data comes from the London Datastore, matching borough names to the map features.

Jan 11, 2017
Loading thumbnail…

Understanding the Impact of the TFL Strike

An animated choropleth shows how road traffic volumes across London’s boroughs change from 1993 to 2014, highlighting the impact of the TFL strike. Each borough is colored by quantile scales of annual traffic flow values, with a large year label that scrubs through time. The visualization uses D3.js, TopoJSON, and a data-driven SVG map, with hover tooltips for each borough. Data comes from a CSV of annual flows per local authority.

Jan 11, 2017
Loading thumbnail…

Linking a map to a timeline with d3

A map of New York City displays sampled crime incidents as colored circles, with each color representing a crime type. A linked timeline below shows the frequency of these incidents over the year, and users can brush a time range on the timeline to filter the points displayed on the map. The visualization uses D3 v3 with a geographic projection (d3.geo.mercator) and path generator (d3.geo.path) to render borough boundaries, while the timeline uses an area chart and brushing. Data comes from a CSV file of sampled NYC crime records.

Jan 7, 2017
Loading thumbnail…

Click to zoom with table and map in D3

This interactive D3 visualization pairs a choropleth map of Ireland with a sortable table of referendum results. Users can click on either a county on the map or a row in the table to zoom and highlight the selected region. The map uses `d3.geo.path` with a Mercator projection, while the table is built with `d3.csv` and `d3.select`. Colors are applied via a `d3.scale.ordinal` based on ColorBrewer palettes, and zooming is animated through `g.transition().duration(750)`.

Jan 7, 2017
Loading thumbnail…

OpenStreetMap + d3 tiles + brush slider

This example combines an OpenStreetMap vector tile background with a brush slider to explore sensor data points in Boston. Interactive circles positioned via `d3.geo.mercator` and `d3.geo.path` display randomly generated force, angle, and quality values, with color encoding quality. A time-based `d3.svg.brush` slider filters the displayed bubbles, while the map tiles load from `d3.geo.tile` and OpenStreetMap’s vectiles JSON API.

Jan 5, 2017
Loading thumbnail…

Real Daily Wages is Pounds from 1260 - 1994

This visualization shows the real daily wages in pounds in England from 1260 to 1994. It uses an area chart to display the wage data over time, with a main focus panel and a smaller context panel below. The context panel includes a brush interaction for zooming into specific time periods, while the main panel updates accordingly. The code utilizes d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, d3.brushX, and d3.zoom to achieve the interactive zooming and brushing functionality, rendering the chart with SVG based on the CSV data file.

Jan 5, 2017
Loading thumbnail…

Sofia's Block

A single purple rectangle labeled "Truble box" sits at the center of an otherwise blank SVG canvas. The visualization demonstrates basic D3.js v4 shape and text creation, using the `d3.select` and `append` chain to add a `rect` and `text` element with inline attributes and styles. Positioned via explicit `x` and `y` coordinates, the graphic shows a minimalist, static composition with white monospace lettering against a purple fill. The source is a Blockbuilder-generated gist, rendered entirely as SVG output.

Dec 28, 2016
Loading thumbnail…

Update d3.js data with button press

This example demonstrates how a line chart can be updated with new data when a user presses an Update button. The visualization initially plots date-stamped stock close values from `data.csv` as a steel-blue line, with axes scaled to the data range. Pressing the button triggers the `updateData()` function, which loads `data-alt.csv` and redraws the line and axes with a smooth 750-millisecond transition. Built with d3.v3, the code relies on `d3.csv` for file loading, `d3.time.scale` and `d3.scale.linear` for scaling, and `d3.svg.line`, `d3.svg.axis`, and `transition()` for animated updates.

Dec 19, 2016
Loading thumbnail…

Zoom to County

Clicking a UK country on the map smoothly zooms to its bounding box, highlighting it in orange while dimming the background. The visualization uses D3 v3 with a geographic Albers USA projection and TopoJSON for county boundaries. A d3.behavior.zoom handler enables free pan and zoom, while transitioned zoom events interpolate between scales and translations over 750 milliseconds.

Dec 19, 2016
Loading thumbnail…

Update

This example renders a blank interactive canvas. The code appends an SVG element with dimensions of 960 by 500 pixels to the HTML body and then adds a single text element displaying the phrase "code below to change me!" at a specified coordinate. The visualization uses the D3.js v4 library to select the body and manipulate the SVG attributes, styling the text with a monospace font at a large size. The piece serves as a minimal starting point for users to build their own custom data visualizations and graphics upon.

Dec 19, 2016
Loading thumbnail…

Crime Vis UK

Crime Vis UK is an interactive map of the United Kingdom that visualizes crime data at the county level. It shows a geographic overview with countries and county boundaries, where users can click on a region to select it and view detailed information. Built with D3 v4, the visualization uses `d3.geoMercator` and `d3.geoPath` to render the map from TopoJSON data, while `d3.zoom` supports pan and zoom interactions. Styled with CSS for hover and active states, the map renders as SVG with animated transitions, drawing from local JSON files for UK topology and boundaries.

Dec 17, 2016
Loading thumbnail…

Linking a map to a timeline with d3

The visualization links a geographic map of New York City with a timeline to explore sampled crime data from 2013. It uses d3.v3's `d3.geo.mercator` projection and `d3.geo.path` to render borough boundaries as SVG paths, plotting each incident as a circle scaled by `d3.scale.sqrt` and colored by crime type. Selecting a time range on the timeline filters the map markers via a brush interaction. The map’s title, "NYC Crimes (select a time range)," clarifies the purpose. Data comes from a CSV file containing lat/lon and date fields, and the timeline encodes daily crime counts.

May 26, 2015