viswak12

@viswak12·30 public vizzes

Fork of Social Network ICE 8 11580431

This interactive force-directed network diagram visualizes a small social graph with seven named individuals and six weighted connections. Nodes are rendered as silver circles with yellow outlines, labeled with green text, while orange links connect friends. The visualization uses the d3.layout.force API for physics-based layout, enabling nodes to be clicked and dragged. Data comes from an embedded graph JSON file containing node names, group assignments, and edge weights, which influence link stroke thickness via a square-root scale.

Apr 13, 2023

Loading thumbnail…

Fork of Family ICE 8 11580431

This example shows an animated family tree for nine individuals, with orange circular nodes labeled by name and connected by lime-green paths. The visualization uses D3 v6’s `d3.stratify()` to build a hierarchy from flat parent–child data and `d3.tree()` to compute node positions. SVG circles and text are appended and animated via `transition()`, with paths drawing between nodes over one second and nodes expanding over 1.5 seconds on a pink background.

Apr 13, 2023

Loading thumbnail…

Fork of Family Tree

A family tree diagram uses orange circles with purple outlines to represent individuals, connected by animated lime-green paths that draw from parent to child. The example relies on D3 v6's `stratify()` and `tree()` utilities to structure the provided name-list data, and the `transition()` API to animate both the node appearance and link paths over time.

Apr 13, 2023

Loading thumbnail…

Fork of UK(ENG) Regional Map ICE 8 11580431

This example displays a map of UK regions, using orange filled areas with green interior boundaries to highlight regional divisions. The visualization loads TopoJSON data from a GitHub gist via `d3.json` and converts it to GeoJSON features and a mesh using the `topojson` library. The `geoNaturalEarth1` projection and `geoPath` from D3 v7 render the regions as SVG paths, while React 18 manages the component structure and data loading.

Apr 13, 2023

Loading thumbnail…

Fork of Japan Map

This example presents a zoomable choropleth map of Japan’s administrative regions, rendered as SVG paths filled with distinct colors from a categorical scale. Using D3 v5 and d3-geo-projection, it applies a Mercator projection clipped to the viewport, with pan and zoom enabled via d3.zoom. Geographic boundaries come from TopoJSON data (JPN_adm1), processed with topojson.feature and drawn using d3.geoPath. The map highlights each prefecture uniformly, with white strokes separating regions.

Apr 13, 2023

Loading thumbnail…

Fork of World Map ICE 8 11580431

This choropleth map visualizes GDP per capita (PPP, current international dollars) for 2020, with countries colored on a sequential YlGnBu scale. Countries missing data appear in orange. The visualization uses D3’s `geoNaturalEarth1` projection, `geoPath`, and `scaleQuantile` to map the World Bank dataset, which is fetched as a CSV and parsed with `csvParse`. The map renders country outlines, a graticule, and an outline using `geoGraticule`, with data joined to country features via a `Map` keyed by three-letter country codes.

Apr 13, 2023

Loading thumbnail…

BONUS ICE - 1: 3D Scatter Plot

This example visualizes property price based on nearby stores and property age using a 3D scatter plot. The code loads CSV data via d3.csv, then plots three variables—PropertyYears on the x-axis, UnitPrice on the y-axis, and NearbyStores on the z-axis—as orange markers with green outlines using Plotly’s scatter3d trace type. The layout defines axis titles and colors, and the chart renders inside a designated div via Plotly.newPlot. Data comes from a GitHub gist, and the visualization emphasizes relationships among the three numeric dimensions.

Apr 6, 2023

Loading thumbnail…

BONUS ICE SCATTER PLOT

This 3D scatter plot visualizes the relationship between age, height, and weight, using gender to color the markers. The visualization loads CSV data via the `d3.csv` function and renders a single marker trace with Plotly's `scatter3d` type. The code explicitly names the axes as Height, Weight, and Body Fat, with the marker color set to a uniform pink. The chart is generated using Plotly's `newPlot` method, which draws the interactive plot inside a designated HTML division.

Apr 6, 2023

