ArruSkywalker

@ArruSkywalker·18 public vizzes

Fork of Social Network Graph --> ICE-8

A social network graph displays 10 people as cyan circles connected by directed black lines, with each person's name labeled in red text. The visualization uses d3.forceSimulation with link, charge, collision, and center forces to position nodes, while d3.forceLink establishes connections from data.json. Dragging nodes interactively via d3.drag repositions them during simulation. Hovering highlights a node with a black stroke. The SVG renders all elements dynamically as the simulation updates on each tick.

Jul 9, 2022

Loading thumbnail…

Family Tree -> ICE-8

This family tree visualization maps multiple generations of a family, using colored circles to represent individuals and animated lime-green lines to show parent-child connections. The data is structured as a list of child-parent pairs, which is processed through the D3 `stratify()` utility to build the hierarchical tree structure, and then laid out using `d3.tree()`. Each node is rendered as an SVG circle with a color assigned by depth—red for the root, cyan, pink, and green for subsequent generations—and includes the individual's name as text. The visualization uses D3's `.transition().duration()` method to animate both the drawing of the links and the appearance of the circles.

Jul 9, 2022

Loading thumbnail…

Fork of Family Tree -> ICE-8

This fork of a family tree visualization by ArruSkywalker uses D3 v6 and SVG animation to show hierarchical relationships among family members. The tree layout is generated programmatically from a hardcoded data array using `d3.stratify()`, which builds the tree structure, and `d3.tree()` with a size of [950, 300] to position nodes. Circles represent individuals, with colors assigned by generation depth via the `setGeneration()` function, and family connection paths animate from parent to child using `transition().duration(200)`. Text labels display each person’s name. The visualization demonstrates how D3’s stratify utility simplifies constructing a tree directly from link data, enhanced with CSS styling such as a blue background and black-stroked nodes.

Jul 9, 2022

Loading thumbnail…

Country Map - India

This interactive map of India displays country boundaries as red SVG paths, with clickable regions that zoom into state levels and then to district subdivisions. The visualization uses d3.geoMercator and d3.geoPath to project TopoJSON data, while d3.zoom enables smooth transitions between administrative levels. Built with React and D3 v6, it dynamically fetches state and district boundaries from a remote TopoJSON source, allowing users to drill down through geographic hierarchies with animated camera movements.

Jul 9, 2022

Loading thumbnail…

World Map - ICE-8

This example displays a world map rendered as an SVG using the Natural Earth projection, with each country drawn as a blue-stroked path on a green background. It retrieves GeoJSON data from the world-atlas TopoJSON dataset and converts it using the `feature` method from the topojson library. The code applies `d3.geoPath` with a `geoNaturalEarth1` projection to generate the country outlines, and uses React to structure the visualization.

Jul 9, 2022

Loading thumbnail…

Untitled

Animated bar chart built with D3.js v2 and jQuery that visualizes category-based data through vertically scaled rectangles. The SVG renderer applies a drop-shadow filter via `feGaussianBlur` and `feOffset`, while `d3.svg.axis` generates tick labels from a caption mapper. Bars are positioned using an ordinal x-scale with `rangeRoundBands` and a linear y-scale, with mouse-triggered interactions suggested by the attached animation.

Jul 9, 2022

Loading thumbnail…

Fork of Bitcoin - Area Chart ICE-7

This area chart visualizes Bitcoin exchange rates over a week, with time on the x-axis and rate on the y-axis, using a smooth curveBasis path to connect data points from a CSV file. The SVG rendering uses d3.scaleTime, d3.scaleLinear, d3.axisLeft, and d3.axisBottom to build scales and axes, while d3.area generates the filled region beneath the line. The chart includes grid lines, axis labels, and a title, all styled with CSS.

Jul 2, 2022

Loading thumbnail…

Fork of Bitcoin - Line Chart ICE-7

This line chart visualizes Bitcoin rates over a week, with timestamp on the x-axis and rate on the y-axis. The SVG rendering uses d3.scaleTime and d3.scaleLinear to map data, while d3.line with curveBasis generates the smooth maroon path. Axis ticks and labels are added via d3.axisBottom and d3.axisLeft, with grid lines created through tickSize. The data is loaded from a CSV file using d3.csv.

Jul 2, 2022

Loading thumbnail…

Fork of ICE - 7 Pie chart viz

This pie chart visualizes the percentage distribution of COVID-19 cases among the top five countries, with each slice labeled and a corresponding legend. Built with D3 v5, the example uses the `pie` layout function to compute arc segments and the `arc` generator to create the SVG paths. Data is loaded from a CSV file via the `csv` method in `getData.js` and `index.js`, with each country's percentage represented by a distinct color from a manual palette. The chart includes an interactive legend that pairs colored rectangles with country names and values.

