K

kranthireddyskr

@kranthireddyskr·22 public vizzes

Loading thumbnail…

country map

This example displays a choropleth map of India, rendered as SVG paths using the Mercator projection. The map visualizes the country’s regions with categorical colors from `d3.scaleOrdinal` and `schemeCategory10`, and each region shows a tooltip title on hover. The code loads TopoJSON data from a GitHub gist via `d3.json`, parses it with `feature` from the topojson library, and draws paths using `d3.geoPath`. Hovering changes the fill color to pink, and the map includes a heading text layer.

Loading thumbnail…

Network Graph

This network graph visualizes relationships among car brands, with nodes representing Volkswagen, Audi, Skoda, Porsche, Bentley, and Bugatti, and links indicating connections weighted by strength. The code uses d3.layout.force (from d3.v2/v4) to simulate a force-directed layout, rendering SVG circles and text labels for nodes and pink lines for links. Link thickness scales with the square root of the weight from graphFile.json, and nodes are draggable via force.drag. The graph updates positions on each tick event, translating node groups and adjusting link endpoints.

Loading thumbnail…

Family Tree

This visualization shows a family tree of General Motors vehicle brands and models, using a hierarchical layout to display the relationships from Chevrolet, Cadillac, and GMC down to individual car models. The tree uses colored nodes and labels, with the root in violet, sub-brands in black, model families in purple, and specific variants in blue. It is rendered as an SVG using D3 v5, leveraging the `tree`, `hierarchy`, and `linkHorizontal` layout functions from the `d3` module, with zoom and pan interactions enabled via the `zoom` behavior.

Loading thumbnail…

Country Map of India

This example renders a choropleth map of India using D3.js and TopoJSON. The visualization applies the Mercator projection through thegeoMercator and geoPath APIs to draw state boundaries, with each region colored using a categorical color scheme. The map loads geographic data from a remote TopoJSON file and renders it as SVG paths, with a hover effect that highlights individual states in pink. The interface displays the map within an SVG canvas, with the state names and colors derived from the dataset's properties.

Loading thumbnail…

world map

This example displays a world map rendered as an SVG using D3 v5 and TopoJSON. It shows country boundaries and a green sphere representing the Earth’s surface. The code loads geographic data from a JSON file, processes it with the `feature` function from TopoJSON, and projects it using `geoNaturalEarth1`. Paths are generated with `d3.geoPath` and styled with blue country fills and black strokes.

Loading thumbnail…

Scatter Plot with Iris DataSet

A scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and petal width on the y-axis, with each point colored by species: red for setosa, blue for versicolor, and green for virginica. The visualization uses D3 v6 with a React framework, rendering SVG circles via `d3.select` and `join`. Axes are generated using `d3.axisLeft` and `d3.axisBottom`, while data is loaded from a CSV URL using `d3.csv` with a custom parse function.

Loading thumbnail…

Area Chart

This area chart displays electronic sales from 2013 to 2021, with a green filled region under a black smoothed line. The visualization uses D3 v5 with SVG rendering, employing `scaleTime` for the year axis and `scaleLinear` for sales values. Data is loaded from a CSV file via `d3.csv`, and both `d3.line` and `d3.area` generators with `curveBasis` create the chart. Axes are customized with `axisBottom` and `axisLeft`, including gridlines and labels.

Loading thumbnail…

line chart

This line chart shows total electronic sales over time, with years on the x-axis and sales figures on the y-axis. The visualization uses an SVG canvas with D3 v5, importing specific functions like `scaleLinear`, `scaleTime`, `axisLeft`, `axisBottom`, and `line` to generate the plot. Data is loaded from a CSV file via the `csv` function and parsed with `d3.timeParse` to format date values. The chart includes grid lines, axis labels, and a black line path styled with CSS class `.line_path`, all rendered using D3’s low-level SVG API.

Loading thumbnail…

Pie Chart

This pie chart displays the mortality rate across different states in the United States. The visualization uses a donut-style pie chart with color-coded segments and a legend that lists each state alongside its corresponding death count. The data is loaded from a remote CSV file and rendered as SVG. The code leverages D3 v5 APIs such as `pie`, `arc`, `scaleOrdinal`, and `select` to generate the chart, with custom text styling applied to segment labels.

Loading thumbnail…

Pie Chart

This visualization displays a pie chart of the top 10 countries by air pollution-related deaths in 2020, with each slice labeled with the death count in thousands and a corresponding color-coded legend. The chart is rendered as static SVG using D3 v5, leveraging the `pie`, `arc`, and `scaleOrdinal` functions from the `d3` module to compute slice geometry and assign colors. Data is loaded from a CSV file via `d3.csv` from a GitHub gist, and the total death count is calculated but not used in the display.

Loading thumbnail…

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

This example shows a bar chart comparing laptop sales across ten companies, using a dataset loaded from a CSV file. The visualization uses React to render SVG elements and D3 to handle data loading and scales, specifically `csv`, `scaleBand`, `scaleLinear`, and `max` from d3. The chart displays horizontal bars with company names on the y-axis and sales values on the x-axis, including custom tick marks and gridlines styled with CSS.

