Skip to main content
100%

fresh block

✓ Published0🌍 Public
Aadityajain15
Last edited Jul 5, 2017
Created on Jul 5, 2017

This visualization presents a calendar heatmap of US-North Korea relations from 1990 to 2017, using two parallel monthly cell columns to show provocative actions and negotiations. Hovering over a negotiation cell displays a tooltip containing detailed event descriptions from the Negotiations.csv file, including leaders, nations, and dates. Built with D3 v4, the SVG chart uses `d3.scaleQuantize` for color encoding and custom mouse event handlers, with annotations from the d3-annotation library to highlight key moments.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/adityajain15/'>adityajain15</a>'s block: <a href='http://bl.ocks.org/adityajain15/4355564e4f98220af90932d576a0aae0'>fresh block</a>

mit Licensed

Similar vizzes

Loading thumbnail…

fresh block

This visualization maps the history of U.S.–North Korea nuclear negotiations from 1990 to 2012 using a timeline of event annotations overlaid on a stacked bar chart. The chart displays monthly counts of provocations and negotiations from USKoreaData.csv, with a second layer of detailed event descriptions from Negotiations.csv appearing as labeled annotations at their corresponding dates. The stacked bars encode two variables—Provocations and Negotiations—with the height of each bar segment proportional to the number of events that month, and the annotations provide context for major diplomatic milestones such as Six-Party Talks and bilateral meetings. Built with D3 v4 and rendered as SVG, the visualization uses a clean temporal layout with leader lines connecting annotations to the data points, enabling viewers to trace the relationship between negotiation efforts and provocative actions over time.

Aadityajain15
89% match
Loading thumbnail…

fresh block

A single black line chart plots monthly values from a small JSON dataset, with light gray circles marking each data point. Hovering a circle turns it red, displays the exact value above it, and draws a dashed vertical guide line to the baseline. The visualization uses D3 v4 with SVG rendering, applying `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` for the chart, plus mouseover handlers to toggle the interactive details. Axis labels show abbreviated month-year formats, with the final value annotated in larger monospace text.

NNpfn
69% match
Loading thumbnail…

fresh block

A calendar heatmap displays daily fire counts from 1992 to 2015, using color intensity to show the number of fires per day. The visualization uses d3.timeDays and d3.timeWeek to structure the grid, with d3.scaleQuantize mapping fire counts to a warm color scale. The d3.csv function loads data from a CSV file, and d3.nest groups records by date to assign fill colors to each cell. The code uses SVG rendering with d3.v4, including a custom pathMonth function to outline month boundaries.

DDJURK
69% match
Loading thumbnail…

fresh block

This example overlays a red geodesic circle around Pyongyang on a world map, using an azimuthal equidistant projection to show the range of a missile strike as a consistent distance on the globe. It also draws a red line between Pyongyang and Washington, D.C., with red points marking both cities. The visualization uses D3 v4 with `d3.geoCircle`, `d3.geoPath`, and `d3.geoAzimuthalEquidistant` to render SVG paths. Country boundaries come from a GeoJSON file loaded via `d3.json`, while the sphere outline and projected features are drawn as SVG path elements.

JJeanLucPinol
69% match
Loading thumbnail…

fresh block

This visualization is a calendar heatmap showing daily fire counts for each year from 1992 to 2015. Each cell represents a day, with color intensity (via a quantized scale from pale yellow to deep red) mapping to the FIRE_YEAR value from the CSV data. The layout uses d3.timeDays and d3.timeWeeks to position cells by week and weekday, with month boundaries outlined by pathMonth. The code employs d3.nest to group the CSV records by date and applies the color scale to the corresponding rectangles.

DDJURK
68% match
Loading thumbnail…

fresh block

This visualization gallery entry presents a suite of D3.js charts, each embedded via external scripts and configured through data attributes. It shows multiple interactive views of 2018 data, including regional comparisons, partner breakdowns, and beneficiary analyses, with toggles for sorting and average lines. The code leverages D3.js for rendering, with responsive layouts and lazy loading, while the source data is fetched from linked gist-hosted scripts.

GGerardoFurtado
67% match
Loading thumbnail…

fresh block

This visualization displays monthly values as a line chart with circular markers, showing a basic time series of twelve data points from January through December 2016. The SVG rendering uses d3.svg.line with an ordinal x-scale and linear y-scale to map the data. Hovering over a grey circle highlights it in red, reveals the corresponding value as text above the point, and draws a dashed vertical line from the marker down to the chart baseline. The code relies on d3.json for data loading and d3.time.format for date parsing.

MMarineRu
67% match
Loading thumbnail…

fresh block

A line chart displays monthly values over time, with each data point shown as a semi-transparent grey circle. Hovering a circle highlights it in red, displays the numeric value as text, and draws a dashed vertical guide line to the baseline. The visualization uses D3 v4 with `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.json` to load and render the dataset, while `d3.select` and `transition` manage the interactive hover effects in an SVG container.

MMilowB
67% match