K

Krishu

@Krishmitha·46 public vizzes

Loading thumbnail…

Untitled

This visualization combines an interactive map of shipwrecks with a force-based clustering algorithm to reveal spatial patterns in maritime losses. It overlays circles on an Ocean Basemap, with each circle representing a shipwreck; as users zoom, the circles coalesce into larger clusters labeled with their count of wrecks. The code uses D3 v5, d3-cluster, d3-tile, and d3.geoMercator for projection and tile loading, rendering the basemap as SVG images and the circles on a canvas via `ctx.arc`. The data comes from a `shipwrecks.csv` file, with zoom and pan handled through d3.zoom.

Loading thumbnail…

React Starter PAck backup 3

This visualization shows a celebrity dataset using a packed circle layout, with each circle representing a sample size and displaying a photo of the celebrity. The circle packing layout is generated using the D3.js `pack` API, and the data is processed through `csv` and `nest` functions. The interactive SVG is rendered in React with an animation, using D3's `scaleOrdinal` for assigning photo clip paths and `scaleSequential` with the `interpolateMagma` color scale for the circle fills.

Loading thumbnail…

React Starter PAck backup 3

This interactive bubble chart visualizes celebrity data by category and gender, using circular packing to show sample sizes through circle area. It displays celebrity portrait images clipped within each circle, with offsets adjusting image positioning. The visualization is built with React components that wrap D3 v5 functions including `d3.pack`, `d3.hierarchy`, `d3.nest`, and `d3.scaleOrdinal`, rendering to SVG with animated updates. Data comes from a local CSV file containing celebrity names, categories, sample counts, portrait URLs, and offset values.

Loading thumbnail…

React Starter PAck backup 3

This interactive bubble chart visualizes celebrity data by category and gender, using circular packing to show sample sizes through circle area. It displays celebrity portrait images clipped within each circle, with offsets adjusting image positioning. The visualization is built with React components that wrap D3 v5 functions including `d3.pack`, `d3.hierarchy`, `d3.nest`, and `d3.scaleOrdinal`, rendering to SVG with animated updates. Data comes from a local CSV file containing celebrity names, categories, sample counts, portrait URLs, and offset values.

Loading thumbnail…

Accidents on the Road - Choropleth

This visualization presents a choropleth map of road accident deaths across Russian regions, with color-coded polygons indicating mortality rates and city markers overlaid on major population centers. Hovering over a region reveals its name and death count via a tooltip. The map is rendered using D3 v3’s `d3.geo.albers` projection and `d3.geo.path` on topojson data, while a `d3.scale.threshold` maps death values to a green-to-red color scale. Accident statistics come from a CSV file, and city coordinates are loaded from a TSV file.

Loading thumbnail…

Untitled

A stacked bar chart displays monthly mortality counts from the Crimean War, broken down by cause—disease, wounds, and other—using a dataset from a TSV file. The chart uses an ordinal x-axis with rounded bands and a linear y-axis, with layers computed via `d3.layout.stack`. SVG rectangles represent each cause per month, colored by a category scale. Formatting relies on `d3.time.format` for date parsing and axis tick labels, with axes generated through `d3.svg.axis`.

Loading thumbnail…

Let's make a map with D3.js

This example shows a world map rendered as SVG paths, with countries filled in navy blue and outlined with light green strokes. The map uses the Mercator projection via `d3.geoMercator` and draws features with `d3.geoPath`. Geographic data comes from the World Atlas TopoJSON file, which is loaded with `d3.json` and converted to GeoJSON using `topojson.feature`. The styling is applied through CSS on the `path` elements, and the visualization updates once the data is fetched asynchronously.

Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, mapping petal length against sepal width for individual flowers. The visualization uses React to render SVG circles, with D3’s scaleLinear and extent functions calculating the axes and data domains. Custom AxisBottom and AxisLeft components generate tick marks and labels, while the Marks component adds interactive tooltips via SVG <title> elements. The chart applies a clean aesthetic with Poppins typography, teal markers, and muted gray gridlines, and includes rotated axis labels for readability.

Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris flower dataset, mapping petal length against sepal width. The code uses React with D3 scales (scaleLinear), and renders SVG circles with native `<title>` elements for tooltips. Axes are built with custom React components using tick marks and formatted labels. The chart applies a Poppins font and muted color palette, with axis labels rotated for readability, all styled through inline CSS.

