pavan0828

@pavan0828·20 public vizzes

Sweden map

This visualization displays a map of Sweden’s counties, with each region filled in brown and internal borders highlighted in black. It is built with React and D3 v5, using `d3.geoMercator` projection and `d3.geoPath` to render the TopoJSON data from the World Atlas. The example demonstrates how to load geographic data with `d3.json`, process it via `topojson.feature` and `topojson.mesh`, and apply custom styling through SVG paths.

Jul 10, 2022

Loading thumbnail…

Mexico Map

This example displays an interactive map of Mexico's regions, rendered as SVG paths using the D3.js `geoMercator` projection and `geoPath` function. The map is built with React, loading TopoJSON data from a GitHub gist via the `topojson` library's `feature` function. A graticule overlay uses the `geoGraticule` API, and the regions adopt a gray fill color from the CSS, with hover states that change the stroke to pink.

Jul 10, 2022

Loading thumbnail…

ICE 8

This example presents a choropleth map of India, rendered using the Mercator projection via `d3.geoMercator` and drawn with SVG paths. Each state is filled with a color from `scaleOrdinal(schemeCategory10)`, and hovering over a region turns it brown. The visualization loads TopoJSON data from a GitHub gist, parses it with the `topojson.feature` method, and projects the geometry using `d3.geoPath`. An explicit title element is added per state based on the data’s `interpolateRainbow` property, though no such property exists in the dataset.

Jul 10, 2022

Loading thumbnail…

ICE - 8 Family Tree

The ICE – 8 Family Tree is a static hierarchical visualization of familial relationships, rendered as an SVG tree with red nodes connected by lime-green paths. It displays a branching structure from a root ancestor down through multiple generations, with each person’s name labeled in blue text inside their node. The code uses d3.stratify() to convert flat parent-child data into a tree hierarchy and d3.tree() to compute layout positions. Paths between nodes animate via d3 transitions, while circles representing individuals transition to their final radius, creating a lively reveal of the family structure.

Jul 10, 2022

Loading thumbnail…

Social Network Graph

This social network graph visualizes eight people with links representing friendships, where link thickness indicates relationship strength and all nodes share a uniform yellow fill. The visualization uses a force-directed layout powered by `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCollide` to position nodes dynamically. Rendering occurs via SVG with draggable circle nodes, arrowhead markers on links, and hover styling that highlights the focused node in red. The data is loaded asynchronously from a JSON file containing explicit node and link definitions.

Jul 10, 2022

Loading thumbnail…

ICE8 - World Map

This example renders a static world map using D3.js version 5 and TopoJSON. It displays all countries from the world-atlas dataset as purple SVG paths with black outlines, overlaid on a light blue sphere representing the globe. The visualization uses `d3.geoNaturalEarth1` for projection and `d3.geoPath` to generate the geographic paths, while the TopoJSON `feature` API converts the source data into GeoJSON for rendering.

Jul 10, 2022

Loading thumbnail…

3D Bar Chart

This 3D bar chart visualizes revenue from the top three beauty products across Florida, Texas, Arizona, and Nevada. Built with the AnyChart JavaScript library, it uses three-dimensional bars with a 45-degree z-axis angle and 3D depth perspective to represent the multi-series data. The chart maps four data columns from a static data set to individual series, applies a dollar format to the y-axis labels, and enables animated transitions, tooltips, and hover interactions.

Jul 7, 2022

Loading thumbnail…

BONUS ICE

This 3D scatter plot visualizes truck mileage in relation to height and weight. It reads data from a CSV file containing values for Height (feet), Weight (tons), and Mileage (mpg), rendering each data point as a black circle. The chart is created with Plotly’s `scatter3d` trace, while D3.js (`d3.csv`) handles the remote data loading. Axis titles are color-coded, and margins and font styles are customized through the layout object passed to `Plotly.newPlot`.

Jul 7, 2022

Loading thumbnail…

Fork of 3D Scatter Plot

This example renders a 3D scatter plot of the Iris dataset, comparing flower measurements across two traces: sepal dimensions against petal length in one trace, and sepal dimensions against petal width in another. The visualization uses Plotly’s `scatter3d` type via `Plotly.newPlot` to draw markers with customizable size, opacity, and line styling into a `div`. Data loading relies on D3’s `d3.csv` to fetch the dataset, while `unpack` extracts specific columns for each axis, presenting the multidimensional relationships in an interactive three-dimensional space.

Jul 7, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, showing relationships between fuel efficiency, horsepower, weight, and country of origin for various car models. A circle mark encodes weight as size, origin as color, and includes tooltips showing car names. The visualization is built using the Vega-Lite API, which registers Vega and Vega-Lite libraries, with D3’s `csv` function loading the remote data file. The code configures axes and styling through a custom config object, and renders the chart as an SVG using the `vega-tooltip` handler.

