Jn1532

uk points

This example maps six geographic points across the UK using a GeoJSON FeatureCollection, each point colored according to its `type` (Building, Grass, or Water) and sized by its `cost` property. The visualization renders the points directly onto an SVG canvas using `d3.geoPath` to project the coordinates, with the data loaded from a gist. A D3 selection binds the feature properties to circles, positioning them via the projection and applying categorical colors and radius scales to encode the attributes. No interactive behavior or transitions are included beyond the static representation of the dataset.

Apr 10, 2019

DOITT_THEATER_01_13SEPT2010

This map displays the locations of theaters in New York City, using points plotted from a GeoJSON file. Each theater is rendered as a circle on a geographic projection, with a map base likely from external GeoJSON data. The visualization uses `d3.geoPath` to draw the map's geographic boundaries, while `d3.geoCircle` (or `d3.geoPoint`) positions the theater markers. The map’s interactive features, such as the zoom and pan controls, are powered by the D3.js geo library, and the overview of theater distribution across the city is the primary focus.

nyc subways

Shows three intersecting New York City subway lines—the 1, 2, and 3 routes—as MultiLineString geometries from a GeoJSON FeatureCollection, with each route’s track path rendered as a separate visual segment. The example uses d3.geoPath to convert geographic coordinates into screen-space projections over a map base, with route_id values distinguishing line colors. Data is loaded directly from the subways.geojson source file, which encodes each route as a multilinestring of consecutive station-to-station coordinate pairs.

DOITT_MUSEUM_01_13SEPT2010

This map displays the locations of museums and cultural institutions across New York City’s five boroughs, with each point labeled by name. The visualization is built using sample GeoJSON data from a gist, which is parsed and rendered as a point layer. The code employs D3.js spatial methods, specifically `d3.geoPath` for drawing map boundaries and `d3.geoCircle` for projecting individual museum coordinates, creating an interactive point-based overview of the city’s cultural landscape.

nyc boroughs

This map displays the five boroughs of New York City from a GeoJSON file. The visualization uses the `d3.geoPath` projection to render the polygon boundaries, with each borough's name and code visible in the tooltip. The data is sourced from a gist by Jn1532 and drawn using the D3.js library to create an interactive geographic representation. The map is presented on a blank canvas, allowing users to explore the distinct shapes of Manhattan, Brooklyn, Queens, the Bronx, and Staten Island.

nyc zip code gejson

This example shows a map of New York City ZIP code boundaries, with each postal code drawn as a filled polygon. The map uses d3.geoPath to render the GeoJSON features from a gist, which contains both the polygon geometry and property data such as borough and neighborhood name. The visualization colors each district and includes a longitude/latitude attribute for each ZIP code, enabling geographic context. The GeoJSON file supplies all boundary coordinates and metadata directly, so the rendering relies on d3’s geographic projections to display the polygons in a flat, interactive layout.

Mar 26, 2019

USA geojson

This example displays a choropleth map of the United States using GeoJSON data from a gist, with each state’s population from 2010 encoded by color. It uses d3-geo’s `d3.geoPath` to render the state boundaries and fill them with a color scale based on the `POP2010` property. The map is drawn with SVG, and the layout is generated by projecting the geographic coordinates. The rendering demonstrates how spatial data can be visually encoded using standard D3.js geographic utilities.

Mar 26, 2019

topojson example data

This example displays a map of Spanish municipalities using a TopoJSON file from a Gist by Jn1532. The visualization renders geographic boundaries as vector paths with `d3.geoPath`, while the code also defines multiple data fields for interactive features. The JSON structure contains topology arcs and coordinate arrays, which are processed and drawn through the D3.js library. The rendering approach focuses on the raw geographic data rather than an interactive interface, showing how TopoJSON encodes complex spatial relationships.

Mar 26, 2019

Intro to CSS Animations

This example demonstrates the flexibility of CSS animations and transitions for creating simple motion and interactive effects in web graphics. A static SVG hexagon is embedded as a base64 data URI, and its styling responds to user interaction—hovering causes the shape to scale up and rotate 45 degrees with a smooth two-tenths-second transition. The CSS also defines a slide keyframe animation that translates an element horizontally, though the active circles using this effect are commented out in the code. The example uses core CSS features including `@keyframes`, `transform` properties, and transition timing.

Oct 11, 2018

Mapbox GL county identification/population