Jul 2, 2022

Loading thumbnail…

Fork of ICE7 - Reusable Scatter Plot

This example presents the classic Iris dataset in an animated, reusable scatter plot built with D3 v6. It cycles through different sepal and petal measurements on the x-axis, with points colored by species (setosa, versicolor, and virginica) and a custom legend. The visualization uses `d3.csv` for data loading, `scaleLinear` and `extent` for axes, and a `setInterval` with the `scatterPlot` function to update the chart. Custom shapes are drawn as SVG circles with animations.

Jul 2, 2022

Loading thumbnail…

Fork of ICE7 - Reusable Scatter Plot

This animated scatter plot visualizes the Iris dataset, cycling through four different measurements on the x-axis while the y-axis displays sepal length. Data points are colored by species (setosa, versicolor, virginica), with a legend and axis labels. Built with D3 v6, it uses `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` from the `d3` module within a reusable `scatterPlot` function, updating points and axes via a `setInterval` timer.

Jul 2, 2022

Loading thumbnail…

ICE-6 Scatter Plot Graph

This scatter plot visualizes the Iris dataset, mapping petal length and width to positions while encoding sepal dimensions through the circles’ cx and cy attributes, which are incorrectly set to raw sepal values rather than scaled coordinates. Each of the three species appears as a distinct color: yellow for setosa, blue for versicolor, and red for virginica. Built with D3 v6, it uses `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data, set scales, and render SVG circles and axes. The code relies on an external CSV source and sets a fixed radius of 5 pixels for all points.

Jun 25, 2022

Loading thumbnail…

Welcome to - ICE-6 - Bar chart

This bar chart displays the top 10 highest-earning athletes in the world, with values in millions of dollars, based on a CSV file loaded from a GitHub gist. The visualization uses React with D3 v5, specifically leveraging `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and SVG `rect` elements for the bars. The chart customizes axes through manually drawn tick lines and text labels, with red gridlines and blue tick labels styled via CSS.

Jun 25, 2022

Loading thumbnail…

Fork of Fork of Fork of Fork of ICE-6: Rendering Marks and Channels with React & D3

This example shows a horizontal bar chart of the top 10 countries by population in 2019, with the title “highest population.” It uses React for component rendering and d3.scaleBand and d3.scaleLinear to map country names and population values to SVG rectangles. The data is loaded via d3.csv from a GitHub gist, and the chart includes a blue x-axis grid with tick labels and y-axis country labels, all rendered as SVG elements.

Jun 25, 2022

Loading thumbnail…

Fork of Fork of ICE-5: Loading and Parsing CSV Data with D3.js

This example demonstrates how to load and parse a CSV file using D3.js, displaying summary statistics about the dataset. The page fetches movie data from a GitHub gist URL via `d3.csv`, then computes the file size in kilobytes using `d3.csvFormat`, counts the number of rows, and lists the column names. The results are shown as text inside a styled HTML paragraph element. The visualization also includes a decorative SVG graphic with geometric shapes and a star, rendered with plain SVG markup, while the overall layout uses basic CSS for styling.

Jun 22, 2022

Loading thumbnail…

Fork of ICE-5: Loading and Parsing CSV Data with D3.js

This example demonstrates loading and parsing a CSV dataset with D3.js, displaying the file size, row count, and column count in a styled HTML container. The code fetches the CSV from a remote GitHub gist using `d3.csv`, then formats the raw data with `d3.csvFormat` to calculate its size in kilobytes. The page uses a minimal HTML structure with inline CSS and D3 v7, rendering the result as text in a `<pre>` element. The accompanying static SVG file provides a decorative background graphic, though the core interaction is purely data loading and summary display.

Jun 22, 2022

Loading thumbnail…

ICE-5: Loading and Parsing CSV Data with D3.js

This example demonstrates loading a CSV file from a remote URL using D3.js version 7.3.0. It displays a summary message showing the approximate data size in kilobytes, the number of rows, and the number of columns in the dataset. The code calls `d3.csv()` to fetch and parse the CSV asynchronously, then uses `d3.csvFormat()` to compute the data's string length. The resulting summary is rendered in a red-styled `pre` element with a green header, providing a minimal check of the data loading pipeline.

Jun 22, 2022

Loading thumbnail…

Fork of Let's make a face with D3.js

This example renders a cartoon face built from SVG shapes, including a pink circle for the head, two eyes, rectangular eyebrows, and a mouth created with a d3.arc path. The eyebrows animate upward and back down over four seconds using chained d3.transition calls with a two-second duration each. The code uses D3 v5 selection methods like `select`, `append`, and `attr`, with layout driven by hardcoded values for spacing and radius, and all shapes are centered within a 960 by 500 SVG using a group translation.

Jun 19, 2022