Jul 3, 2022

Loading thumbnail…

Fork of pie chart

This example displays the top 10 countries by malaria deaths in 1965 as a pie chart, with each segment labeled with the corresponding death count in thousands. It uses D3 v5’s `pie()` generator, `arc()` for segment paths, and `scaleOrdinal` for color assignment. Data is fetched from a CSV via `d3.csv`, and the chart is rendered as SVG. A legend to the right lists each country with a color swatch and its death total, formatted using `d3.format`.

Jul 3, 2022

Loading thumbnail…

Fork of Line Chart- Data Visualization

This fork of a line chart visualizes Walmart’s stock price over time, with the x-axis mapping years and the y-axis mapping price. Using D3 v5, it loads CSV data from a GitHub gist and parses dates with `d3.timeParse`. The SVG render applies `d3.scaleTime` and `d3.scaleLinear` for axes, draws gridlines via tick sizes, and connects data points with a blue `d3.line` path. The chart includes axis labels for "Year" and "Stock Price."

Jul 3, 2022

Loading thumbnail…

Fork of Area_Chart

This area chart displays the annual number of WhatsApp users from 2008 to 2017, with the data loaded from a CSV file via `d3.csv`. The visualization combines a black line, drawn with `d3.line` and `curveBasis`, over a green filled area generated by `d3.area`, both using `d3.scaleLinear` for the axes. The SVG rendering includes styled tick marks and labels, with axis labels positioned via `d3.axisBottom` and `d3.axisLeft`.

Jul 3, 2022

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for vintage cars, with each blue semi-transparent circle representing a vehicle. The chart uses D3 v6’s `scaleLinear`, `axisLeft`, and `axisBottom` to construct the axes, which include grid lines and rotated axis labels. Data is loaded from a remote CSV using `d3.csv`, with numeric fields parsed before rendering. The SVG-based visualization applies a margin convention and positions circles via the `xScale` and `yScale` functions.

Jun 25, 2022

Loading thumbnail…

Bar Chart

This bar chart visualizes global sales by video game genre, ranking categories like Action and Shooter from highest to lowest on a linear scale. Using D3 version 6, the code loads CSV data via `d3.csv` and draws SVG rectangles with `d3.selectAll`. The axes are created with `d3.axisBottom` and `d3.axisLeft` on band and linear scales. Rectangles change fill color from steelblue to orange on mouseover, then transition to red on mouseout with a 250ms duration.

Jun 25, 2022

Loading thumbnail…

Bar Chart

This bar chart ranks the ten most populous countries using 2018 population estimates from the United Nations World Population Prospects. It highlights D3 v5 axis customization, including a formatted horizontal axis (e.g., "1.41B") and removed tick lines on the categorical vertical axis. The visualization is rendered as an SVG using `d3.scaleLinear`, `d3.scaleBand`, `d3.axisBottom`, and `d3.axisLeft`, and labels its axes and title.

Jun 25, 2022

Loading thumbnail…

Fork of ICE-6 Tutorial Bar Chart

This fork of the ICE-6 tutorial displays a horizontal bar chart ranking the top 10 cosmetic products by revenue, with the title and axis label hardcoded in the script. The data is loaded from a CSV file hosted on GitHub, with the revenue column parsed as a number. It uses D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to construct the chart, with custom tick formatting that abbreviates large numbers (e.g., converting billions to "B"). The visualization is rendered as an SVG, with bars styled via CSS.

Jun 25, 2022

Loading thumbnail…

Fork list

A horizontal bar chart displays the popularity of eleven sports in 2021, with purple bars representing match counts on a blue grid. The visualization loads data from a CSV file using `d3.csv` and renders an SVG via React. It employs `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, with `d3.max` determining the domain, while axis ticks are manually generated from the scales.

Jun 25, 2022

Loading thumbnail…

ICE -5

This example demonstrates how to load and parse a CSV dataset using D3 v7 within a React framework, displaying the file size, row count, and column count in a styled HTML `<pre>` element. The page also includes a static SVG illustration featuring geometric shapes and a decorative house scene. The code uses `d3.csv` and `d3.csvFormat` to fetch and measure the data, with the result rendered as text via `textContent`.

Jun 23, 2022

Loading thumbnail…

Fork of Cat smiley

This fork of the Cat smiley example renders a stylized feline face as a static SVG using React and D3 v7. The code defines geometric primitives—circles for the eyes, an ellipses, lines for whiskers, and arc generators for the mouth, eye highlights, and ears—composed within an SVG group centered on the canvas. D3’s `arc()` API constructs the curved mouth and ear paths, while React handles the declarative JSX structure. The visualization demonstrates a purely illustrative use of D3 shape generators rather than data mapping, with colors and stroke widths fixed in the code.

Jun 18, 2022