A Mapbox GL map highlights individual U.S. counties on mouseover, displaying the county name and total population in a small overlay panel. The example queries vector tile sources for county polygons, uses `map.queryRenderedFeatures` to identify the hovered county, and `map.setFilter` to render all matching county polygons with a distinct purple fill. Population data is summed from the features returned by `map.querySourceFeatures` and formatted with `toLocaleString`. The interaction uses Mapbox GL's Popup API and cursor styling to signal selectable regions.

Mapbox GL zip code map with on off buttons

This interactive map displays U.S. zip code boundaries as semi-transparent, colored polygon fills with subtle blue outline lines. A menu of on/off buttons toggles the visibility of the "Zip" fill layer and the "zipline" boundary layer. Built with Mapbox GL JS, it loads a vector source and renders layers using the Mapbox Studio style, with hover events logging feature properties to the console.

Mapbox GL example of different zones with on off buttons

This Mapbox GL example displays multiple geographic zones around Houston, Texas, with interactive toggle buttons for layering school locations, school zones, zip code areas, and county boundaries on a single map. Using the Mapbox GL JavaScript API, the visualization loads vector tile sources from the author’s Mapbox account and toggles layer visibility through HTML menu links with CSS styling. The map also includes a popup and overlay for additional information, though these features are only partially implemented in the provided code.

Code Examples

This example presents a collection of interactive C# code demonstrations embedded within a webpage. Using jQuery Mobile's collapsible widgets, the page organizes four distinct programming examples, including an Xunit test, JSON deserialization from local or web sources, a threading example, and a routine to sort and retrieve the top ten pizza toppings from order data. Each example is rendered live within the page via an iframe sourced from DotnetFiddle, allowing viewers to see the code and its output directly. The layout uses HTML and CSS for structure and styling.

Zoom in Map Demo

Clicking a US state zooms to that state at 4× magnification, while clicking again resets the view. Clicking an individual county zooms in much deeper, to 23×, centering on that county. Built with D3 v3 and TopoJSON, the map renders US states and counties as SVG paths using an Albers USA projection, with smooth 750-millisecond transitions handled by D3's `transition` and `attr` methods. The data comes from a raw GitHub gist containing US TopoJSON topology.

D3 Simple Bar Chart

This example shows a classic D3 bar chart displaying the frequency of each letter in the English alphabet, from A to Z. The chart uses an SVG-based rendering with a green fill for bars that turns orange on hover. Data is embedded directly in the code as an array of objects. The visualization is built using d3.scaleBand for the x-axis, d3.scaleLinear for the y-axis, and d3.axisBottom and d3.axisLeft to generate the labeled axes.

JS Bin

A donut chart displays browser market share percentages for IE, Chrome, Safari, Firefox, and Others, rendered as animated SVG paths that grow outward from the center. The visualization uses d3.layout.pie with a pad angle and d3.svg.arc to construct the rings, with d3.scale.category10 assigning colors per category. Upon loading, each path transitions over one second via transition.attrTween, interpolating from zero angles to its final slice, while a legend and percentage labels fade in afterward. The chart is styled with a dark widget background and drop-shadow filter from the accompanying CSS.

A simple rectangle

This example shows a set of circles moving randomly within an SVG canvas, with their positions and radii changing every 500 milliseconds. The visualization uses D3.js version 3 to generate random data points and animate the circles through the `transition()` API, while CSS styles define the circles’ blue fill with partial opacity and red stroke. The animation runs continuously via `setInterval`, creating an ever-shifting pattern of overlapping translucent circles.

Mapbox GL Zoom-in Population map

This zoomable choropleth map of the United States visualizes population at the state level when zoomed out, then transitions to county-level population data when zoomed in past a threshold of zoom level 4. Built with Mapbox GL JS v0.27.0, the map uses two vector layers from a Mapbox-hosted source, each with its own color stops and legend. A `zoom` event toggles the visibility of the state and county legends dynamically. The map uses a light basemap style and is centered on the contiguous US.

Mar 20, 2018

Mapbox GL map example - turn on/off county 5 color

This example displays a Mapbox GL map of U.S. counties with a categorical five-color fill scheme. A menu allows toggling the visibility of the county fill layer on and off. The map uses the Mapbox GL JavaScript API and loads vector data from a Mapbox-hosted source. The layer’s fill color is determined by a categorical property, with each category assigned a distinct hex color stop. The map setup includes a center point in Texas and a zoom level of 5.

Mar 20, 2018

Mapbox GL Ehtnicity Map San Francisco

This interactive Mapbox GL visualization maps the ethnic distribution of San Francisco's population. Each circle represents a data point from the 2010 census, with its color determined by a categorical ethnicity value (White, Black, Hispanic, Asian, or Other) and its radius scaling with map zoom. The example uses the Mapbox GL JS v0.26.0 library to load a vector source and render data-driven styled circles. Moving the mouse over the map queries and prints the feature properties to the console.