Loading thumbnail…

Stylized Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length against sepal width for individual flowers. Built with React and D3 v5, it uses `scaleLinear` for both axes and renders SVG circles via a custom `Marks` component, with axes generated by `AxisBottom` and `AxisLeft`. The visualization includes formatted tick labels, rotated axis titles, and a native SVG tooltip showing the x-value on hover. Styling uses the Poppins font with custom CSS for marks and gridlines.

Loading thumbnail…

Salary Data BarChart

This bar chart displays salary ranges across a dataset, with horizontal bars representing the count of salaries within each range. The visualization uses D3 v5 to load CSV data and render an SVG chart with a linear x-scale for counts and a band scale for salary categories. The chart includes axes labeled with salary ranges and count values, using scaleBand for categorical spacing and scaleLinear for numeric mapping. Bars are appended as SVG rectangles with widths proportional to count values, demonstrating a straightforward categorical comparison of salary distributions.

Loading thumbnail…

Salary Data BarChart

This bar chart displays salary ranges across a dataset, with horizontal bars representing the count of salaries within each range. The visualization uses D3 v5 to load CSV data and render an SVG chart with a linear x-scale for counts and a band scale for salary categories. The chart includes axes labeled with salary ranges and count values, using scaleBand for categorical spacing and scaleLinear for numeric mapping. Bars are appended as SVG rectangles with widths proportional to count values, demonstrating a straightforward categorical comparison of salary distributions.

Loading thumbnail…

Temperature in San Francisco-line chart

This line chart displays temperature readings in San Francisco over time, with red curved lines plotted against a white background and labeled axes. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and a `line` generator with `curveBasis` for smoothing. Data is loaded via `csv` from a GitHub-hosted temperature dataset, and the SVG rendering includes custom axis labels and gridlines. The chart emphasizes temporal trends in temperature data without interactive elements.

Loading thumbnail…

Salary Data BarChart

This bar chart visualizes the distribution of salary ranges from a CSV dataset, showing the count of individuals within each salary bracket. It uses a horizontal bar layout with D3 v5, where the x-axis represents the count and the y-axis lists salary ranges. The chart is rendered as an SVG, utilizing D3's `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` APIs to map data and generate axes. The bars' lengths are proportional to the counts, with the data loaded via D3's `csv` function.

Loading thumbnail…

Salary Data BarChart

This bar chart displays the distribution of salary ranges against their associated counts. The horizontal bars represent each salary interval, with their lengths proportional to the count value. Data is loaded from a CSV file and rendered as SVG elements. The visualization uses D3 v5's `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisLeft` and `axisBottom` to generate the axes.

Loading thumbnail…

Salary Data BarChart

This bar chart visualizes the distribution of salary ranges from a CSV dataset, showing the count of individuals within each salary bracket. It uses a horizontal bar layout with D3 v5, where the x-axis represents the count and the y-axis lists salary ranges. The chart is rendered as an SVG, utilizing D3's `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` APIs to map data and generate axes. The bars' lengths are proportional to the counts, with the data loaded via D3's `csv` function.

Loading thumbnail…

Salary Data BarChart

This bar chart visualizes the distribution of salary ranges from a CSV dataset, showing the count of individuals within each salary bracket. It uses a horizontal bar layout with D3 v5, where the x-axis represents the count and the y-axis lists salary ranges. The chart is rendered as an SVG, utilizing D3's `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` APIs to map data and generate axes. The bars' lengths are proportional to the counts, with the data loaded via D3's `csv` function.

Loading thumbnail…

Salary - Scatterplot

This scatterplot displays the distribution of salary ranges against their corresponding employee counts, using a horizontal bar layout where each salary band’s length represents its frequency. The visualization employs D3 v5 with SVG rendering, using `scaleLinear` for the x-axis and `scaleBand` with padding for the categorical salary ranges on the y-axis. Axis labels are formatted with `format('5s')`, and the chart includes margins and a bordered SVG container. Data is loaded from a local CSV file using `d3.csv`.

Loading thumbnail…

Cars Scatter plot

