K

karnisrikanth2212

@karnisrikanth2212·27 public vizzes

Loading thumbnail…

ICE-6

This scatter plot visualizes penguin measurements, plotting flipper length against body mass for individual penguins, with point color encoding species. Circles are positioned using linear scales derived from the data extents, and each point also encodes culmen length and depth through its rx and ry attributes. The visualization uses D3 v7’s `csv` loader, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs, rendering as SVG on a React-rendered page. Data comes from a remote gist CSV containing Palmer Penguins measurements, with labeled axes and a title.

Loading thumbnail…

ICE-6

A scatter plot visualizes penguin measurements, plotting flipper length on the x-axis against body mass on the y-axis, with each point colored by species. The code uses D3 v7’s `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load and render the data as SVG circles. Culmen length and depth are also parsed but not visualized. Axis labels and a title are added via SVG text elements, with the plot sized to the full browser window.

Loading thumbnail…

Fork of Fork of Penguin Data set scatter Plot

This example displays a scatter plot of the Palmer Penguins dataset, mapping flipper length to body mass and coloring each point by species (Adelie, Gentoo, or Chinstrap) with yellow, green, or brown. It uses D3 v5’s `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load, scale, and render the axes, while appending SVG circles with fixed radius and dynamic fill colors. The visualization also adds rotated and regular text labels for axes and a title, all rendered in an SVG container sized to the full browser window.

Loading thumbnail…

Fork of Penguin Data set scatter Plot

This scatter plot visualizes the relationship between flipper length, body mass, bill length, and bill depth for three penguin species (Adelie, Gentoo, and Chinstrap), with each species assigned a distinct color. The chart uses D3.js v5’s `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `csv` loader to fetch the penguin dataset from a GitHub Gist. Circles are rendered via the `select` and `join` API, with each point’s horizontal and vertical positions mapped from the data values. Axis labels are styled with cursive fonts, and tick text is enlarged to 24 pixels.

Loading thumbnail…

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

This fork of the ICE-6 example displays the total sales for fifteen US states as a horizontal bar chart rendered with React and D3. The code uses D3’s `csv` to load data from a GitHub gist, `scaleBand` and `scaleLinear` for axes, and maps each state to a `rect` element. The SVG output is generated declaratively inside a React component, with grid lines and tick labels drawn manually.

Loading thumbnail…

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

This visualization shows the basic cost of Netflix subscriptions across different countries with live data. It renders a bar chart using React to manage the component structure and D3 to calculate scales, axes, and positions. The code imports data from a CSV file and uses `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis. It employs `d3.axisBottom` and `d3.axisLeft` to create labeled axes, while a tooltip appears on hover. The visualization updates smoothly through React’s state management, combining declarative UI with D3’s data-driven utilities.

Loading thumbnail…

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

This interactive bar chart visualizes the basic cost of Amazon services across fifteen U.S. cities, using horizontal bars to compare each city’s Total Library Size. Built with React and D3 v5, the app loads CSV data via `d3.csv`, then renders scales and axes with `scaleBand` and `scaleLinear`. SVG rectangles are generated declaratively through React’s JSX, while D3 utilities like `max` and `tick` formatting drive the axis layout. The visualization updates reactively when new data arrives, combining React’s state management with D3’s quantitative computation for a clean, responsive chart.

Loading thumbnail…

Basic Cost of Amazon various cities of US

This bar chart displays the total sales for the top 15 U.S. states, ranked by revenue. Using React and D3 v6, the visualization loads CSV data from a Gist URL, maps state names to the y-axis, and scales bar lengths linearly. The SVG rendering employs `scaleBand` for categorical spacing and `scaleLinear` for numeric axes, with axis ticks and gridlines drawn manually. The chart highlights comparative sales figures across states, with a simple, clean layout for quick regional analysis.

Loading thumbnail…

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

This visualization shows the basic cost of Amazon in various US cities, displaying a horizontal bar chart of library sizes for 15 cities. The data is loaded from a CSV file using d3.csv and rendered as SVG through React components. The chart uses d3.scaleBand for the y-axis, d3.scaleLinear for the x-axis, and d3.max to determine the scale domain. The code manually creates axis ticks and grid lines rather than using d3.axisBottom or d3.axisLeft.

