K

karumanchimanasa

@karumanchimanasa·29 public vizzes

Loading thumbnail…

Fork of Tree Example

This interactive tree diagram visualizes the hierarchical relationships between animal families, genera, and species, with colored nodes representing taxonomic levels. Built with the D3.js library, the layout uses a custom tree layout algorithm and diagonal edges to connect parent and child nodes, with nodes and links animating into place when the visualization loads. The SVG-based rendering uses hardcoded JSON data that includes scientific names and color-coded nodes to distinguish families, genera, and species.

Loading thumbnail…

Fork of Russia Country

This fork of a Russia country map displays the nation's internal subunits as a green SVG choropleth with yellow borders, projected using the Natural Earth topology via `d3.geoNaturalEarth1`. The map renders through `d3.geoPath` and incorporates `d3.zoom` for interactive panning and scaling. It loads topojson subunit data from a remote gist, applying `d3.scaleOrdinal` color categorization. The visualization is styled with custom CSS for background, stroke width, and fill colors, embedded within a static HTML page.

Loading thumbnail…

Fork of Social Network Visualization

This visualization shows a small social network graph with seven named friends connected by blue weighted links and green circular nodes. Each node displays a person’s name in maroon, and the graph is interactive, allowing users to drag nodes around the SVG canvas. The implementation uses D3.js v4’s `d3.layout.force` with gravity, charge, and distance parameters to position nodes, while a separate D3 v2 script is also loaded. Node and link styling are handled via CSS classes, with link thickness determined by the `weight` value from the `network.json` data source.

Loading thumbnail…

Creating world map with the world Topojson data

This example displays a world map using an orthographic projection, rendering each country as a pink SVG path with black borders on a teal background. It loads geographic data from the world-atlas TopoJSON dataset and converts it to GeoJSON with the `feature` function from topojson. The map is drawn using d3.geoPath with the d3.geoOrthographic projection, and all countries are appended as SVG paths using D3’s data join. The visualization uses D3 v5 and topojson v3.

Loading thumbnail…

Fork of Fork of Polished World Map

This fork of a polished world map visualizes global country boundaries using data from the World Atlas TopoJSON, rendered with React and d3. The map displays a natural Earth projection with graticules, landmasses filled in teal, and interior borders highlighted. The code uses `d3.geoPath` with the `geoNaturalEarth1` projection to draw shapes, while topojson's `feature` and `mesh` functions prepare the geographic data. The visualization includes a sphere outline, graticule grid, and styled land and interior paths in SVG, with explicit CSS for colors.

Loading thumbnail…

ICE-7 Fork of Pie Chart

This visualization shows the profit percentages of various companies using a pie chart, with a legend to the right mapping colors to company names and exact values. The chart is built with D3 version 5, rendering as SVG elements on an HTML canvas. It loads company and profit data from a remote CSV file using `d3.csv`, then applies the `d3.pie` layout and `d3.arc` path generator to create the slices. Color encoding is handled by `d3.scaleOrdinal` with a predefined palette. Profit values are formatted using `d3.format` for display in the legend.

Loading thumbnail…

ICE-7 Fork of Area Chart

This example shows CO2 emission values from 1960 to 1973 as a pink area chart overlaid with a black line curve. The visualization loads CSV data from a GitHub gist and uses D3 v5 APIs including `d3.scaleTime`, `d3.scaleLinear`, `d3.area`, `d3.line`, and `d3.curveBasis` to generate smooth paths in SVG. Gridlines are drawn via axes with tick sizes, and axis labels are formatted using `d3.format`.

Loading thumbnail…

ICE-7 Reusable scatter plot with different symbol

This example presents the classic Iris dataset as a scatter plot, mapping petal width to the x-axis and sepal length to the y-axis. It uses different symbols and colors to distinguish the three iris species, making group separation immediately visible. Built with D3.js, the visualization leverages a reusable `scatterPlot` component that accepts configuration for data, scales, margins, and symbol mapping. The code imports specific D3 modules for linear and ordinal scales, axes, and symbol generation, rendering the final result as an SVG. The dataset is loaded from a remote CSV file.

Loading thumbnail…

ICE-7 Fork of Line Chart