This scatter plot visualizes the relationship between years of service and salary for professors, drawing data from the UCI Machine Learning Repository's Auto MPG dataset. Each circle represents an individual, with its position encoding years of service on the x-axis and salary on the y-axis. The visualization uses the D3.js library (v5), employing `scaleLinear` for axis scaling, `axisLeft` and `axisBottom` for labeled axes, and a `transition` with 1200ms duration to animate the circles growing from radius zero to their final size.

Loading thumbnail…

Melting Data for Multiple Lines

The chart displays world population projections from 1950 to 2100, distinguishing development groups such as more developed, less developed, and least developed countries. The United Nations data is split into two CSV files and melted into a single, tidy format for visualization. Multiple colored lines are rendered as SVG paths using `d3.line` with `curveBasis`, positioned by `scaleTime` and `scaleLinear`. A vertical line marks the year 2018, and a custom `colorLegend` shows the categorical mapping using `d3.scaleOrdinal` with `schemeCategory10`.

Loading thumbnail…

Salary Analysis using Bar Chart

This bar chart shows the distribution of salary ranges across 38 employment records, with each horizontal bar representing a salary bracket and its length corresponding to the count of records in that range. The visualization uses D3 v5 with an SVG rendering approach, loading data from a CSV file via `d3.csv`. The chart employs `scaleLinear` for the x-axis counts and `scaleBand` for the categorical salary ranges on the y-axis, with axes generated using `axisLeft` and `axisBottom`.

Loading thumbnail…

Salary Data BarChart

This bar chart visualizes the distribution of salary ranges from a CSV dataset, showing the count of individuals within each salary bracket. It uses a horizontal bar layout with D3 v5, where the x-axis represents the count and the y-axis lists salary ranges. The chart is rendered as an SVG, utilizing D3's `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` APIs to map data and generate axes. The bars' lengths are proportional to the counts, with the data loaded via D3's `csv` function.

Loading thumbnail…

Melting Data for Multiple Lines

This visualization shows global population trends from 1950 to 2100, using multiple lines to compare different development groups. A vertical reference line marks the year 2018, and a color legend identifies each series. The chart is built using D3 v5, with data loaded from two CSV files and melted into a tidy format. It uses `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` to render the line paths, with axes generated by `d3.axisLeft` and `d3.axisBottom`.

Loading thumbnail…

Melting Data for Multiple Lines

Using D3 v5, this chart visualizes global population trends from 1950 through 2100 by combining two datasets: historical estimates and medium-variant projections. It displays multiple lines, each representing a development region, with a color legend and a vertical line marking the year 2018. The code melts the wide-format data into a tidy structure, then uses `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to render the SVG chart. A `d3.line` path with `curveBasis` draws each line, and an interactive mouse event on a transparent rectangle captures hover positions. This example demonstrates a data-wrangling technique for creating multi-line charts from time-series data.

Loading thumbnail…

Melting Data for Multiple Lines

This visualization shows global population trends from 1950 to 2100, using multiple lines to compare different development groups. A vertical reference line marks the year 2018, and a color legend identifies each series. The chart is built using D3 v5, with data loaded from two CSV files and melted into a tidy format. It uses `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` to render the line paths, with axes generated by `d3.axisLeft` and `d3.axisBottom`.

Loading thumbnail…

Salary Data BarChart

This bar chart visualizes the distribution of salary ranges from a CSV dataset, showing the count of individuals within each salary bracket. It uses a horizontal bar layout with D3 v5, where the x-axis represents the count and the y-axis lists salary ranges. The chart is rendered as an SVG, utilizing D3's `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` APIs to map data and generate axes. The bars' lengths are proportional to the counts, with the data loaded via D3's `csv` function.

Loading thumbnail…

Smiley

This example renders a smiley face in SVG using D3.v5. Two black circles form the eyes, and a yellow circle with a black stroke is the face. The mouth is drawn with a D3 `arc` generator, creating a partial ring path. The code relies on D3's `select` and `arc` functions, and the SVG dimensions come from the `width` and `height` attributes. All shapes are appended directly to the SVG canvas.

Loading thumbnail…

Salary Analysis with Bar Chart

This bar chart visualizes salary ranges and their corresponding counts from a CSV file. The horizontal bars represent data categories, with each bar's length proportional to the count value. The visualization uses D3 v5, employing `scaleLinear` for the x-axis and `scaleBand` for the y-axis. Data is loaded via `csv()`, and the SVG rendering includes axes generated through `axisBottom` and `axisLeft`. The chart displays nine distinct salary brackets, with red bars drawn as SVG rectangles.

Loading thumbnail…

Salary Analysis with Bar Chart

This bar chart displays the count of salary ranges from a CSV data source, using red horizontal bars to visualize the distribution. The chart maps salary ranges to the y-axis and counts to the x-axis with a linear scale, while employing a band scale for categorical y-values. Implemented with D3 v5, the visualization uses `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to render axes and SVG rectangles, with data loaded via `csv()`.