Loading thumbnail…

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

This example shows the basic cost of Netflix subscriptions across 15 countries using a horizontal bar chart. The visualization renders SVG marks and channels through a React component that combines `useState`, `useEffect`, and `useCallback` hooks with D3’s `csv`, `scaleBand`, and `scaleLinear`. Data is loaded from a remote CSV file, with axis ticks drawn manually via `xScale.ticks()`. React controls the component lifecycle, while D3 manages scales and layout calculations for the rectangular bars.

Loading thumbnail…

Fork of ic6: cost of bikes data

This fork of a D3.js bar chart displays the total sales cost for the top 15 bikes, drawn as green rectangles in an SVG. The React application loads CSV data from a GitHub gist and sorts it, using `d3.csv`, `scaleBand`, `scaleLinear`, and `max` for scaling. Axes are rendered manually with map functions, using blue tick lines and labels.

Loading thumbnail…

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

This example shows the total cost of living for 15 U.S. cities using a horizontal bar chart rendered as SVG. The React component loads data from a CSV file with d3.csv, then uses d3.scaleBand and d3.scaleLinear to map city names and costs to positions and bar widths. Custom tick marks are drawn manually using array mapping, with d3.format applied to axis labels. The visualization demonstrates integrating React state management with D3’s scaling and data-loading utilities for a static, styled bar chart.

Loading thumbnail…

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

This interactive data visualization displays population and area details for major US cities, rendered as labeled circles on a map using React and D3.js. The chart uses proportional circle sizes to encode population values, with city names placed as text labels. The implementation combines React 16.9 for component structure with D3 5.11 for map projections and geography (d3.geoPath), while the d3.forceSimulation algorithm positions the labels to prevent overlap. Data originates from the ICE-6 dataset, and the visualization runs entirely in the browser with the map drawn on a blank canvas.

Loading thumbnail…

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

This example visualizes the basic cost of Netflix subscriptions across fifteen countries using a horizontal bar chart. It combines React for component structure and state management with D3 v5 for data loading and scale construction, rendering SVG elements directly through JSX. The code employs `d3.csv` to fetch data, `scaleBand` and `scaleLinear` for positioning, and manually generates axis ticks and gridlines. Bar widths encode the numeric cost values, and the chart is styled with a fixed size and margins.

Loading thumbnail…

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

This interactive bar chart displays the basic cost of living for 15 cities across various US states. Built with React and D3 v5, the visualization renders SVG marks and channels, using a band scale for the categorical y-axis and a linear scale for the numerical x-axis. Data is loaded from a CSV file via d3.csv. The React component manages state and uses useEffect to fetch and slice the data, while d3.scaleBand and d3.scaleLinear map city names and costs to screen coordinates.

Loading thumbnail…

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

This example demonstrates basic sales details across various countries using a bar chart built with React and D3 v5. The visualization uses React to manage the DOM structure and D3’s `scaleBand` and `scaleLinear` to map country names and sales values to screen positions and bar heights. Data is rendered as rectangular marks, with color channels differentiating countries. The implementation leverages D3’s selection and data-join methods within a React component to produce the chart dynamically.

Loading thumbnail…

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

This example visualizes basic sales details across various countries using a bar chart. It combines React for component structure with D3 for data binding and mark rendering, drawing bars whose heights encode sales values. The visualization leverages d3.scaleBand for x-axis positioning and d3.scaleLinear for the y-axis, while React manages the component lifecycle and DOM updates. The code uses D3 v5 APIs within a React 16 application, with CSS styling for the page layout and chart presentation.

Loading thumbnail…

Fork of funn face

