Priyanka7002

@Priyanka7002·11 public vizzes

ICE8 - Social Network Graph

This interactive network graph visualizes social connections among nine individuals, with undirected links representing friendship and each node labeled with a person's name. The graph uses a physics-based layout via D3's `forceSimulation`, incorporating link, many-body charge, collision, and center forces to position nodes. Users can drag nodes to rearrange the network, with hover highlighting indicating the selected node. The data comes from a JSON file, rendered as SVG circles and lines.

Apr 4, 2022

Loading thumbnail…

ICE 8 - Country Map

This example displays a map of the United States rendered as purple state outlines on a black background using a geographic projection. The code loads US state boundaries from a TopoJSON file via D3 v4 and topojson-client, then draws them as SVG paths with `d3.geoPath` and a `geoAlbersUsa` projection. State shapes are filled purple with thin gray strokes, positioned within an SVG container sized relative to fixed margins.

Apr 4, 2022

Loading thumbnail…

ICE 8 - Family Tree

This example shows the Ambani family tree as a static hierarchical diagram. It uses D3 v5’s `d3.stratify` to convert flat child-parent data into a tree structure, which is then laid out with `d3.tree`. Nodes are rendered as SVG circles whose fill color varies with depth, and curved links are drawn with cubic Bézier paths. Text labels display each member’s name. The visualization is styled with maroon and pink colors on a dark background.

Apr 4, 2022

Loading thumbnail…

ICE 8 - World Map

This example displays a world map rendered as purple countries against a black background using a Mercator projection. The visualization loads geographic data from the world-atlas TopoJSON file, converts it to GeoJSON with topojson-client, and draws the map using D3’s d3.geoPath. The SVG output is styled with CSS for centered placement and black backgrounds, demonstrating a straightforward approach to geographic data visualization in a React context.

Apr 4, 2022

Loading thumbnail…

Fork of Fork of ICE8 - Social Network Graph

A social network graph shows seven people as red circles connected by directed, arrowed lines representing "Friend with" relationships. The layout is computed dynamically using `d3.forceSimulation` with link, charge, collision, and center forces. Nodes are draggable, and hovering thickens a node's border via CSS class changes. The SVG rendering uses data from a local `data.json` file, with node labels displayed directly on the circles.

Apr 3, 2022

Loading thumbnail…

Fork of Fork of ICE8 - Social Network Graph

This example visualizes a social network as a force-directed graph, with red circular nodes representing individuals and black lines indicating connections such as “family with” or “friend with” relationships. The graph uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position nodes dynamically. Dragging is enabled via `d3.drag`, and hovering highlights nodes using a CSS class. Data is loaded from a JSON file, and the graph is rendered as SVG elements (`<circle>`, `<line>`, `<text>`), with marker arrows defined in `<defs>`.

Apr 3, 2022

Loading thumbnail…

Fork of Fork of ICE 8 - Family Tree

This example shows a family tree as a set of interconnected nodes and links, with each person labeled and colored by their depth in the hierarchy. It uses `d3.stratify()` to convert a flat list of parent-child pairs into a tree structure, then `d3.tree()` to compute the layout. The SVG rendering draws circles for nodes, cubic Bézier paths for links, and text labels. Colors vary by depth, with maroon for depth 2, black for depth 1, and purple for the root, using d3.v5 within a React framework.

Apr 3, 2022

Loading thumbnail…

ICE - 7 Pie Chart

This example visualizes smartphone sales in millions from 2012 to 2021 as a pie chart, with each slice representing a year's sales. The chart uses d3.pie to compute the arc angles and d3.arc to generate the SVG path segments, with d3.scaleOrdinal assigning a fixed color palette to each slice. Slices display their numerical sales values, while a side legend pairs each year with a colored rectangle and its corresponding sales figure. Data is loaded as CSV from a GitHub gist using d3.csv, and the SVG canvas is centered with a heading above the chart.

Mar 28, 2022

Loading thumbnail…

ice - 7

This animated scatter plot cycles through different x-axis variables from the Iris dataset, changing every two seconds to compare sepal and petal measurements. The visualization uses D3’s scaleLinear, axisBottom, and axisLeft APIs to render axes and circles colored by species, with the x-axis switching between petal_width, sepal_width, petal_length, and sepal_length. Rendering uses SVG animations driven by setInterval, and the dataset is loaded via d3.csv from a GitHub repository.

Mar 28, 2022

Loading thumbnail…

ICE 7 Area Chart

The ICE 7 Area Chart displays smartphone sales in millions from 2012 to 2021, using a smooth curve to highlight the upward sales trend over time. The chart renders as an SVG with a red area beneath a black line, generated via D3 v5’s `area()` and `line()` generators with `curveBasis` smoothing. It uses `d3.csv` to load data from a GitHub gist, and scales are defined with `scaleLinear`, while axes are drawn using `axisLeft` and `axisBottom`. The visualization includes clear axis labels and a title, making the sales progression immediately apparent.

Mar 28, 2022

Loading thumbnail…

ICE 7 Line Chart

This line chart shows smartphone sales in millions from 2012 to 2021, with year on the x-axis and sales on the y-axis. It uses React and D3 v5, loading data from a GitHub-hosted CSV via d3.csv. The SVG rendering uses d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.line to draw the path, with grid lines and axis labels styled via CSS.

Mar 28, 2022