T

Tharun2022

@Tharun2022·27 public vizzes

Loading thumbnail…

3D SCATTER PLOT FOR IPHONE AND ITS CASE

This 3D scatter plot displays measurements from a penguin dataset, plotting iPhone length and width against case length and width as two separate traces. The visualization uses Plotly's `scatter3d` type to render markers in three-dimensional space, with one trace showing case length and another showing case width. Data is loaded asynchronously from a CSV file using D3.js's `csv` function, and the chart is generated with `Plotly.newPlot` inside a designated div. The code relies on Plotly 2.9.0 and D3 3.5.17.

Loading thumbnail…

Fork of 3D Scatter Plot with Iris Dataset

This example visualizes the Iris dataset using two 3D scatter plots in a single chart. One trace maps bill length, bill depth, and flipper length, while the other compares bill length, bill depth, and body mass. The code loads CSV data via `d3.csv` and renders the interactive 3D scenes with Plotly’s `scatter3d` type and `Plotly.newPlot` API. Marker styling includes size, opacity, and line properties.

Loading thumbnail…

IC6 Iris Dataset Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis against sepal length on the y-axis, with points colored by species (setosa in blue, versicolor in red, and virginica in black). The visualization uses D3.js v6, loading data via `d3.csv` and scales with `scaleLinear`, `extent`, and `axisBottom`/`axisLeft`. The SVG rendering includes circles with fixed radius, axis labels, and margin-based layout. The code explicitly parses numeric fields and retrieves data from a GitHub gist, showing a straightforward scatter plot with categorical color encoding.

Loading thumbnail…

Data Visuliazation ICE-6

This bar chart displays the total runs scored by the top 10 cricketers from a CSV dataset, with each player’s name labeled on the y-axis and run counts plotted along the x-axis. The visualization uses React for component rendering and d3.csv to load and parse the data, while d3.scaleBand and d3.scaleLinear handle the categorical and quantitative scaling. Axis ticks and gridlines are generated via xScale.ticks(), and the chart is styled with a light blue fill and black text.

Loading thumbnail…

Untitled

A scatter plot displays the relationship between ground living area in square feet and sale price for individual properties. Each black circle represents a home, with position encoding both variables along linear axes. The visualization uses D3 v4’s `scaleLinear`, `axisBottom`, and `axisLeft` to render the chart in SVG within a React framework. Data loads from an external CSV file via `d3.csv`, plotting 1.5-pixel-radius circles without additional encoding.

Loading thumbnail…

Untitled

This example shows a donut chart of population data by age group, with a legend positioned to the right of the chart. The visualization uses D3 v3’s `d3.svg.arc` and `d3.layout.pie` to compute the arc paths, while a custom `d3.legend` function (defined in `d3.legend.js`) generates the legend from `data-legend` attributes attached to each arc path. Each slice is filled with a categorical color from an ordinal scale (`d3.scale.ordinal`), and the legend displays matching colors and age labels. Data is loaded from a CSV file.

Loading thumbnail…

Untitled

This example demonstrates a minimal D3.js setup that loads a message from a local ES6 module and displays it as large, centered text. The code imports the `select` function from D3 and a `message` string from `myMessage.js`, then uses `select('#message').text(message)` to update the DOM. Styling is applied via CSS with a 12em font size and center alignment. The example relies on D3 v4 loaded from a CDN and shows how to combine external libraries with modular JavaScript for simple visual output.

Loading thumbnail…

ICE - 7 Pie

This example shows the top 10 cricketers by career runs in a pie chart, with each slice labeled with the run count in thousands and accompanied by a legend listing player names and values. The visualization uses D3 v5 within a React framework, fetching data from a CSV via `d3.csv` and rendering SVG paths with `d3.pie`, `d3.arc`, and a `scaleOrdinal` color scale. Text labels are positioned using arc centroids, and the legend is built manually with appended rectangles and text elements.

Loading thumbnail…

ICE - 7 Pie

This visualization displays the top 10 cricketers' career runs as a pie chart, with each slice labeled with the run total in thousands and accompanied by a legend listing player names and values. The chart uses D3 v5’s `pie`, `arc`, and `scaleOrdinal` functions to generate SVG paths and text, with data fetched from a CSV via `d3.csv`. Colors are assigned manually, and the chart is rendered in a React-free HTML page using D3’s selection and enter/append pattern.

