Oluoch Odhiambo

@OluochOdhiambo·5 public vizzes

Social Network Graph

A social network diagram shows ten fictional people grouped by academic department, with colored nodes and gray edges representing connections. Red links highlight relationships between members of different groups, such as Math and English. The visualization uses D3 v5’s `forceSimulation` with `forceLink` and `forceManyBody` to position nodes, while SVG circles and text labels render each person’s name. A `scaleOrdinal` with `schemeCategory10` assigns distinct colors to each department, and a tick handler updates node and link coordinates.

Apr 12, 2023

Loading thumbnail…

Tree Visualization

This example demonstrates a hierarchical tree visualization of car types, showing a root node labeled "Car" that branches into categories like Sedan, SUV, and Truck, each with two leaf nodes representing specific models. The visualization uses a color-coded encoding where the root is a red circle, the first-level categories are green squares, and the leaf nodes are blue triangles. Built with D3 version 5, the code constructs the tree layout using `d3.tree()` and `d3.hierarchy()`, and renders the SVG with cubic Bézier curves for links and distinct shapes per depth level. The data is a static JavaScript object with three levels of nesting.

Apr 12, 2023

Loading thumbnail…

Map of Spain

This example displays a map of Spain, projected using a Mercator projection and rendered as a single SVG path element. It loads world country boundaries from a TopoJSON file hosted on jsDelivr, then extracts Spain’s geometry using `topojson.feature`. The code uses `d3.geoMercator()` with `fitSize` to scale and center the map, and `d3.geoPath()` to generate the SVG path data. It demonstrates loading external GeoJSON/TopoJSON data asynchronously with `d3.json` and appending the result to an SVG canvas.

Apr 12, 2023

Loading thumbnail…

World Map

This world map visualization displays the countries of the world using a Robinson projection. The map is rendered as an SVG path, with the geographic data sourced from a `world-atlas` TopoJSON file. The code uses D3.js v5, along with the `topojson-client` library to convert TopoJSON to GeoJSON, and `d3.geoPath()` with `d3.geoRobinson()` to generate the projected path data.

Apr 12, 2023

Loading thumbnail…

Bar Chart

This bar chart visualizes a simple dataset of five values (10, 20, 30, 40, 50) using D3 v5. Rectangles are rendered as SVG elements, with their heights proportional to the data and their x-positions determined by a band scale (`d3.scaleBand`). A linear scale (`d3.scaleLinear`) maps the values to the vertical axis, and axes are generated with `d3.axisBottom` and `d3.axisLeft`. Bars change color on hover via CSS, and the chart includes a fixed 50-pixel left margin and 20-pixel top offset.

Apr 3, 2023