Loading thumbnail…

ICE 3D Bar Chart 11580431

This example uses the D3-x3d bridge to render an interactive 3D bar chart comparing car safety awards across companies for 2020–2022. Data is loaded from a CSV file and parsed into a multi-series format, then displayed through a `barChartMultiSeries()` chart component. The visualization relies on d3.v5 for data processing, the d3-3d library for 3D bar geometry, and X3DOM for WebGL-based rendering within the browser. Axis labels and bar heights scale linearly based on the parsed numeric values.

Apr 6, 2023

Loading thumbnail…

Fork of Bonus ICE - 1: 3D Bar chart

This interactive 3D bar chart visualizes US death rates for five leading causes of death from 2011 to 2017, comparing year-by-year trends for accidents, cancer, heart disease, stroke, and influenza/pneumonia. The chart uses the Highcharts library with the Highcharts 3D extension, enabling a rotated, depth-enhanced column view. Data is presented as stacked, grouped columns arranged along the z-axis by cause, with the x-axis showing years and the y-axis showing death rates. The rendering approach relies on Highcharts' `options3d` configuration and `highcharts-3d.js` to create the three-dimensional perspective.

Apr 6, 2023

Loading thumbnail…

3D Bar Chart with d3.js

This example creates a 3D bar chart using the d3-3d extension in an SVG context, displaying categorical values as extruded cubes. It loads data from a Plotly datasets CSV file, then transforms it using d3.scaleBand for the x-axis, d3.scaleLinear for the y-axis, and d3.scaleOrdinal with a category color scheme. The chart applies rotations via rotateX, rotateY, and rotateZ transforms to orient the 3D scene.

Apr 6, 2023

Loading thumbnail…

Fork of Fork of Bonus ICE Saranya

This example displays a 3D bar chart comparing top car brand sales across three countries—the United States, India, and Germany—using the Highcharts library with its highcharts-3d module. The chart renders columns with depth, stacking, and grouping disabled, and applies rotation angles (alpha: 55, beta: 25) to create a three-dimensional perspective. Data for each series is defined as arrays of coordinate-value pairs, where the first element indicates the category index on the x-axis and the second represents sales in billions of USD. The chart is embedded in a simple HTML page and initialized via jQuery’s `$(function () { ... })` callback, with the container div set to 400 pixels in height.

Apr 5, 2023

Loading thumbnail…

Fork of Bonus ICE - 3D Bar chart

This example presents a 3D column chart comparing crop production across five crops and nine districts in Hyderabad. The chart uses depth, rotation, and stacking to display multiple data series simultaneously, with crop types on the x-axis, production values on the y-axis, and district names on the z-axis. The visualization combines Highcharts’ 3D column chart API, including its `options3d` configuration for alpha, beta, and depth, with D3.js v4 for data handling. Data is hardcoded as arrays of coordinate-value pairs within series objects, each assigned to a distinct stack.

Apr 5, 2023

Loading thumbnail…

Fork of Bonus ICE - 3D Bar chart

This example shows a 3D vertical bar chart comparing download counts for seven popular applications across six app stores, with each store’s data represented as a stacked bar series. The chart uses the Highcharts library with its highcharts-3d module, enabling the options3d configuration for rotation, depth, and perspective. Categories appear on the x-axis, download totals on the y-axis, and store sources on the z-axis. The code loads data via jQuery’s `$` function and renders series for App Store, Playstore, OneStore, Softonic, GalaxyStore, and VivoStore, with grouping disabled to create layered 3D columns.

Apr 5, 2023

Loading thumbnail…

Fork of Area Death's

This chart visualizes the annual "Salary of data Scientist" as an orange-styled area chart, with the x-axis showing Years and the y-axis showing Salary, based on data from the Data Canvas - Sense Your City project. The visualization is built using D3 v5, leveraging `scaleTime` and `scaleLinear` for axes, `area` and `curveBasis` for the smoothed area path, and `axisBottom`/`axisLeft` for tick marks and labels. It renders as an SVG, with the data loaded from a CSV file via `csv()` and the title and axis labels styled via CSS.