Mar 19, 2018

Mapbox GL 5 Color map

This interactive map applies the five color theorem to a precomputed GeoJSON county map, ensuring that no two adjacent counties share the same fill color. Built with Mapbox GL JS v0.26.0, it dynamically loads a vector source from Mapbox and adds five fill layers, each filtered to a specific color from a preset palette. The map centers on Texas at zoom level 5, with a toggleable menu for the fill layer. A mouse-move event queries rendered features and logs their properties to the console, demonstrating feature inspection.

Mar 18, 2018

Mapbox GL in a Tableau Dashboard

This dashboard combines a Mapbox GL map of New York City vehicle collisions with three embedded Tableau dashboards. Users select a collision metric—cycling injuries, cycling fatalities, pedestrian injuries, or pedestrian fatalities—which filters the map's vector source layer and updates the popups. The dark-themed map displays collision points over borough boundaries, while the Tableau views provide supplementary charts. The code uses the Mapbox GL JavaScript API and the Tableau JavaScript API to embed the visualizations.

Mar 22, 2017

JS Bin

This example demonstrates how JavaScript array methods handle sorting and frequency counting. It defines a `maxSpeed` object for vehicles, then converts it into an array of `[key, value]` pairs to sort by numeric speed using both a custom `compareNumbers` function and the default `sort()`. It also counts character frequencies from a string using `reduce()`. All results are logged to the console via `console.log`, with the code running as plain JavaScript in a JS Bin environment.

Mar 8, 2017

JS Bin

This example counts character frequency in a long string of text and outputs a sorted array of characters with their occurrence counts. The code uses JavaScript's `reduce` method to build a frequency object, then sorts the result in descending order using a custom `compareNumbers` function. The data source is a hardcoded string of lowercase letters and underscores. The final output is logged to the console via `console.log`, showing the sorted array in descending order by frequency.

Mar 8, 2017

JS Bin

This example demonstrates two JavaScript array and string manipulation techniques: counting duplicate names in an array using the `reduce` method, and checking if two words are anagrams by sorting their lowercase, trimmed characters. The code logs results to the console, showing a counted object with name frequencies and a boolean `isAnagram` variable. It relies on native JavaScript functions like `toLowerCase`, `split`, `sort`, `join`, and `trim`, with no external visualization libraries. The dataset is a hardcoded array of names and two test words embedded directly in the script.

Mar 8, 2017

Gist bb974dcf54acc39a81cb60d79bf0aa5c

This example plots earthquake epicenters as points on a map using GeoJSON features. It renders the geographic coordinates with `d3.geoPath` and a map projection, while each point is positioned via `d3.forceSimulation` to avoid overlapping labels. The visualization shows five recent seismic events, with the primary ID as magnitude and the secondary ID as a location description. The code uses D3’s force-directed layout to spread the point markers, and the map background likely comes from a geographic shapefile or topojson layer, making the data immediately readable by region.

Feb 8, 2017

colored-data.geojson

A choropleth-style map displays a small set of U.S. counties colored with a categorical palette. The visualization loads a GeoJSON FeatureCollection, where each county polygon includes a `fill` property defining its color. The code uses `d3.geoPath` to project and render the geographic shapes as SVG paths, assigning each county its designated fill color. It relies on the D3 library to handle the GeoJSON parsing and path generation.

Nov 14, 2016

linq.js - LINQ for JavaScript ver 2.2.0.2 (Jan. 21th, 2011)

This example demonstrates the linq.js library, a LINQ-to-JavaScript implementation, through a compact source file that defines an `Enumerable` object with a chainable API. The code showcases methods like `Choice`, `Cycle`, `From`, and `Range`, which generate or transform sequences, along with internal enumerator and dispose patterns for lazy iteration. It highlights how functional query operations can be ported from .NET to JavaScript, using constructors, prototype methods, and lambda-style function creation to mimic LINQ’s deferred execution model.

Oct 25, 2016

Gist cd3b399ded90abed9e03930563398518

This example displays a Mapbox GL JS map centered on Houston, Texas, at zoom level 10, with a set of airfield-style symbol markers plotted over a custom vector tile source. The visualization uses `map.addSource` to load a hosted vector tileset containing school location data and `map.addLayer` to render those points as icons via the `symbol` layer type. A collapsible overlay panel and a menu for switching map views are included, though the menu’s active state and overlay content are not populated in the provided code. The map style is a custom Mapbox style URL.