This line chart displays CO2 emission values from 1960 to 1973, with the years on the x-axis and emission values on the y-axis. The chart uses a green path generated by the `line()` function, with time-scaled x-values and linear-scaled y-values. It imports from D3 v5, employing `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, `extent`, and `max` to construct the visualization. Data is loaded via `csv()` from a GitHub gist, and the SVG is populated with axes, labels, and a title.

Loading thumbnail…

Fork of Fork of Pie chart-ice-7

This example visualizes the top 10 countries by monthly farming profits using a pie chart created with D3 v5. The code loads CSV data from a GitHub gist, parses the profit values, and renders each country as a colored arc segment with company name labels. It uses d3.pie to generate the angular data, d3.arc for the path geometry, and d3.scaleOrdinal to assign colors. A legend on the right displays each country’s name and formatted profit amount, while all elements are drawn as SVG.

Loading thumbnail…

Fork of selling price of fortuner cars in different years

A pie chart displays the selling price of Fortuner cars across different years, with each slice labeled by year and a legend showing the corresponding profit values in lakhs. The chart uses D3.js v5 to load CSV data from a GitHub gist, compute the pie layout with `d3.pie()`, and render arcs with `d3.arc()`. SVG elements are bound to the data, and colors are assigned via `d3.scaleOrdinal()`. The visualization updates dynamically with a centered title and a custom legend.

Loading thumbnail…

Fork of Fork of ICE - 7 Pie Chart FOR MARkS

A pie chart visualizes company profits from a CSV dataset, encoding each company's profit value as a colored slice with a text label showing the profit amount. The legend lists company names alongside their corresponding colors and profit values. Built with D3 v5 in a React context, the code uses `d3.pie`, `d3.arc`, `d3.scaleOrdinal`, and `d3.csv` to fetch and render the SVG, with pie slices positioned via `arc.centroid` and legend items generated dynamically.

Loading thumbnail…

Fork of Pie Chart

This example shows 2022 US auto sales by brand as a pie chart, with each slice colored and accompanied by legends displaying brand names, percentage of total sales, and sales in thousands. It uses d3.pie and d3.arc to generate the SVG paths, d3.scaleOrdinal for color assignment, and d3.csv to load data from a gist. Percentages and formatted sales values are rendered via d3.format alongside the chart’s interactive legend.

Loading thumbnail…

Fork of Piechart ICE7

This visualization is a pie chart depicting CO2 emissions by country, with each slice labeled with the profit value and accompanied by a legend showing the state and its corresponding emission value. The chart uses D3 v5 to fetch CSV data from a GitHub gist, and the pie layout and arc generator create the circular segments. Data is represented with an ordinal color scale, and the visualization is rendered as SVG with text labels and interactive legends.

Loading thumbnail…

Fork of Penguin Data set scatter Plot

This fork of the Penguin dataset visualizes flipper length against body mass as a scatter plot, with circles colored by species (Adelie, Gentoo, and Chinstrap). It uses D3 v5's `csv`, `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and SVG circles to render the data. A secondary pair of attributes—bill length and bill depth—are stored on each mark but not directly displayed. The chart includes rotated axis labels and a title, rendered via SVG within a React-free HTML page.

Loading thumbnail…

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

The visualization shows the average house prices for fifteen U.S. cities, rendered as a horizontal bar chart using React and D3.js. It loads comma-separated data from a GitHub Gist, maps each city to a band scale on the y-axis, and linearly scales the price to the x-axis. The SVG output uses React DOM elements to draw the tick marks, axis labels, and price bars. The code leverages `d3.csv`, `d3.scaleBand`, and `d3.scaleLinear` to fetch and transform the data.

Loading thumbnail…

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

This scatterplot-like bar chart displays the ages of fifteen individuals grouped by gender, using horizontal bars to compare values. The visualization combines React for component state management and rendering with D3 v7 for data loading and scale calculations. It loads CSV data from a GitHub gist via d3.csv, then uses d3.scaleBand and d3.scaleLinear to position bars, with custom tick rendering instead of d3.axisBottom or d3.axisLeft.

Loading thumbnail…

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

This example uses React and D3 v5 to render a horizontal bar chart of basic costs for 15 countries from a CSV dataset. It shows categorical marks as SVG rectangles positioned by a D3 `scaleBand` and `scaleLinear`, with axes drawn manually using gridlines and tick labels. The code imports D3 functions like `csv`, `scaleBand`, `scaleLinear`, and `max` within a React component, using hooks such as `useState` and `useEffect` to load data. All marks and channels are rendered declaratively as SVG elements.

Loading thumbnail…

ICE-5

This example presents metadata about a gender dataset loaded from a CSV file. It displays the dataset’s size in kilobytes, row count, and column count as text on a webpage with a gender-themed background image. The page uses D3.js v7’s `d3.csv` to fetch and parse the remote CSV, then computes the metadata using `d3.csvFormat`. The visualization communicates simple summary statistics without charts, relying on HTML and CSS for layout and styling.

