Skip to main content
Log in
G

Guerino1

@Guerino1·19 public vizzes

Loading thumbnail…

IF4IT Sample Charts Web Page

This interactive web page demonstrates how D3.js version 2.4.5 can blend SVG charts with standard HTML layout controls. It displays a mixed dataset of systems categorized by severity, ownership, and business domain, rendered as an ordinal scatter plot with drop-down menus that swap the X and Y axes. The code uses `d3.scale.ordinal()` and `d3.svg.axis()` to build the coordinate system, while a redrawing function toggles line colors on each axis swap.

Sep 5, 2016
Loading thumbnail…

IF4IT Sample Charts Web Page

This page demonstrates how to embed D3.js charts within HTML layout constructs, using SVG for rendering and animation. It displays four sample scatterplot variations that mix numeric and categorical season data on the x and y axes, with colored circles of varying radii. The code creates linear scales and axes via `d3.scale.linear` and `d3.svg.axis`, and draws a bordered canvas with a translated inner group for positioning. The example illustrates flexible axis data types and chart composition within a static web page.

Aug 10, 2016
Loading thumbnail…

IF4IT Sample Charts Web Page

This page presents a collection of four small multiples, each an SVG scatterplot with a numeric or categorical axis and a bordered canvas. The charts demonstrate mixing D3.js charts with HTML layout by placing them on a single web page, using the D3 version 2.4.5 API. Each chart is drawn by functions that construct an SVG canvas, append a border path, and use `d3.scale.linear` with `d3.svg.axis` to render the y-axis. The data are hard-coded arrays of objects with `cx`, `cy`, `r`, and `color` fields, and the page uses inline JavaScript to create the SVG elements.

Jul 28, 2016
Loading thumbnail…

IF4IT Sample D3 Polygons Web Page

This page demonstrates interactive SVG polygon charts built with D3.js, showing a single yellow chevron shape that turns red on mouseover. Multiple chevrons are drawn in separate SVG canvases, each constructed from coordinate data points using `d3.select().append("polygon")`. An animated version uses `.transition().duration(3000)` with `attr("points", transitionCoordinates)` to slide the chevron from left to right. The code relies on D3’s selection and event-handling APIs (`on('mouseover')` and `on("mouseout")`) to change fill colors dynamically.

Jul 23, 2016
Loading thumbnail…

IF4IT Sample Charts Web Page

This page presents a set of interactive sample charts and diagrams built with D3.js, combining HTML layout constructs with SVG graphics. It demonstrates linked highlighting between chart elements and text labels: hovering over a chevron polygon or its associated text box changes the fill colors of both, using mouse event handlers that map element IDs. The visualizations include a Software Development Life Cycle (SDLC) flow diagram rendered as chevron-shaped polygons with captions. The code relies on D3 selections, CSS-style attribute manipulation, and custom event functions, with animations and color transitions triggered by user interaction.

Jul 13, 2016
Loading thumbnail…

Example of Dynamically Resizing SVG Canvas and Shapes

This example shows SVG shapes—four semi-transparent colored circles and several thick maroon lines—that dynamically resize to match the browser window's dimensions. The visualization uses a fixed-position `#chart` div, with CSS determining the available space. On each window resize event, the `draw()` function reads `clientWidth` and `clientHeight` to update the SVG canvas size and recalculate shape positions and radii. The code relies on the d3.js library (version 2.4.5) for SVG element selection, data binding, and attribute updates, with data drawn from a hardcoded array of circle definitions.

Jul 6, 2016
Loading thumbnail…

D3 Rectangle Examples

This example demonstrates the creation of six SVG rectangles using D3.js, each illustrating different visual properties such as fill color, stroke width and alignment, offset positioning, and corner radii. It also includes a seventh set that arranges three colored rectangles with varied dimensions and placements. The code uses D3’s selection and append methods to build SVG elements, with data defined as inline JavaScript objects specifying attributes like width, height, and style. The page is rendered at a fixed size and relies on D3 2.4.5.

Jan 29, 2016
Loading thumbnail…

D3 Path Examples

This example demonstrates how D3.js can draw and animate SVG paths from simple coordinate datasets, including diagonal and horizontal lines, multipoint curves, triangles, and rectangles. The code defines multiple data arrays and uses the `d3.svg.line()` API with various interpolation types to render static shapes, while separate functions animate paths by transitioning the `d` attribute using `transition().duration(6000)`. One animation elongates a horizontal line by mutating the dataset’s endpoint, and another shifts the line’s origin point, both relying on D3’s built-in transition system. The page sets its frame height to 1800 pixels to accommodate the multiple SVG canvases.

Nov 27, 2014
Loading thumbnail…

IF4IT Sample Charts Web Page

This example shows a force-directed network diagram of enterprise-related entities, including organizations, capabilities, applications, countries, people, and products, with links connecting them in a hierarchical business structure. The visualization uses D3.js (version 2.4.5) to render nodes and edges as an interactive animated graph, with each node colored by type and hyperlinks embedded for further exploration. The data comes from a static JavaScript array with explicit node and link sets, and the layout appears to be arranged using D3’s force simulation, though the specific physics parameters are not fully defined in the visible code.

Jul 10, 2014
Loading thumbnail…

IF4IT Sample Charts Web Page

