Exploring Dunitz Front Matter for post

100%

Exploring Dunitz Front Matter for post

✓ Published0🌍 Public

Last edited Nov 4, 2018

Created on Nov 4, 2018

This visualization maps the geographic coordinates from the front matter of a Jekyll blog post, plotting a single point on a world map. The example uses D3’s `d3.geoPath` to render the map’s landmasses and `d3.forceSimulation` to position the point, while the popup text from the post’s `desc` field appears as a label. The data source is a gist containing a Markdown file with front-matter fields like `lat` and `lng`, which the code parses to extract the location.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 894879

This example builds an interactive map visualization using the D3.js library, displaying geographic data over a rendered world map. It applies a force-directed simulation with `d3.forceSimulation` to position nodes, while `d3.geoPath` generates the map outlines and `d3.geoProjection` handles coordinate transformations. The interface includes customizable control panels styled via CSS, allowing users to adjust map layers and layout dynamically. The visualization renders data from a gist source, combining geographic boundaries with overlaid points that respond to simulated forces for a dynamic, data-driven presentation.

Aandrewxhill

70% match

Loading thumbnail…

Gist 67fa3790166d6549f4a9

This interactive visualization pairs a large world map with a side panel, using D3’s `d3.forceSimulation` to scatter data points across geographic coordinates rendered via `d3.geoPath` and Canvas `getImageData` for pixel-level placement. The layout adapts responsively, and the code includes CSS themes for light or dark editorial styling, suggesting a map-based storytelling template.

Aandrewxhill

68% match

Loading thumbnail…

Exploring Dunitz post body

This visualization explores the structure of a post body from a GitHub gist by representing each paragraph and line as a connected node in a force-directed graph. Using D3.js’s `d3.forceSimulation` and `d3.forceLink`, the layout clusters related text segments while preserving the original reading order through link paths. Nodes are colored by paragraph index, and hovering reveals the exact text snippet from the source gistfile1.txt. The graph exposes the document’s logical flow and section boundaries, making the essay’s organization immediately visible.

Aandyrutkowski

68% match

Loading thumbnail…

Gist 8393657

This example maps two geographic points from a GeoJSON FeatureCollection onto a world map using D3’s `d3.geoPath` and a geographic projection. It then runs a force-directed simulation with `d3.forceSimulation`, treating the points as nodes that repel each other while being constrained by the map’s bounds. The visualization shows how the points drift and settle under the force layout, with their positions updated via D3’s data join. The code relies on the `Octomonster.geojson` file for the initial coordinates and uses Canvas rendering for the map and points.

Aadkatrit

68% match

Loading thumbnail…

Gist 9088827

This example renders a set of text labels positioned over a map-like background, with each label’s font size and placement determined by its associated numeric value. It uses a force-directed layout via `d3.forceSimulation` to distribute the labels and avoid overlap, while `d3.geoPath` draws the underlying geographic outlines. The label sizes are computed from the data, and the visualization updates in response to simulated forces, showing how proportional text can be arranged across a spatial context.

Aandybak

67% match

Loading thumbnail…

Gist 34bad0b124f4effdf99d5555cb3222d8

This example shows how spatial relationships between geographic features can be explored through an interactive map. It uses D3.js with `d3.geoPath` to render country outlines from a GeoJSON source, while a force-directed layout via `d3.forceSimulation` positions non-overlapping markers for data points. The visualization computes marker placement on a Canvas, reading pixel colors with `getImageData` to detect land versus water and ensure points remain on landmasses. Hover interactions trigger a tooltip and highlight neighboring regions, with smooth transitions handled by `transition.attrTween`. The data originates from a public GitHub gist and is embedded in a Power BI report, where the canvas is updated on each zoom or pan event.

HHugoberry

67% match

Loading thumbnail…

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.

JJn1532

67% match

Loading thumbnail…

Gist 8393692

This example displays two geolocated markers on a map, each with a title and description of a building. It uses a `map.geojson` file as the data source, containing point features with custom properties for labels and colors. The visualization renders the map using D3’s `d3.geoPath` to draw the geographic features, while the markers are positioned based on their coordinates. The code relies on D3’s force simulation (`d3.forceSimulation`) to potentially handle marker placement or interaction, though the static view shows the two points plotted directly.

Aadkatrit

66% match