Loading thumbnail…

<b>ICE-5</b>

This example displays metadata for a gender dataset, showing the data size in kilobytes, row count, and column count. It fetches a CSV file using D3 v7’s `d3.csv` method, then formats the data with `d3.csvFormat` to calculate its length. The page presents a linked dataset reference and renders the computed statistics in a styled `<pre>` element, with a background image from an SVG file and custom CSS for headings and links.

Loading thumbnail…

<b><u>ICE-5</u></b>

This visualization displays summary statistics about a dataset of CSS named colors. It shows the file size in kilobytes, the number of rows, and the number of columns. The code uses D3’s `csv` utility to load the data, React hooks like `useState` and `useEffect` to manage state, and `ReactDOM.render` to display the result. The message is formatted using template literals and displayed in a `<pre>` element.

Loading thumbnail…

Fork of Smiley Face Part III

This example renders a stylized smiley face using SVG elements composed through React components, with the D3 arc generator defining its mouth, eyebrows, and ears. The face features pink circular head with layered eyes, a black nose, a red tongue, and curved arcs for brows and lips. Built with React 16.9 and D3 v7, the code uses d3.arc() to create path geometries and React’s declarative JSX to position elements within an SVG canvas, offering a playful demonstration of combining D3’s geometric utilities with React’s component-based rendering.

Loading thumbnail…

Fork of Smiley Face Part III

This example renders a cartoon smiley face using React and D3 v7, composed of SVG shapes. It shows a pink circular head with black stroke, detailed eyes with layered white and black circles for highlights, eyebrows created with arc generators, ears, and a smiling mouth. The code uses D3’s `arc()` generator to define the mouth, lips, and eyebrows, while React components build the SVG structure. A custom red tongue path and static circles complete the face, with all elements positioned relative to the center coordinates.

Loading thumbnail…

Fork of Smiley Face Part III

This example shows a classic smiley face rendered as an SVG using React and D3 v5. A yellow circle with a black stroke forms the head, while two small circles serve as eyes, and a mouth is drawn as a D3 arc path. The code uses `d3.arc` to generate the mouth’s curved shape, with React managing the component structure and coordinates for placement. No external data is used; all dimensions and positions are hard-coded.

Loading thumbnail…

Fork of Smiley Face Part III

This example shows a large, stylized smiley face rendered as a pink circle with green outline, eyes, and an arc-shaped mouth, all positioned within a spacious SVG canvas. The visualization uses React to define the component structure and D3’s `arc` API to generate the mouth path, with coordinates and dimensions set via fixed constants. D3 v7 and React are loaded via CDN, and the face is drawn using SVG circle and path elements rather than complex data binding.

Loading thumbnail…

Fork of Smiley Face Part III

This example displays a yellow smiley face composed of SVG shapes, centered on a 960x500 canvas with a black outlined circular head, two eyes, and a curved mouth. The visualization is built using React and D3, leveraging D3's `arc` function to generate the mouth's path with defined inner and outer radii and angular bounds. The remaining shapes are drawn as standard SVG `circle` elements, with all coordinates and dimensions predefined as constants within the React component.

Loading thumbnail…

Fork of Smiley Face Part III

This example renders a classic smiley face as a single SVG graphic, built with React and D3. The face consists of a yellow circle, two small eye circles, and an arc-shaped mouth, all positioned relative to the center of the canvas. The code uses D3’s `arc` function to define the mouth’s path based on inner and outer radii and angular start and end points, while React manages the SVG elements. The drawing is computed from fixed constants rather than external data.

Loading thumbnail…

Fork of Fork of Smiley Face Part III

This example shows a yellow smiley face composed of SVG circles and an arc for the mouth, centered within a 960-by-500 viewport. The face uses React to render the SVG elements and D3’s `arc` function to generate the mouth path with specified inner and outer radii and angular span. Stroke widths and offsets for the eyes and mouth are defined as constants, with the entire drawing grouped and translated to the center of the canvas. The code relies on React 16.9 and D3 v5, using ReactDOM to mount the component.

Loading thumbnail…

Fork of Smiley Face Part III

This example renders a classic smiley face as a single SVG graphic, built with React and D3. The face consists of a yellow circle, two small eye circles, and an arc-shaped mouth, all positioned relative to the center of the canvas. The code uses D3’s `arc` function to define the mouth’s path based on inner and outer radii and angular start and end points, while React manages the SVG elements. The drawing is computed from fixed constants rather than external data.