jimmyjs1607

@jimmyjs1607·7 public vizzes

Hex map of UK constituencies

This visualization displays UK parliamentary constituencies as a pointy-topped hex map, with each hexagon representing one constituency to give equal visual weight. Users can color the map by various demographic and election datasets, including population, 2017 General Election results, and EU Referendum estimates. The map uses D3.js with geoNaturalEarth1 projection and geoPath for rendering, while the hexagon layout comes from a HexJSON file. A color legend and clickable hexagons allow for interactive exploration and data selection.

Jun 14, 2021

Loading thumbnail…

Hex map of UK constituencies

A pointy-topped hex map displays the 2017 UK parliamentary constituencies, each rendered with equal visual weight. A dropdown selector allows coloring the hexes by various data, including region, population, election results, and EU referendum estimates. The visualization uses D3 v6, with a custom `Constituencies` class loading HexJSON data. The interface includes interactive elements: a color legend and buttons to save the map as HexJSON or SVG, with WebGL rendering support.

Jun 14, 2021

Loading thumbnail…

Untitled

This example visualizes the distribution of sepal length across three iris species using a box plot with overlaid individual data points. Each species is represented by a vertical box showing the interquartile range, whiskers extending to the minimum and maximum values, and a line marking the median. Individual observations from the iris dataset are plotted as white circles with random jitter to reduce overlap. The visualization is rendered as an SVG using d3.v4, with summary statistics computed via `d3.nest` and `d3.quantile`, and scales and axes created using `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom` and `d3.axisLeft`.

Jun 10, 2021

Loading thumbnail…

Untitled

This example presents horizontal box plots that summarize highway fuel efficiency (hwy) across different vehicle classes from the ggplot2 mpg dataset. Each box shows the interquartile range, median, and whiskers, with individual data points overlaid. The visualization uses d3.v4 with SVG and animation, employing d3.nest for grouping and summary statistics, d3.scaleBand for the categorical y-axis, d3.scaleLinear for the numeric x-axis, and a d3.scaleSequential with an Inferno color interpolator. A custom tooltip appears on hover, while the axes are drawn using d3.axisLeft and d3.axisBottom.

Jun 9, 2021

Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This zoomable sunburst visualizes the hierarchical flare dataset, showing nested categories as concentric arcs where clicking a segment zooms in to reveal its children. Built with D3 v5, it uses `d3.hierarchy` and `d3.partition` to compute the layout, `d3.arc` for rendering, and `d3.interpolateRainbow` for coloring. Interactive transitions are animated via `transition.attrTween`, with arc and label visibility filtered dynamically. The SVG rendering includes click-driven zoom and a central reset circle.

Jun 9, 2021

Loading thumbnail…

Fork of Sunburst

This example visualizes a hierarchical dataset of network infrastructure using a sunburst diagram. Each ring represents a level in the hierarchy, from geographic regions down to individual server racks, with arc lengths proportional to the value counts. The visualization is built with D3 v5 and React, using `d3.partition()` to compute the layout and `d3.arc()` to generate the SVG paths. Colors are assigned per top-level branch via `d3.scaleOrdinal` and `d3.interpolateRainbow`, with labels shown for larger segments. The data is loaded from a JSON file and rendered into an SVG element.

Apr 19, 2021

Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This interactive sunburst visualizes the hierarchical flare dataset, showing the relative sizes of its categories and subcategories. Clicking an arc zooms into that branch, expanding its children while collapsing others. Built with D3 v5, the chart uses `d3.partition`, `d3.hierarchy`, and `d3.arc` to render the sectors, with smooth zoom transitions driven by `transition.attrTween`. Color scales via `d3.scaleOrdinal` and `d3.interpolateRainbow`, and the layout adjusts dynamically on each click, with SVG elements and animations powered by the standard D3 library.

Apr 19, 2021