Ybg99

@Ybg99·9 public vizzes

Family Tree- ICE 8

This visualization displays a family tree as an interactive node-link diagram. People are represented as colored rectangles, with connections drawn as lines that include directional arrows and labels. The layout is computed automatically, and users can click on nodes to expand or collapse their descendants, with smooth animations for these transitions. The implementation uses D3.js v3 for hierarchical tree layout, SVG for rendering, and React for the component framework, with custom styling for tooltips and zooming behaviors.

Apr 4, 2022

Loading thumbnail…

Social Network - ICE 8

This example visualizes a small social network of nine individuals, showing connections as links whose thickness encodes the weight of the relationship. The graph layout is computed by a force-directed algorithm (d3.layout.force), which positions nodes with charged particles and supports interactive dragging via force.drag. Nodes are rendered as gray circles with name labels, while links are drawn as gray lines (SVG line elements). Data comes from the graph.json file, defining node names, group assignments, and edge weights, with the simulation updating positions on each tick event. The visualization uses d3.json to load data and d3.select to append the SVG canvas.

Apr 4, 2022

Loading thumbnail…

Country Map- ICE 8

This example displays a choropleth-style map of the United States, coloring each state with a uniform dark teal fill and a light stroke. Hovering over a state changes its fill to a pale cream, providing a simple interactive highlight. The visualization uses D3 v5’s `geoPath` and `geoAlbersUsa` projection, combined with TopoJSON’s `feature` method to parse state boundaries from a remote JSON file. The SVG rendering is styled via a linked CSS stylesheet, with hover effects applied through the `.states:hover` class.

Apr 3, 2022

Loading thumbnail…

World Map ICE-8

This example displays a world map using a natural Earth projection, rendered as SVG paths. Countries are filled with a muted green and outlined with a faint red stroke, while the globe’s sphere is a light gray. The map uses topojson data from the world-atlas package, processed with the `feature` API and drawn using `geoPath` with a `geoNaturalEarth1` projection.

Apr 3, 2022

Loading thumbnail…

ICE 7- Area Graph

This area graph displays mobile sales data from 2010 to 2020, combining a yellow line chart with a gray filled area beneath it to emphasize trends over time. The visualization uses D3 v5 with SVG rendering, employing `scaleTime` and `scaleLinear` for axes, `line()` and `area()` generators with `curveBasis` for smooth curves, and `axisBottom`/`axisLeft` with gridlines. Data is loaded from a GitHub Gist CSV file, with years parsed via `d3.timeParse` and sales values formatted using `format('.3s')`.

Mar 28, 2022

Loading thumbnail…

ICE 7 - Pie chart for Mobiles sales

This example displays a pie chart of mobile sales by brand, with each slice labeled by its sales value and accompanied by a legend showing brand names and corresponding figures. It imports data from a CSV file using `d3.csv` and renders the chart as an SVG. The pie layout (`d3.pie`) and arc generators (`d3.arc`) create the slices, while a `scaleOrdinal` maps sales values to a fixed array of section colors, with text and legend elements positioned manually.

Mar 28, 2022

Loading thumbnail…

ICE 7- Iris Data

This scatter plot visualizes the Iris dataset, showing petal length and width for three species of iris flowers, each colored distinctly. The visualization uses D3 v6 within a plain HTML page, employing `d3.scaleLinear` for axes, `d3.axisLeft` and `d3.axisBottom` for tick marks, and SVG circles for data points. Data is loaded asynchronously from a CSV via `d3.csv` and parsed into numeric values. The plot encodes species identity through color, with a simple switch statement mapping each species to a specific hue.

Mar 28, 2022

Loading thumbnail…

ICE 7- Line Graph

This line graph visualizes mobile sales trends from 2010 to 2020, plotting yearly sales figures on a time-based x-axis and a linear y-axis. The chart uses D3 v5 with SVG rendering, employing `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and a `line` generator to draw the path. Data is loaded from a CSV via `csv()` and parsed with `d3.timeParse`, while grid lines and axis labels are styled through CSS classes.

Mar 28, 2022

Loading thumbnail…

Fork of Smiley Face Part I

A smiley face rendered in SVG shows a black circle head with two white eyes and a white mouth arc, drawn with React and D3. The code uses D3’s `arc()` function to generate the mouth path, with explicit angles defining a half-circle shape, while the eyes are simple circles positioned via SVG coordinates. The visualization is purely static, demonstrating basic geometric composition and D3 shape generation within a React component. The rendering uses hardcoded dimensions and offsets, with no data loading or interactivity.

Feb 20, 2022