Loading thumbnail…

Untitled

This example presents a static SVG pie chart inside a centered HTML layout, rendering data slices with D3.js version 5.7.0. The chart uses the `d3.pie` API to compute arc paths, which are then drawn as SVG `path` elements within a 960×500 viewport. The visualization is styled via an external `pie.css` stylesheet, while the JavaScript logic resides in a bundled `pie_bundle.js` file. The chart displays categorical proportions directly, with no interactivity or animation, relying solely on D3’s arc generation and SVG rendering.

Loading thumbnail…

Family Tree

This example presents an interactive family tree visualization showing hierarchical relationships among named individuals. The tree layout uses D3’s `d3.layout.tree` with SVG rendering and animated transitions. Nodes are color-coded by type and include click-to-expand/collapse behavior, with tooltips and zoom/drag navigation via `d3.behavior.zoom`. The tree structure comes from external JSON data loaded with `d3.json`, and the visualization is built within a React wrapper using D3 v3 and jQuery.

Loading thumbnail…

ICE8 USA Map

This example renders a choropleth-style map of the United States using the Albers equal-area conic projection via `d3.geoAlbers` and `d3.geoPath`. It displays landmasses filled in black, state interiors outlined in red, and a cyan sphere background, relying on the `d3-geo` and `topojson` libraries to load and process US Atlas data from a CDN. The visualization is built with React, using SVG for rendering, and includes a graticule layer (blue) that is defined but not rendered in the final output.

Loading thumbnail…

World Map IC8

This example displays a world map using a natural Earth projection, rendering countries as black filled paths with maroon strokes against a cyan sphere. The visualization loads geographic data from a JSON file hosted on GitHub, processing it with `d3.json`, `topojson.feature`, and `d3.geoPath`. The SVG output is generated through React, utilizing D3 v5’s `geoNaturalEarth1` projection and a predefined path generator to draw the globe and its country boundaries.

Loading thumbnail…

Social Network Graph ICE-8

