mosesimmanuelvemana@my.unt.edu

@mosesvemana·13 public vizzes

ICE8 - Family Tree

This example shows an interactive family tree for the British royal family, with nodes representing individuals like King Charles, William, and Harry, and colored rectangles indicating different generations or types. The visualization uses D3.js v3 with a tree layout and SVG rendering, featuring expandable/collapsible nodes, tooltips, and animated transitions. It loads hierarchical JSON data and renders custom-styled node boxes with colored fills, drop shadows, and arrow-marked links. The code also implements zoom and drag behavior with mouse wheel support, alongside collision detection and a breadth-first traversal to manage node positions and depth-based spacing.

Apr 12, 2023

Loading thumbnail…

ICE8 - Social Network Graph

This example visualizes a social network graph, showing eight people (nodes) and their friendship connections (links) as red circles connected by black lines with arrowheads. The graph is rendered using SVG and D3.js v6, with node positions determined by the `d3.forceSimulation` API, including link, charge, collision, and center forces. Users can drag nodes to reposition them, and hovering highlights a node with a green border. Data comes from a JSON file specifying node IDs and relationships.

Apr 11, 2023

Loading thumbnail…

ICE8-Country map

This map displays the fifty U.S. states as orange landmasses with black state borders, highlighting a state in green when hovered. It loads geographic data from a TopoJSON file hosted on unpkg, processes it with `topojson.feature` and `topojson.mesh`, and projects it using `geoAlbersUsaTerritories`. The React component renders the map as SVG paths via `d3.geoPath`, with loading state handled by React hooks.

Apr 10, 2023

Loading thumbnail…

ICE8 - World Map

This visualization displays a world map using a natural Earth projection, with countries rendered as filled SVG paths and a light blue sphere representing the globe. The map loads geographic data from the world-atlas TopoJSON dataset, then converts it to GeoJSON features via the topojson library’s `feature` function. The D3.js `geoNaturalEarth1` projection and `geoPath` API generate the country boundaries, which are styled with a pale fill and semi-transparent black strokes against a white background.

Apr 10, 2023

Loading thumbnail…

ICE-7 LINE GRAPH

This line graph displays total car sales from 2013 to 2021, with the timeline on the x-axis and sales amounts on the y-axis. Using d3.csv to load external data, the visualization parses date strings with d3.timeParse and scales them via d3.scaleTime and d3.scaleLinear. The chart renders as an SVG path generated by d3.line, with axis labels and gridlines created through d3.axisBottom and d3.axisLeft. The line is styled with a red stroke, and axis ticks include padded labels.

Mar 26, 2023

Loading thumbnail…

ICE-7 line graph

A line graph displays total car sales per year from 2013 to 2021, using a time-scaled x-axis and linear y-axis. The SVG renders a red path connecting data points, with axis gridlines and rotated axis labels. The code loads CSV data from a GitHub gist, parses dates with `d3.timeParse`, and builds scales using `scaleTime` and `scaleLinear`, then generates the line via `d3.line` and appends axes with `axisBottom` and `axisLeft`.

Mar 26, 2023

Loading thumbnail…

Fork of Piechart ICE - 7

This pie chart displays the sales rankings of 50 restaurant brands from the "Future50" dataset for 2020. Using D3 v5, the visualization generates SVG arcs with `d3.pie` and `d3.arc`, applying a categorical color scale for each segment. Value labels are positioned via `arc.centroid`, while a legend on the right lists restaurant names and their corresponding sales figures. Data is loaded asynchronously from a raw GitHub CSV file and processed with the `d3.csv` function.

Mar 26, 2023

Loading thumbnail…

ICE-7 Area Graph

This area graph visualizes total car sales per year from 2013 to 2021, with a smooth curve (using d3.curveBasis) highlighting trends over time. The SVG rendering uses d3.scaleLinear for both axes, d3.axisLeft and d3.axisBottom for labeled ticks, and d3.line plus d3.area generators to draw the outlined and filled regions. Data is loaded as CSV from a GitHub gist. The chart includes a purple title, green filled area, and bold blue axis labels.

Mar 26, 2023

Loading thumbnail…

ICE-7

This interactive scatter plot visualizes the Iris dataset, cycling every two seconds between four flower measurements (petal width, sepal width, petal length, and sepal length) on the x-axis while sepal length remains on the y-axis. Built with D3 v6, it uses `scaleLinear`, `axisLeft`, and `axisBottom` to render axes, and `selectAll` with `join` to update circles smoothly. The reusable `scatterPlot` function, inspired by Mike Bostock's chart conventions, accepts configurable accessors for data, dimensions, and margins. Data loads from a CSV via `d3.csv`, and the animation uses `setInterval` to re-invoke the plot with new column mappings.

Mar 25, 2023

Loading thumbnail…

ICE-6 Part - II

This visualization presents a scatter plot of penguin measurements, mapping flipper length on the x-axis and body mass on the y-axis, with each point colored by species. Using D3 v5 and React, it loads data from a CSV file, applies linear scales, and renders circles with SVG. Axes are added via d3.axisLeft and d3.axisBottom, while labels and a title use static SVG text.

Mar 12, 2023

Loading thumbnail…

ICE-6

This example displays Walmart sales figures for 15 U.S. cities using a horizontal bar chart rendered as SVG. It loads data from a CSV file via `d3.csv`, maps sales values to bar widths with `d3.scaleLinear`, and positions city labels using `d3.scaleBand`. Gridlines and tick labels are generated from the x-scale’s ticks. The visualization is built with React components and D3 v5, where axes are manually drawn using SVG elements rather than D3’s axis helpers.

Mar 12, 2023

Loading thumbnail…

ICE-5

This page displays metadata about an iPhone products dataset loaded from a CSV file hosted in a GitHub gist. It shows the data size in kilobytes, row count, and column count as plain text. The code uses D3.js v7’s `d3.csv` to asynchronously fetch and parse the dataset, then `d3.csvFormat` to compute the file size. A background SVG image of an Apple logo is applied via CSS, and the heading provides context about purchase links and specifications.

Mar 4, 2023

Loading thumbnail…

Fork of Cat smiley

This example shows a stylized cat smiley face rendered as a static SVG. The face consists of a silver circular head, orange eyes with dark pupils, angular eyebrows, whiskers, and a curved black mouth, all composed from D3 arc primitives. The code uses React to define the SVG elements and D3 v7’s `arc` function to generate the mouth, eye highlights, and ears. The visual is assembled entirely with computed D3 paths and positioned with SVG transforms, without any external data source.

Feb 25, 2023