This example builds a stylized, cartoon-like face with d3.js and React, rendered as SVG. It shows a gradient-filled circular background, ellipses for eyes, and a mouth created with d3's `arc` generator, while d3's `arc` also produces a teeth path. The face is assembled from modular React components—`BackgroundCircle`, `Eyes`, `Mouth`, and `Teeth`—within a `FaceContainer` that defines the SVG coordinate system. All geometric properties are passed as props, and the teeth include hard-coded line elements to suggest a grin.

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal setup for using D3 version 7 in a web page. It renders the text “Hello D3 version 7” in the center of the body using a very large font size. The code imports the `select` function from the D3 library and applies it to the body element to set its text content. The page loads D3 from a CDN and runs the script via `bundle.js`.

Loading thumbnail…

Welcome to HTML

This interactive web page displays a dataset summary for movie reviews, presenting the file size, row count, and column count as bold text over a themed background image. It uses D3 v7 to fetch a CSV file from a GitHub gist via `d3.csv`, then computes the kilobyte size of the formatted data with `d3.csvFormat` and displays the statistics in a pre element. The page relies on a custom CSS background and jQuery-free DOM manipulation for output.

Loading thumbnail…

Welcome to HTML

This page fetches a movie review dataset from a CSV file hosted on GitHub and displays its metadata in plain text. It reports the approximate file size in kilobytes, the number of rows, and the number of columns, all shown in a centered preformatted block. The visualization uses D3 v7’s `d3.csv` method to load and parse the data, then calculates the size via `d3.csvFormat(data).length` and accesses the column count through `data.columns.length`. The background features a credit card SVG image via CSS.

Loading thumbnail…

Welcome to HTML

This example demonstrates how to load and inspect a movie review dataset using D3 version 7. It fetches a CSV file from a GitHub gist, then displays the dataset's size in kilobytes, row count, and column count within an HTML page. The code uses the `d3.csv` function to fetch and parse the data, then `d3.csvFormat` to calculate its size, and writes the summary to the page via a DOM `textContent` assignment. The visualization is minimal, focusing on metadata rather than graphical representation.

Loading thumbnail…

Welcome to HTML

This example displays the metadata of a movie review dataset, reporting its size in kilobytes, row count, and column count as text on a page. The background uses a fixed movie-themed SVG image via CSS, while the headline introduces the page’s purpose. The code loads a CSV file from a GitHub gist using D3 v7’s `d3.csv` method, formats the data with `d3.csvFormat`, and updates a `<pre>` element’s content through the DOM API. Styling is handled entirely through `index.css`.

Loading thumbnail…

Data Summary

This example displays a summary statistics table for a dataset of 58 movies, covering columns such as movie name, year, runtime, IMDb rating, votes, and gross total. It shows counts, unique values, mean, median, minimum, and maximum for each column. The code loads data from a CSV file using `d3.csv`, then computes statistics with `d3.set`, `d3.mean`, `d3.median`, `d3.min`, and `d3.max`. Results are rendered into an HTML table using D3 selections and data joins.

Loading thumbnail…

Fork of funn face

This example builds a stylized, cartoon-like face with d3.js and React, rendered as SVG. It shows a gradient-filled circular background, ellipses for eyes, and a mouth created with d3's `arc` generator, while d3's `arc` also produces a teeth path. The face is assembled from modular React components—`BackgroundCircle`, `Eyes`, `Mouth`, and `Teeth`—within a `FaceContainer` that defines the SVG coordinate system. All geometric properties are passed as props, and the teeth include hard-coded line elements to suggest a grin.

Loading thumbnail…

Fork of funn face

This example shows a stylized, half-completed smiley face composed of SVG shapes, including a gradient-filled background circle, elliptical eyes, a mouth drawn with a d3 arc path, and teeth made from a mix of arc and line elements. The React code structures the face using separate components like Face, Eyes, and Mouth, while leveraging the d3 arc() API to generate the mouth’s curved path. The layout is positioned within an SVG container using transforms, with fixed dimensions and coordinates that center the face on a 960 by 500 canvas.

Loading thumbnail…

Fork of funn face

This example renders a stylized cartoon face as a set of layered SVG shapes. A gradient-filled background circle forms the head, with elliptical eyes, an arc-based mouth, and a series of teeth lines. Built with React, the composition is constructed from reusable components and parameterized properties. The mouth and teeth are generated using the D3.js `arc` generator, while the overall layout is positioned within an SVG container using a centered coordinate system.