Loading thumbnail…

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

This visualization displays a horizontal bar chart ranking the top 10 most populous countries by sales. It uses React to manage state and render the SVG, while D3 v5 provides the scales, axes, and data loading via `csv()`. The bars are drawn as `rect` elements, with quantitative values mapped to the x-axis and categorical company names on the y-axis.

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris Dataset, with each circle representing an iris flower colored by species to emphasize clustering patterns between sepal length and petal length. The SVG visualization uses D3 v5 with d3.scaleLinear for axes and d3.scaleOrdinal with d3.schemeCategory10 for categorical coloring. It incorporates the d3-legend library to generate a color legend, while axes are rendered using d3.axisBottom and d3.axisLeft with gridlines and rotated labels. Data loads asynchronously from a CSV via d3.csv.

Loading thumbnail…

ICE -6

This visualization shows 2018 car sales across northeastern United States, displaying the top 20 states in a horizontal bar chart with steel-blue rectangles. It loads CSV data from a GitHub gist, uses React for UI structure, and employs D3 version 5 APIs including `scaleBand`, `scaleLinear`, and `csv` for data fetching and rendering. The SVG visualization includes gridlines, axis ticks, and state labels.

Loading thumbnail…

Loading and Parsing CSV Data with D3.js

This example demonstrates how to load and parse CSV data from a remote URL using D3.js in a React application. The page displays a message showing the parsed data's size in kilobytes, row count, and column count. It uses the `d3.csv` method to fetch and parse the external CSV file, then formats the result with `d3.csvFormat` to calculate the data size. The rendered output appears as styled text in an HTML `<pre>` element with custom CSS colors.

Loading thumbnail…

Loading and Parsing the CSV data

This example demonstrates loading and parsing CSV data from a remote URL using D3’s `csvParse` method within a React page. It fetches a text file containing elective preference data, then converts it into a JavaScript array of objects, logging the file size in kilobytes, the number of rows, and the number of columns to the console. The visualization itself is absent, focusing solely on the data ingestion and initial structural inspection.

Loading thumbnail…

Confused

A green circle with a white outline represents a confused face, featuring two white eyes and a downward-curving mouth drawn as a thick arc. The SVG is rendered through React components, with the mouth path generated using the d3.arc API to create a specific start and end angle. The code uses React 17 and D3 v6, setting dimensions and positioning elements via SVG translate transformations.

Loading thumbnail…

Fork of Fork of Smiley Face Part III

A yellow smiley face is drawn in SVG using React components that compute geometric values and a D3 arc generator for the mouth. The face consists of a filled circle with a black stroke, two eye circles positioned via offset constants, and a mouth path created with `d3.arc()` using defined inner/outer radii and angular ranges. All elements are rendered inside a single `<svg>` element, with the face centered using a `translate` transform. The example demonstrates combining React's declarative rendering with D3's shape-generating APIs to produce static vector graphics.

Loading thumbnail…

Fork of Not so Smiley Face

This example shows a partially completed smiley face composed of SVG shapes, with a yellow circular head, black eyes, and an arc-shaped mouth positioned below the face’s center. The visualization uses React to render the SVG elements, while D3’s `arc` generator creates the mouth path based on specified inner and outer radii and start/end angles. All geometry is computed from fixed dimensions, including the head radius, eye offset, and stroke width, with the mouth arc translated separately from the main face group.

Loading thumbnail…

Fork of Smiley Face Part III

This example shows a smiley face rendered as an SVG, with a yellow circular head, two black eyes, and a curved mouth. Built using React and D3 v5, it imports the `arc` function from D3 to generate the mouth’s path. The head and eyes are plain SVG circles positioned with React JSX, while the mouth arc uses D3’s `arc()` with specified inner and outer radii and angle ranges. The entire drawing is centered and scaled to a 960 by 500 viewport, with a fixed stroke width for the head’s outline.

Loading thumbnail…

Fork of Smiley Face Part II

This example renders a full-screen smiley face as an SVG graphic using React. The visualization positions a yellow circle at the center of the viewport, with two eye circles offset above it, while the mouth is omitted from the visible output. The component calculates dimensions from `window.innerWidth` and `window.innerHeight`, and uses React's `ReactDOM.render` to mount the SVG. The code references React 16.9.0 and applies stroke properties for the face outline, though the commented-out markup suggests a static alternative layout.

Loading thumbnail…

Fork of Smiley Face Part II

This example renders a full-screen smiley face as an SVG graphic using React. The visualization positions a yellow circle at the center of the viewport, with two eye circles offset above it, while the mouth is omitted from the visible output. The component calculates dimensions from `window.innerWidth` and `window.innerHeight`, and uses React's `ReactDOM.render` to mount the SVG. The code references React 16.9.0 and applies stroke properties for the face outline, though the commented-out markup suggests a static alternative layout.