Declan Naughton

@declann·6 public vizzes

Fork of Fork of D3 v5 Zoomable Sunburst

A zoomable sunburst visualization displays the hierarchical Flare dataset, showing the relative sizes of categories and subcategories through concentric ring segments. Clicking a node smoothly animates and re-scales the chart to focus on that branch, with the central circle resetting the view. Built with D3 v5, it uses `d3.partition`, `d3.hierarchy`, and `d3.arc` for layout and rendering, while `transition.attrTween` and `d3.interpolate` drive the animated transitions between zoom states. Color mapping uses `d3.scaleOrdinal` with `d3.interpolateRainbow`.

Feb 9, 2024

Loading thumbnail…

Fork of packedlayout

Three groups of colored circles separate into loose clusters as a D3 force simulation runs. The visualization uses `d3.forceSimulation` with `forceX` pulling nodes toward three distinct horizontal centers, `forceManyBody` for repulsion, and `forceCollide` to prevent overlap. Each of the 100 randomly sized nodes is assigned one of three categories and rendered as an SVG circle whose fill color matches that category. The simulation updates positions on every tick, redrawing the circles via a data join in `index.js`.

Jan 15, 2024

Loading thumbnail…

Fork of React Starter

This example demonstrates a basic React application that renders a static message ("Hello vega") alongside a Vega bar chart embedded from a remote specification. The code initializes a React root using `createRoot` and renders a simple functional component with JSX, while separately using `vegaEmbed` to inject the Vega visualization into a dedicated div. It imports React 18, ReactDOM, Vega, Vega-Lite, and vega-embed from CDNs, with the chart specification sourced from a raw GitHub URL. The example shows a minimal integration of React for UI text and Vega for data visualization on the same page.

Jan 9, 2024

Loading thumbnail…

Fork of Let's make a face with D3.js!

A yellow smiley face with animated eyebrows demonstrates basic D3.js DOM manipulation and SVG rendering. The face is built from SVG circles, rectangles, and an arc-generated mouth path, centered within a fixed 960×500 viewport. Using D3 v5, the eyebrows transition vertically via chained `transition().duration()` calls, moving down 50 pixels and back over four seconds. The code imports `select` and `arc` from the D3 library, constructs the face with SVG shapes, and applies no external data—relying entirely on hardcoded geometric constants for positioning.

Jan 9, 2024

Loading thumbnail…

hhh Map Simple

This example renders a simplified world map using a Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`. It displays country boundaries as white-stroked paths, along with graticule and outline overlays, on a full-window SVG. The geographic data is fetched from the `visionscarto-world-atlas` TopoJSON source and converted to GeoJSON with `topojson.feature`. React manages the state, triggering a redraw when the data loads.

Sep 15, 2023

Loading thumbnail…

Fork of Visualize Data with a Heat Map

This heat map visualizes monthly temperature variance across years, using a red color scale where each rectangle represents a month’s deviation from the base temperature. The data comes from freeCodeCamp’s global-temperature JSON, with months converted to names and values offset by the base temperature. Built with the vega-lite-api, it encodes year and month as ordinal axes, uses `markRect` for the grid, and includes tooltips showing year, month, and temperature. The visualization is rendered via Vega-Lite’s SVG output, configured with custom axis styling.

Sep 15, 2023