Sep 29, 2016

Png to SVG example

This example compares a raster PNG icon with its vector SVG counterpart by displaying both versions side by side. The PNG is embedded as a base64-encoded data URI within an SVG `<image>` element. The SVG path uses the same airplane silhouette, rendered with a red fill and a semi-transparent white outline. The code relies on native SVG elements and attributes to define the shape, with the path data manually specified rather than generated by a JavaScript library.

Sep 28, 2016

Circles Test

Three colored circles sit on a blank canvas, each representing a fruit: a yellow banana, a blue grape, and a red apple, with positions and radii set from an inline array. Built with D3 v4, the visualization appends an SVG element and uses `d3.select`, `selectAll`, and chained `.attr` and `.style` calls to map each data object’s x, y, r, and color properties directly to circle attributes. The rendering relies entirely on SVG shapes, with no axes, labels, or interaction.

Jul 21, 2016

D3 + Leaflet

This example combines D3.js and Leaflet to create an interactive map of U.S. states with a hover effect. It uses a Leaflet tile layer from OpenStreetMap as the base, with D3 rendering state boundaries as SVG paths overlaid on the map. The code loads GeoJSON data from a gist and projects it using a custom `d3.geo.transform` that converts coordinates to Leaflet’s layer points. The `d3.geo.path` draws the states, and hover fills them brown. The map’s `viewreset` event triggers a reset function to reposition and rescale the SVG overlay.

May 11, 2016

us2.json

This example displays county boundaries from the US Census Bureau using a TopoJSON file. It renders the geometries onto an SVG or Canvas element with the D3.js library, employing `d3.geoPath` to project and draw the polygons. The visualization is interactive, allowing users to pan and zoom across the map. The code initializes a map projection and fits the path generator to the geographic extent defined in the TopoJSON metadata.

May 2, 2016

A simple map

This example shows a basic interactive map centered on a view of New York City, with the Mapbox streets basemap displayed at zoom level 9. The map is rendered in a full-screen HTML page using the Mapbox.js library, which initializes the map object via `L.mapbox.map` and sets the geographic coordinates and zoom level with `.setView`. The map uses a public access token from the author Jn1532 to load the tiles.

May 2, 2016

zoomUsCounty

This interactive map displays all U.S. counties as gray polygons with state borders overlaid in white. Clicking a state zooms in on that region, while clicking a county triggers a deeper zoom to a scale of 23, with another click resetting the view. The visualization uses D3 v3 and TopoJSON to load geographic data from a gist, projecting it with `d3.geo.albersUsa` and rendering paths via `d3.geo.path`. Transitions animate the zoom using SVG transform scaling and translation, with hover effects highlighting counties and states in orange.

Apr 28, 2016

USTopoJSON

This example displays a map of all U.S. counties as thin black outlines, drawn with SVG paths using the `d3.geo.path()` projection. The map is built from a TopoJSON file fetched from a gist, which contains the county geometries. When a user hovers over a county, the CSS `path:hover` rule turns it red, providing a simple interactive highlight. The code relies on D3 v3 and the `topojson.v1` library to process and render the topology data.

Apr 20, 2016

Gist d8a8c52a3d98232cd513f1f5364a6e5c

This example displays a choropleth map of U.S. county unemployment rates, using a blue sequential color scale ranging from light to dark shades. The map is rendered as SVG paths via `d3.geo.path` with an Albers USA projection, while county data is joined to `d3.map` values from an external TSV. State boundaries are drawn as a white mesh overlay using TopoJSON. The code relies on `queue`, `d3.json`, `d3.tsv`, and `d3.scale.quantize` to bin rates into nine classes.

Apr 6, 2016

d3 chorplath map

This choropleth map of the United States displays county-level unemployment rates using a quantized color scale. The visualization renders counties as SVG paths, colored from light to dark blues based on rates from 0 to 15 percent, with state boundaries overlaid in white. Built with D3 v3, it uses `d3.geo.albersUsa` and `d3.geo.path` for projection, TopoJSON for US county and state geodata, and a queue to load JSON and TSV data asynchronously.

Apr 6, 2016

The Moiré Patterns

Two overlapping sets of vertical bars create animated moiré patterns, with interactive controls for each set adjusting bar count, angle, padding, and color. The visualization uses D3.js to render the bars as SVG rectangles, with a custom `barPattern()` chart function handling the ordinal scaling and transitions between parameter updates. The interface reads user input through D3 selectors attached to HTML form controls, demonstrating dynamic pattern generation through the interference of periodic structures.

Sep 16, 2014