Mar 30, 2023

Loading thumbnail…

Fork of Line_Stroke_Death

This fork of the Line_Stroke_Death example visualizes the cost of a car over time, plotting yearly data points connected by a smooth, orange curve. The chart uses D3.js v5 with a linear scale for both the x (Year) and y (Cost) axes, and employs d3.line with a curveBasis interpolator. Axis labels and gridlines are generated via d3.axisBottom and d3.axisLeft. The data is loaded from a CSV file hosted on GitHub Gist, and the final SVG render includes a titled plot with margins.

Mar 30, 2023

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This visualization is an animated scatter plot of the Iris dataset, cycling through four different measurement pairs on the x-axis while the y-axis remains fixed to sepal length. It uses D3 v6 APIs including `csv`, `scaleLinear`, `axisLeft`, and `axisBottom`. The code renders circles and text via SVG and updates the plot every few seconds using `setInterval`. Colors map to iris species, and a custom legend with labeled circles is drawn outside the main plot, alongside axis titles that change depending on the current x-axis variable.

Mar 30, 2023

Loading thumbnail…

Fork of Pie Chart(11480431)

A pie chart displays the premium subscription cost in USD for Netflix across ten countries, with a legend listing each country alongside its corresponding price. The data is loaded from a GitHub gist via `d3.csv` and sorted before rendering. The chart uses `d3.pie` and `d3.arc` to generate SVG paths, with `d3.scaleOrdinal` and `schemeCategory10` assigning colors to each segment. Labels and values are added as SVG text elements within a React-applied framework, all rendered using D3 v5.

Mar 30, 2023

Loading thumbnail…

Fork of Reusable_D3_Scatter_Plot.(11580431)

This interactive scatter plot visualizes the Iris dataset, showing the relationship between petal and sepal measurements across three species. The visualization uses d3.scaleLinear, d3.axisLeft, and d3.axisBottom to render SVG axes and circles, with a setInterval that cycles the x-axis through four measurement columns every few seconds. The code imports data via d3.csv, applies custom color coding for species, and includes a legend with labeled points. A separate scatterPlot function encapsulates the chart's reusable structure.

Mar 30, 2023

Loading thumbnail…

Fork of the Bird Data Set(Penguin)

