RajeevMukhesh

@RajeevMukhesh·14 public vizzes

ICE - 8: Social Network Graph

A social network graph built with D3.js v6 displays seven people as large cyan circles connected by directed, arrow-tipped lines labeled with each friendship. The nodes are positioned using a force-directed simulation (`d3.forceSimulation`) with link, charge, collision, and center forces. Users can drag nodes to rearrange the layout, while hovering highlights a node with a red border. Data comes from a JSON file containing node and link objects, rendered as SVG elements.

Jul 9, 2022

Loading thumbnail…

ICE - 8: Visualizing Tree

This visualization shows a hierarchical tree of car company ownership, with nodes representing brands like General Motors, Volkswagen, and BMW Group, and links connecting parent companies to their subsidiaries. The tree is rendered as an interactive SVG diagram using D3.js version 3.5, with a diagonal path generator for the orange links and circles for the nodes. The layout is computed using `d3.layout.tree()`, and the data is embedded directly in the page as a JavaScript array. The animation duration is set to 750 milliseconds, though the interaction behavior is not demonstrated in the static code shown.

Jul 9, 2022

Loading thumbnail…

ICE - 8: Country Map

This interactive map of India displays state and district boundaries, letting users click a region to zoom in and drill down to its subdivisions. Built with React and D3 v6, it uses the `geoMercator` projection and `geoPath` for rendering GeoJSON features as SVG paths. Clicking triggers a `zoomToBoundingBox` function that calculates path bounds via `pathGenerator.bounds` and animates a zoom transition with `d3.zoom`. State boundaries come from a TopoJSON file converted through the `topojson` feature API.

Jul 9, 2022

Loading thumbnail…

ICE - 8: World Map

This example displays a world map composed of green countries with white borders on a blue background. It uses D3 v5 and topojson to fetch and convert GeoJSON data from the world-atlas CDN, then projects it with d3.geoNaturalEarth1 and renders it as SVG paths via d3.geoPath. The code selects an SVG element and appends each country feature as a path.

Jul 9, 2022

Loading thumbnail…

BONUS ICE - 1: 3D Scatter Plot

This 3D scatter plot visualizes real estate prices as a function of house age and the number of nearby convenience stores. The Plotly `scatter3d` trace renders each property as a pink marker, with axes labeled for the three variables, all positioned within a minimal margin layout. The visualization loads CSV data from a GitHub Gist via D3's `d3.csv` parsing, then arrays of values are extracted and fed into the `Plotly.newPlot` API to generate the interactive chart.

Jul 7, 2022

Loading thumbnail…

Bonus ICE - 1: 3D Bar chart

This 3D bar chart visualizes US death rates by cause from 2011 to 2017, showing trends for accidents, cancer, heart disease, stroke, and influenza/pneumonia. The chart uses the Highcharts JavaScript library with its 3D extension to render the data as stacked columns with depth. The chart is configured with rotation angles (alpha 25, beta 40) and a view distance to create the three-dimensional perspective, while the x-axis lists years, the y-axis measures death rate, and the z-axis labels the causes of death. Data is provided directly in the JavaScript code as arrays of [year, rate] pairs.

Jul 7, 2022

Loading thumbnail…

ICE - 7 Area Chart

This area chart displays Apple stock prices from 2019 to 2020, with date on the x-axis and price on the y-axis. The chart uses a filled blue area created with d3.area and curveBasis to smooth the line. Axes are rendered using d3.axisBottom and d3.axisLeft with gridlines, and scales are set via d3.scaleTime and d3.scaleLinear. Data is loaded from a CSV file containing daily closing prices, which are parsed and formatted as Date and numeric values before rendering in SVG.

Jul 3, 2022

Loading thumbnail…

ICE - 7 Line Chart

This chart displays the daily closing price of Apple stock over time, with date on the x-axis and price on the y-axis. It uses a smooth curved line to connect data points, generated with d3.line and the curveBasis interpolation. The axes are rendered via d3.axisBottom and d3.axisLeft, with scales from d3.scaleTime and d3.scaleLinear. Data is loaded as CSV from a GitHub gist, and the visualization is drawn as SVG elements within a 960×500 viewport.

Jul 3, 2022

Loading thumbnail…

ICE - 7 Pie chart

This example visualizes the top 10 countries by COVID-19 cases as a pie chart, with each slice labeled with its percentage share. The chart is rendered as an SVG element using D3 version 5, with data fetched from a CSV file hosted on GitHub. The code employs D3’s `pie`, `arc`, and `scaleOrdinal` APIs to compute the pie segments, generate paths, and assign colors from a hardcoded palette. A legend on the right maps each country’s name to its corresponding slice and percentage value.

Jul 3, 2022

Loading thumbnail…

ICE 7 - Reusable Scatter Plot

This interactive scatter plot uses the classic Iris Dataset to visualize the relationships between sepal and petal measurements. Built with D3 version 6 on an SVG canvas, it cycles through four different x-axis variables—petal width, sepal width, petal length, and sepal length—while keeping sepal length on the y-axis. Data points are color-coded by iris species (setosa, versicolor, virginica) using the `scatterPlot` reusable chart component, which relies on D3's `scaleLinear`, `axisLeft`, and `axisBottom` APIs. The `setInterval` drives the automated rotation through the variables, with an animated legend updating alongside.

Jul 3, 2022

Loading thumbnail…

ICE-6 Scatter Plot Graph

This visualization uses the Iris Dataset to plot petal length against petal width as circles, with each of the three species—setosa, versicolor, and virginica—colored yellow, blue, and orange respectively. Built with D3 v6, it loads data via `d3.csv`, scales the axes using `scaleLinear` and `extent`, and renders SVG circles with an SVG container sized to the window. The chart also includes axes generated with `axisLeft` and `axisBottom`, along with custom axis labels.

Jun 26, 2022

Loading thumbnail…

ICE - 6: Rendering Marks and Channels

This example displays a horizontal bar chart of the top 10 most paid celebrities in 2020, with earnings in USD millions. The chart uses React with D3.js version 5, rendering SVG rectangles for bars and manually drawn axes with gridlines via `scaleBand` and `scaleLinear`. Data is loaded asynchronously from a CSV file using `d3.csv`, and the visualization includes custom tick labels and red vertical gridlines. The code initializes React state with `useState` and `useEffect` to fetch and process the dataset, demonstrating a clean composition of React components with D3 scales and marks.

Jun 26, 2022

Loading thumbnail…

ICE - 5

This example demonstrates loading and parsing a CSV dataset with D3.js, displaying summary statistics about the Rotten Tomatoes movies data in a styled HTML page. The visualization pairs the parsed data statistics with a decorative SVG illustration rendered as a static image. Using the `d3.csv` method, the code fetches the remote CSV file, calculates the data size in kilobytes, and counts the number of rows and columns, updating the display in a `<pre>` element. The page also incorporates embedded CSS styling and an external SVG image asset.

Jun 23, 2022

Loading thumbnail…

Face

A stylized face composed of SVG shapes is centered on a canvas, with a sky-blue circular head outlined in black. The face features two dark eyes with white highlights, eyebrows drawn as arcs, and a curved mouth, all constructed using D3's `arc()` generator. Built with React and D3 v6, the code uses `ReactDOM.render` to render the SVG elements, employing `ellipse`, `circle`, and `path` components with explicit coordinates and stroke widths.

Jun 19, 2022