This example renders an animated force-directed network graph of enterprise architecture nodes, including organizations, capabilities, applications, and people, with labeled links representing predicates like "Predicate 2." Built with D3.js, it uses `d3.forceSimulation` to position nodes by size and type, applying categorical color scales. Node and link data are embedded in the HTML source, and clicking a node navigates to external documentation pages.

Jun 26, 2014
Loading thumbnail…

IF4IT Sample Charts Web Page

This example presents three vertical bar charts, labeled with placeholder legend strings and associated links, drawn side-by-side on a single HTML page. Each bar’s height corresponds to a numeric magnitude value from a hard-coded data set embedded in JavaScript. The visualization is created using D3.js version 3, specifically leveraging the `d3.scale.linear` API for coordinate mapping and the `d3.scale.category` color scale for bar styling. The page also integrates HTML layout constructs to position the charts, demonstrating how D3 charts can be mixed with standard web formatting.

Jun 12, 2014
Loading thumbnail…

IF4IT Density Chart

The IF4IT Density Chart displays a table-oriented view of node density, where each of 27 nodes is listed with its total relationship count and a computed density percentage relative to the maximum value. Sorted columns allow reordering by name or numeric metrics. Built with D3.js v3, the visualization uses SVG-rendered HTML tables populated via `d3.selectAll` and `.sort()` to dynamically reorder records, with data supplied as inline JavaScript objects in the page.

Jan 2, 2014
Loading thumbnail…

IF4IT Density Chart

The IF4IT Density Chart displays the distribution of total counts across 27 labeled nodes as a table-oriented density visualization, with each node’s value rendered as a clickable hyperlink. Built with D3.js (d3.js library) and rendered as SVG, the chart encodes node totals as proportional text-based density cells, using an embedded dataset of static values. The code initializes a `drawDensityTable` function to map numerical totals into a visual grid, though full styling and layout details remain incomplete in the provided snippet. It relies on direct DOM manipulation via D3 selections to generate the SVG elements.

Dec 28, 2013
Loading thumbnail…

My Force Directed Graph

This example shows a radial hub-and-spoke graph centered on a fixed focal node, with linked nodes representing resources, products, contracts, and countries. It uses D3.js version 2.4.5 and its force layout to position nodes and edges, while each node is rendered as a clickable hyperlink to an external data page. The animation reveals the graph assembling as forces settle, with the focal node pinned at a fixed coordinate to anchor the structure.

Jun 28, 2013
Loading thumbnail…

IF4IT Sample Charts Web Page

This animated IF4IT sample page demonstrates three horizontal bar chart datasets, each bar labeled with generic legend strings and magnitudes that link to related IF4IT discipline pages. The visualization uses the D3.js library (version 2.4.5) to render the bars, likely with transitions between datasets to show changes in values. Data is hardcoded in JavaScript arrays, and the page mixes chart rendering with HTML layout, emphasizing chart interactivity through clickable links. The animation effect appears to cycle or update the displayed dataset, though the exact transition logic is not fully visible in the provided snippet.

Mar 1, 2013
Loading thumbnail…

IF4IT Sample Charts Web Page

This page presents a radial hub-and-spoke network diagram with a single focal node connected to 24 surrounding nodes. The visualization uses D3.js version 2.4.5 to draw the graph, while HTML layout constructs surround it. The page sets its height and width to 1400 pixels using `d3.select(self.frameElement)`. The data includes node identifiers, names, data types, relationship names, and hyperlinks to www.if4it.com resources. The code defines a `drawRadialHubAndSpoke` function that accepts parameters for drawing configuration, though the complete rendering logic is not shown.

Aug 3, 2012
Loading thumbnail…

IF4IT Sample Charts Web Page

This page demonstrates a D3.js stacked bar chart that displays weekly offset values for three groups (A, B, and C) across seven weeks. The code builds the visualization by creating SVG rectangles positioned using base and offset data properties, with each bar hyperlinked to related IF4IT content. The chart uses d3.select and scale.linear to map data to canvas coordinates, while embedding interactive links directly within the bar elements. The example integrates charts with HTML page layout, showing how custom data sets can drive a simple multi-series visual comparison.

Apr 10, 2012
Loading thumbnail…

IF4IT Sample Charts Web Page

The page shows three separate pie charts arranged within an HTML layout, each visualizing a distinct dataset of categorical magnitudes with legend labels and hyperlinks. It demonstrates how D3.js pie and arc layouts integrate with custom color scales and margin-based positioning. The code explicitly uses the D3.js library (version 2.4.5) to construct interactive slices, with each slice supporting a clickable link to external resources. Animation is achieved through D3’s transition capabilities, while the page’s metadata highlights that the rendering is animated, suggesting the arcs are drawn or updated with motion. The underlying data is hardcoded as JavaScript arrays of objects.

Apr 7, 2012
Loading thumbnail…

Testing Pie Chart

This pie chart displays the proportional magnitudes of seven labeled categories using D3.js. The visualization renders each slice with a distinct color from the built-in `d3.scale.category20` palette and positions legend labels outside the outer radius. The code constructs the chart by binding data through `d3.layout.pie` to generate arc geometry, which is then drawn as SVG paths using `d3.svg.arc`. Larger slices also include their magnitude values, rotated along the arc centroid for readability.

Apr 5, 2012