Loading thumbnail…

Salary Analysis with Bar Chart

This visualization displays the distribution of salary ranges from a small CSV dataset, using horizontal bars to show how many individuals fall into each wage bracket. The bars are rendered in red via SVG, with salary ranges on the y-axis and counts on the x-axis, scaled using `d3.scaleLinear` and `d3.scaleBand`. The chart is built with D3 v5, utilizing `d3.csv` for data loading, `d3.axisBottom` and `d3.axisLeft` for axes, and a custom `render` function that appends rectangles to the SVG canvas.

Loading thumbnail…

Bar Chart

This bar chart displays salary range data, showing the count of occurrences for each salary bracket. The visualization uses an SVG rendering approach with D3 v5, implementing a horizontal bar layout where salary ranges appear on the y-axis using `scaleBand` and counts are mapped to bar widths via `scaleLinear`. The data loads from a CSV file, and the code multiplies population values by 100 before rendering. Each salary range receives a rectangle element positioned with the band scale, with bar heights determined by `yScale.bandwidth()`. The chart includes a "Not Mentioned" category, representing missing salary data.

Loading thumbnail…

Bar Chart

A horizontal bar chart displays population estimates for ten countries, with bar length encoding each nation’s population value. The visualization uses D3 v5’s `scaleLinear` for the x-axis and `scaleBand` for the categorical y-axis, rendering SVG rectangles via `svg.selectAll('rect')`. Data is loaded from a CSV file using `d3.csv`, with population values multiplied by 100 during preprocessing. The chart is fully responsive to the SVG’s width and height attributes, with no axes or labels added.

Loading thumbnail…

Smiley

This example renders a smiley face in SVG using D3.v5. Two black circles form the eyes, and a yellow circle with a black stroke is the face. The mouth is drawn with a D3 `arc` generator, creating a partial ring path. The code relies on D3's `select` and `arc` functions, and the SVG dimensions come from the `width` and `height` attributes. All shapes are appended directly to the SVG canvas.

Loading thumbnail…

Untitled

This visualization shows salary range distributions from a dataset, with each rectangle representing a salary bracket and its corresponding count. The code uses D3.js to load the CSV with `d3.csv`, parse the Count column, and bind the data to rectangles using `selectAll('rect').data()`. The implementation initializes a linear scale with `d3.scaleLinear` for the x-domain but does not yet apply it to the rectangle positions, leaving all bars fixed at 300×500 pixels. The SVG is rendered through the `index.html` and styled with CSS, while the sidebar layout is defined in `styles.css`.

Loading thumbnail…

Untitled

A grid of steel-blue rectangles represents salary data from a CSV file, where each rectangle is drawn for a row in the dataset. The visualization uses D3.js selections to bind data and append `rect` elements, with hard-coded dimensions of 300 by 500 pixels. The code loads the dataset via `d3.csv`, parses the count values as numbers, and renders all entries without encoding the salary ranges or counts into the rectangle sizes or positions.

Loading thumbnail…

Untitled

This visualization displays salary range data from a CSV file, plotting each range as a rectangle with a fixed width of 300 and height of 500 pixels. The rectangles are rendered in steelblue using D3.js, with counts parsed from the data. The code uses D3’s `select` and `csv` methods to load and bind the dataset, but the rendering is incomplete as it does not position the rectangles based on salary values. A sidebar is included in the layout, along with basic styling for text elements.

Loading thumbnail…

