JSON object

100%

✓ Published0🌍 Public

Last edited Jul 18, 2013

Created on Jul 18, 2013

This visualization is a personal timeline that maps significant life events—such as a graduation, marriage, and job changes—to geographic coordinates in the Ottawa area. It uses a custom JavaScript object to store each year’s details, including pop-up text, timestamps, and latitude/longitude. The code dynamically renders these entries on a map, using the data structure to drive markers and interactive info windows. The implementation relies on the raw JSON-like object for data storage and DOM manipulation to display the timeline, with no external mapping libraries specified.

AI-generated description

Similar vizzes

Loading thumbnail…

timeline

The timeline example displays a vertical list of years, from 2013 down to 1981, with the most recent year labeled "Now." It shows a sequence of dated entries, each linked to a map zoom level and some with geographic coordinates. The visualization uses a custom HTML template with list items, where each entry carries attributes like `zoom`, `lat`, and `lon`. The code relies on plain HTML and CSS classes for styling and interaction, with no external JavaScript libraries like D3 or Three.js evident. The data source is a Gist, and the rendering approach is a static list of clickable year labels.

5534N

66% match

Loading thumbnail…

Career Timeline

A career timeline displays a person’s education, work history, and professional events along a single horizontal axis. The visualization uses D3.js scales and axes to position dates, with colored rectangles for job durations, scattered text labels for roles, and dashed lines connecting event markers to the timeline. It also includes text backgrounds and uses the D3 selection API to reorder elements. The data is hardcoded in JavaScript.

PPatrick Wojda

64% match

Loading thumbnail…

Timeline with 2 streams and events

A hand-drawn style timeline plots education and work history as two horizontal streams on opposite sides of a central axis, with personal events marked as vertical dashes below. The SVG visualization uses D3.js for scales, axes, and data binding, while Rough.js renders the sketch-like aesthetic. Labels for each period identify employers and degrees, and event annotations include dates and short descriptions. The code defines data arrays for education, work, and events, mapping them to time-encoded positions along the x-axis.

PPatrick Wojda

63% match

Loading thumbnail…

Gist 798b9a5ccb654ceebb5b29ce680c5707

This visualization presents a week of daily weather data for a single location, using a circular timeline to encode conditions such as temperature, humidity, wind, and cloud cover. Each day is a concentric ring, with hourly metrics plotted as colored arcs or bars. The code relies on D3.js for layout and rendering, specifically using `d3.forceSimulation` to position labels and `d3.scaleTime` for temporal axes. Data comes from a local JSON file containing Dark Sky API-style forecast fields, rendered in an SVG canvas.

MMbrownshoes

62% match

Loading thumbnail…

json new salem

This visualization displays a map of Salem, likely a geographical area, using a topojson data source. The map is rendered as an SVG graphic, with the shape of the region drawn using the `feature` API from the `topojson` library. While the code includes a time-series scatter plot of temperature data, the visible output is a geographic boundary, not a scatter plot. The project is built with React and uses d3's `json` function for data loading.

Vvigneswaran009

62% match

Loading thumbnail…

Events

This example shows a geographic map of volunteer events across U.S. cities, with clickable markers that open detailed infowindows containing event descriptions, dates, addresses, and volunteer counts. The map uses the Google Maps JavaScript API, with custom top-center controls to pan and zoom between city locations. Event data is fetched from a remote server via jQuery AJAX, and dates are formatted using Moment.js; the visualization also supports URL parameters to filter events by date range.

WWill Carter

62% match

Loading thumbnail…

Timeline

This example shows an interactive timeline of events, rendered as numbered circles positioned along a horizontal line. Each circle represents a data point with a label, and hovering highlights the corresponding event. The visualization is built with React and rendered to SVG, using D3’s `d3.scaleTime` and `d3.axisBottom` to construct the time axis. Data is loaded from the European Parliament’s open data portal, and the layout is calculated with a custom React component that maps event dates to x-coordinates.

Aannesmets

61% match

Loading thumbnail…

practice cars JSON

This example visualizes a small JSON dataset of two cars, each with make, model, year, and driver information. It shows the hierarchical relationship between each car and its associated driver, highlighting nested object structure in the data. The visualization uses D3.js force simulation (d3.forceSimulation) to lay out nodes and links, with JSON data loaded via d3.json. The rendering approach relies on SVG paths and D3’s data join to bind car and driver objects, while the source is a gist by Docwali777. The code does not display any additional attributes beyond the raw nested fields.

DDocwali777

61% match