Coola85

@Coola85·8 public vizzes

US State Map

This interactive map of the United States uses D3 v3 to render state boundaries as SVG paths from the included `uStates.js` data file. Each state is colored according to randomly generated sample statistics—low, average, and high values—using an interpolated color scale from light yellow to dark red. Hovering over a state triggers a CSS-based tooltip that displays the state's name and its low, average, and high values in a styled HTML table. The map animates state fills on hover with a subtle opacity change, while the tooltip follows the cursor, providing a clean and informative way to explore the data.

Aug 1, 2018

Loading thumbnail…

Mapa de Actores y Proyectos en Territorio

A map of actors and projects in Panama City visualizes a network of urban, environmental, and social initiatives overlaid on a Leaflet tile layer. Colored circles represent projects, plans, programs, and stakeholder types, with links drawn as lines; clicking a node reveals its connections by fading unrelated elements. The visualization uses d3.forceSimulation for layout, d3.drag for node movement, and D3 transitions for interactive opacity changes, while geographic coordinates pin nodes to the map via Leaflet’s SVG layer.

Aug 1, 2018

Loading thumbnail…

Smoothed Radar Chart

Two smoothed radar charts compare budget allocations across six departments for two categories, "Allocated budget" and "Actual Spending." Rendered with D3 v4, the visualization uses SVG and animation, with each chart featuring a distinct color scheme and an optional legend. The radar paths are drawn with rounded strokes for a polished look, and data labels wrap to fit within the chart’s dimensions. The second chart adds a custom unit label and legend title, demonstrating flexible configuration.

Jul 12, 2018

Loading thumbnail…

Radar Chart D3 V4

This radar chart visualizes six Liverpool neighborhoods across a single series of percentage-based values. The D3 v4 code uses `d3.select`, `append("polygon")`, and `transition` methods to render and animate the SVG polygon, while `d3.scaleOrdinal` defines the color range. The chart includes circular level guides with percentage labels, axis lines, and interactive hover effects via `on('mouseover')` that reveal tooltips. Data comes from a local JSON file, and the rendering relies on SVG elements with custom configuration for dimensions and levels.

Jul 9, 2018

Loading thumbnail…

Collapsible Tree Example

This example shows a collapsible tree diagram where nodes are displayed as SVG images and connected by curved links, with node labels and link strokes colored by data attributes. The visualization presents hierarchical data from a static JavaScript array, using D3 v3’s `d3.layout.tree` to compute the layout and `d3.svg.diagonal` to draw the links. Node icons are loaded from external SVG files (`rect.svg`, `rect2.svg`) via `xlink:href`, and link colors reflect each target’s `level` property. The code defines nodes with `image` elements and text labels, while the tree structure and styles are set in the HTML and CSS.

Jul 4, 2018

Loading thumbnail…

Collapsible Tree Example

This example shows a static hierarchical tree diagram with nodes and links loaded from an external JSON file. The visualization uses the D3.js v3 library, specifically the `d3.layout.tree` for computing node positions and `d3.svg.diagonal` for drawing curved connecting paths between parent and child nodes. Nodes are rendered as SVG circles with text labels, and the layout is normalized to a fixed depth of 180 pixels per level. The data source is a JSON array containing a top-level node with two children, one of which has its own descendants, demonstrating basic tree structure rendering without interactivity.

Jun 16, 2018

Loading thumbnail…

Tree v5

This example shows a simple family tree with a single bottom-to-top orientation, where the root node appears at the bottom and child nodes branch upward. The tree uses a minimal dataset (Father, Son, Grandson, Granddaughter) loaded from a local JSON file. The visualization is built with d3.v5, using `d3.tree()` to compute the layout and SVG rendering for the nodes and curved links. Node labels are added as text elements, while link paths use cubic Bézier curves to connect parent and child positions. The code defines only one orientation in the `orientations` object, though the structure allows for more.

Jun 6, 2018

Loading thumbnail…

Tree

This example shows a simple hierarchical family tree with three generations, drawn in a bottom-to-top orientation using the D3.js v3 library. It demonstrates the `d3.layout.tree` layout and `d3.svg.diagonal` for rendering curved link paths, while nodes appear as circles with text labels for each person’s name. The data comes from a local `graph.json` file containing a nested “Father,” “Son,” and grandchildren structure. The SVG output is styled with minimal CSS, using a light gray border and black links, and the layout is positioned within a fixed margin and size.

Jun 6, 2018