Bar chart

A horizontal bar chart displays the population of ten countries, with bars ordered vertically by country name and extending horizontally to represent each nation's population in millions. The visualization uses CSV data loaded from a file, with population values multiplied by one thousand. Built with D3 v5, the chart employs `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and renders SVG rectangles with axes annotated via `axisLeft` and `axisBottom`.

Loading thumbnail…

Bar chart

A horizontal bar chart displays the population of ten countries, with bars ordered vertically by country name and extending horizontally to represent each nation's population in millions. The visualization uses CSV data loaded from a file, with population values multiplied by one thousand. Built with D3 v5, the chart employs `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and renders SVG rectangles with axes annotated via `axisLeft` and `axisBottom`.

Loading thumbnail…

Bar chart

A horizontal bar chart displays the population of ten countries, with bars ordered vertically by country name and extending horizontally to represent each nation's population in millions. The visualization uses CSV data loaded from a file, with population values multiplied by one thousand. Built with D3 v5, the chart employs `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and renders SVG rectangles with axes annotated via `axisLeft` and `axisBottom`.

Loading thumbnail…

Making a Bar Chart

This example demonstrates how to build a horizontal bar chart of the top 10 most populous countries using data from a CSV file. It shows customized D3 axes, including formatted tick labels that abbreviate large population numbers using `d3.format`. The chart is rendered as an SVG using D3 v5, and the code illustrates setting up linear and band scales with `d3.scaleLinear` and `d3.scaleBand`. The visualization also includes axis labels and a title, and the repository contains additional files for creating related charts like Pareto and pie charts.

Loading thumbnail…

Making a Bar Chart

A horizontal bar chart displays the 2018 population estimates for the top 10 most populous countries, sourced from the United Nations World Population Prospects. The visualization uses D3 v5 with SVG rendering, implementing scales, axes, and label formatting through `d3.scaleLinear`, `d3.scaleBand`, and `d3.axisBottom`. Interactive animation enhances the chart's presentation.

Loading thumbnail…

Bowl of fruit general update pattern

This example demonstrates the general update pattern in D3, where data joins manage entering, updating, and exiting elements showing fruits in a bowl. Apples, lemons, and grapefruits are represented as colored circles with text labels, animated over time as fruits are eaten, replaced, and added. The visualization uses d3.scaleOrdinal for color and radius mapping, with d3.transition to animate changes over one second. Built with React and D3 v5, the SVG renders a static bowl shape while fruit elements transition smoothly between states.

Loading thumbnail…

Bowl of fruit general update pattern

This example demonstrates the general update pattern in D3 by animating a bowl of fruit through a sequence of changes: removing apples, replacing one with a lemon, and adding a grapefruit. The visualization uses a React-based D3 v5 setup with SVG elements for the bowl, fruit circles, and labels. The code employs `scaleOrdinal` for color and radius mapping, along with `transition().duration(1000)` to smoothly animate updates when the `fruits` array changes via `setTimeout` calls.

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn with circles, rectangles, and an arc path, using D3.js v5 selections and the `d3.arc` helper to generate the mouth. The SVG is centered on a 960×500 canvas, and the eyebrows animate upward and back down via chained `transition` calls with specified durations. Eye spacing, radius, and eyebrow offsets are defined as constants, while the face itself is composed from static shape elements without a data join.

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face rendered in SVG uses D3.js selections to append and style a circle for the head, eyes, and a path-based mouth. Eyebrows are rectangles that animate upward and back down through chained `transition` calls over two-second durations. The code imports `select` and `arc` from the D3 v5 library, calculating coordinates around a centered group. This example demonstrates fundamental DOM manipulation, showcasing how D3 binds data to visual elements without a dataset, relying purely on static attributes and timed transitions.

Loading thumbnail…

Smiley face Part I

A yellow circle with a thick black outline, centered on an SVG canvas, is flanked by two smaller black circles representing eyes, forming the initial stage of a smiley face. The code uses React to render static SVG circle elements, with explicit coordinates and dimensions for the face and eyes. The larger face circle has a fill of yellow, a stroke of black, and a stroke width of ten, while the eyes are placed symmetrically around the center. This example demonstrates basic SVG shape composition within a React-rendered component.