This example shows a social network graph with nodes representing people and links indicating friendships. The visualization uses a force-directed layout powered by `d3.forceSimulation`, with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCollide` to arrange nodes and edges. SVG circles and text labels render the nodes, while lines with arrow markers depict relationships. The graph is interactive, allowing nodes to be dragged via `d3.drag`, and nodes highlight on hover. Data is loaded from a local `data.json` file, and the code uses D3 v6 within a React framework.

Loading thumbnail…

ICE - 7 Area Chart for Car Sales

A smooth area chart tracks Canadian car sales over time, emphasizing the overall trend with a filled curve beneath a distinct line. The visualization uses React with D3 v5, drawing SVG elements via the `area` and `line` generators with `curveBasis` for smoothing. Data is parsed from a CSV using `d3.csv` and `d3.timeParse`, with time and linear scales (`scaleTime`, `scaleLinear`) mapping years to sales values. Axis labels and gridlines are added through `axisBottom` and `axisLeft`, while the black fill and stroke highlight the data's shape.

Loading thumbnail…

Fork of Line Chart

This example visualizes annual sales data as a red line chart, with a time-scaled x-axis for years and a linear y-axis for sales values. It uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generators to render an SVG inside a React project, reading CSV data from a GitHub gist. The chart includes labeled axes, gridlines via tick sizing, and a rotated y-axis label, with styling defined in an external CSS file.

Loading thumbnail…

ICE-6:

This example presents a bar chart of the top 10 most populous countries, sourced from a CSV file of 2019 population estimates, and rendered as an SVG within a React application. It uses React state and effects to load the data via `d3.csv`, then constructs the chart using `d3.scaleBand` and `d3.scaleLinear` to encode countries and populations. The visualization includes axis ticks generated manually with `xScale.ticks()`, labels, and gridlines, all drawn within a single SVG group.

Loading thumbnail…

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

This example visualizes the top 10 most populous countries in 2019 as a horizontal bar chart, with the length of each bar encoding population size. The code uses React with hooks for state management and D3 v5 for data loading via `csv`, along with `scaleBand` for y-axis positioning and `scaleLinear` for x-axis scaling. SVG rendering is used to draw the bars, tick lines, and labels, with the data loaded from a gist URL and displayed in a simple, unanimated layout.

Loading thumbnail…

Fork of Fork of Iris Dataset Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length and width to the x and y axes while coloring each point by species (setosa, versicolor, or virginica). The SVG is rendered using D3 v6, with scales created via `d3.scaleLinear`, axes via `d3.axisLeft` and `d3.axisBottom`, and data loaded asynchronously from a CSV URL using `d3.csv`. The visualization fills the entire browser window and uses D3's `.join()` operator to create the circle marks.

Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This fork of the Iris dataset scatter plot visualizes petal length and width measurements for three iris species, with points colored blue, red, or black by species. The code loads data via `d3.csv`, uses `d3.scaleLinear` and `d3.extent` for axes, and renders circles with `d3.axisLeft` and `d3.axisBottom`. Although it applies `rx` and `ry` attributes, they do not affect circular circles, which are sized with a fixed radius. The SVG fills the viewport, and tick labels are enlarged via CSS.

Loading thumbnail…

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

This visualization displays a horizontal bar chart of the top 10 most populous countries in 2019, using React and D3 v5 to render SVG marks and channels. The code loads CSV data via `d3.csv`, scales the population values with `scaleLinear` and countries with `scaleBand`, and manually creates axes and gridlines. Each bar’s length encodes population, with tick labels generated from the scales. The chart uses React state and hooks to manage the asynchronous data loading.

Loading thumbnail…

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

This example visualizes the top 10 most populous countries in 2019 using a horizontal bar chart rendered with SVG. The chart encodes population counts through bar lengths on a linear scale, while country names are positioned on a band scale. The application is built with React and D3 v5, using React hooks like `useState` and `useEffect` to load and manage data. D3's `csv`, `scaleBand`, `scaleLinear`, and `max` utilities handle parsing and scaling. Data is fetched from a GitHub Gist containing the 2019 population estimates.

Loading thumbnail…

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

This example presents a horizontal bar chart ranking the top 10 most populous countries in 2019, loaded from a CSV file using d3.csv. The React component renders SVG marks (rectangles) whose widths and positions are scaled by d3.scaleLinear and d3.scaleBand, with custom tick labels and gridlines drawn manually. The code uses React hooks like useState and useEffect to manage asynchronous data loading, and d3.scaleLinear, d3.scaleBand, d3.max, and d3.format for scales and formatting.

Loading thumbnail…

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

This example visualizes the top 10 most populous countries in 2019 using a horizontal bar chart rendered with React and D3. It encodes population counts through bar lengths on a linear scale, with country names positioned along a band scale. The code loads CSV data via `d3.csv`, then uses React hooks like `useState` and `useEffect` to manage the data lifecycle. SVG marks are generated manually using React elements, while D3 utilities such as `scaleBand`, `scaleLinear`, and `max` handle scaling and domain calculations.

Loading thumbnail…

Data Visualization ICE5

This example displays a bar chart of the Titanic disaster dataset, with bars colored by survival status and gender, using D3.js v7 for data binding and SVG rendering. It shows the number of passengers per class and sex, with an interactive tooltip revealing exact values on hover. The page also includes a message container that reports the CSV file size, row count, and column count, demonstrating basic data loading and inspection. The code loads data from a GitHub-hosted CSV and uses `d3.csv` and `d3.select` for chart construction.

Loading thumbnail…

Data Visualization ICE5

This example presents a dashboard of static vector illustrations—a house and a human figure—rendered as inline SVG paths. The page also reports basic statistics about a cricket dataset loaded from a GitHub gist, including its size in kilobytes, row count, and column count. The visualization uses the D3.js library to fetch and parse the CSV data with `d3.csv`, while the SVG artwork is embedded directly in the HTML. The interface is built with plain HTML and CSS, and the figure images are referenced as separate SVG files.

Loading thumbnail…

Fork of emoji-like face with mouth (D3)

This example renders a simple emoji-like face using React and D3 within an SVG canvas. It draws a blue circular head, two eyes, and a mouth arc positioned relative to computed center coordinates and offsets. The mouth is generated with the D3 `arc` generator using defined inner and outer radii and angles, while circles are created with SVG elements. The code demonstrates integrating D3 geometry functions with React's declarative JSX syntax.