This visualization displays a scatter plot of penguin data, plotting body mass on the x-axis against flipper length on the y-axis, with each point colored by species (Adelie, Gentoo, or other). The code uses D3 v5’s `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load and parse the data from a GitHub gist, scale the values, and render axes with SVG circles. It also adds axis labels and a title, all rendered into a full-window SVG via React-compatible D3 selections.

Mar 24, 2023

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of ICE-6 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping sepal length on the x-axis and petal width on the y-axis, with points colored by species (blue for setosa, yellow for versicolor, red for virginica). Built with React and D3 v6, it uses `d3.csv` to load data, `d3.scaleLinear` with `d3.extent` for scales, and `d3.axisLeft`/`d3.axisBottom` for axes. Data is rendered as SVG circles via `selectAll().data().join()`, with custom axis labels styled in red.

Mar 24, 2023

Loading thumbnail…

Fork of Fork of Fork of Fork of ICE-6 Scatter Plot

This scatter plot visualizes the Iris dataset, displaying petal length on the x-axis and petal width on the y-axis, with each point colored by species (setosa in blue, versicolor in yellow, and virginica in red). The visualization uses d3.csv to load the data and d3.scaleLinear to map the dimensions, while d3.axisLeft and d3.axisBottom render the axes. Each circle is drawn with an SVG circle element, and its radius is fixed, while the fill color is determined by a marker function. The plot is rendered using d3.v6 within an HTML page, with the chart sized to the browser window.

Mar 23, 2023

Loading thumbnail…

Fork of Fork of Fork of Fork of ICE-6 Bar Graph

This bar chart displays Netflix Premium subscription prices in US dollars across twelve countries. The visualization loads CSV data from a GitHub Gist, sorts it, and renders the top twelve entries as horizontal bars using React for the component structure and D3 v5 for scales, axes, and CSV parsing. The graph uses a band scale for country names on the y-axis and a linear scale for price values on the x-axis, drawing red gridlines and tick labels within an SVG container.

Mar 23, 2023

Loading thumbnail…

Fork of Fork of Fork of ICE-6 Bar Graph

This bar chart displays Netflix Premium subscription prices across twelve countries, using horizontal bars ranked by cost. Built with React and D3 v5, the visualization loads CSV data via `d3.csv` and renders SVG elements. The code manually constructs axes with `scaleBand` and `scaleLinear`, draws gridlines and labels through `.ticks()`, and maps each country to a colored rectangle. Reusable D3 selection functions like `axisLeft` and `axisBottom` are imported but unused beyond the custom tick rendering.

Mar 23, 2023

Loading thumbnail…

Fork of Fork of Fork of ICE-6 Bar Graph

This bar chart displays the cost per month for basic Amazon service across twelve different countries. The visualization is built with React and D3.js (v5), using D3's `csv` function to load data from a remote gist, `scaleBand` for the categorical y-axis, and `scaleLinear` for the numeric x-axis. The SVG rendering shows horizontal bars whose lengths correspond to the costs, with axis ticks and labels generated via D3's scale methods. The chart is drawn within an SVG canvas, with margins and dimensions defined in the code.

Mar 23, 2023

Loading thumbnail…

Fork of Fork of Fork of ICE-6 Bar Graph

This visualization displays the cost of basic Amazon Prime subscriptions across different countries, presenting a horizontal bar chart of the top twelve countries by price. The chart uses React for component management and D3 v5 for data binding, scaling, and layout, with SVG rendering. Data is loaded from a CSV file using D3’s `csv` function, and scales are created with `scaleBand` and `scaleLinear`. Grid lines and axis tick labels are manually generated by iterating over scale ticks, and each country is represented by a colored rectangle. The visualization updates reactively as data loads, initially showing a loading message.

Mar 23, 2023

Loading thumbnail…

ICE 5 11580431

This example displays a summary of a CSV dataset about layoffs in 2020, presenting the file size, row count, and column count in a styled HTML page. It also includes a static image and a link to the raw data file. The page uses D3.js v5’s `d3.csv` to fetch the data from a GitHub Gist URL, then `d3.csvFormat` and `data.length` to compute the displayed statistics. Rendering is handled with SVG and CSS within a React framework, though the visible code is plain HTML/JavaScript.

Mar 9, 2023

Loading thumbnail…

Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

A fork of a fork of a fork of a fork of a Buddha image displays overlapping, colored renderings of the same vector path. The React app uses an SVG `<path>` element containing a detailed Buddha silhouette, transformed and scaled multiple times to create layered compositions. The code defines a fixed SVG canvas and maps over arrays to generate repeated elements, though the primary visual output centers on the drawn path. The background is a solid sky blue, and the rendering relies on SVG's `transform` attribute to position the image. No external data sources or interaction are present; it is a static, purely geometric visualization.

Mar 2, 2023

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

An array of nested ternary loops generates hundreds of overlapping orange, blue, and magenta circles with random positions and radii, forming a chaotic, colorful field above a single, large, translucent Buddha silhouette rendered as an SVG path. The code uses React to construct the SVG container and maps over arrays to produce the circles, while the Buddha path is embedded directly. Static randomness and a black background emphasize the layered, abstract composition.

Mar 2, 2023

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

The visualization displays a dense, abstract pattern of overlapping diamonds scattered across a black canvas, generated from nested loops in JavaScript. Each polygon uses randomly calculated coordinates and fills with semi-transparent RGB colors, creating a chaotic, multi-hued field. Overlaid on this is a large, fixed Buddha silhouette path, rendered with a scale transform to dominate the composition. The code leverages React for DOM management and D3.js v7 for SVG path data, though the primary logic relies on vanilla JavaScript math and the `Math.random()` function for positioning and color generation.

Mar 2, 2023