K

karthikpavan1198@gmail.com

@karthikkk43·24 public vizzes

Loading thumbnail…

Fork of HTML Starter

This is a multi-page dashboard for exploring a car dataset through different chart types. It uses static PNG images for visualizations, including scatter plots, stacked and grouped bar charts, a stacked area chart, and line charts. The charts are presented on separate HTML pages with CSS styling, all interacting with a provided dataset to show relationships between variables like present price, selling price, year, and fuel type. The charts function as clickable anchor links with a `transition` effect for navigation.

Loading thumbnail…

Fork of D3 Starter

A small network diagram renders a conceptual set of authors and papers as linked, labeled nodes in an SVG. Using d3.forceSimulation with forceLink and forceManyBody, the layout positions nodes and edges dynamically. Circles distinguish authors from papers by color and size, and drag interactions let users reposition nodes while the simulation runs.

Loading thumbnail…

Fork of D3 Starter

A minimal starter template displays the static text "Hello D3" centered on a plain white page. The sample demonstrates the basic project structure for a D3 v7 application using an HTML file with an import map and a JavaScript module. It imports the `select` function from the D3 library to query the document body and apply the text content. The example focuses on the simplest possible setup for running D3 code, with styling handled by CSS to center the text and set an oversized font size.

Loading thumbnail…

Fork of D3 Starter

A minimal starter template displays the static text "Hello D3" centered on a plain white page. The sample demonstrates the basic project structure for a D3 v7 application using an HTML file with an import map and a JavaScript module. It imports the `select` function from the D3 library to query the document body and apply the text content. The example focuses on the simplest possible setup for running D3 code, with styling handled by CSS to center the text and set an oversized font size.

Loading thumbnail…

Fork of JavaScript Arrays

This D3.js network diagram visualizes a conceptual graph of authors and papers, rendered as an SVG with circular nodes and gray connecting links. Built with D3 v7, the code defines a fixed 1000×600 canvas and styles links via a `.link` class with a standard stroke. While the network data itself is not defined in the provided files, the layout uses a force-directed approach implied by the title, and the interaction is minimal—node labels are non-interactive per the CSS `pointer-events: none`. The rendering is purely static, relying on SVG elements for display.

Loading thumbnail…

Fork of Fork of Network

This network diagram displays connections between authors and papers, with orange circles representing authors and sky blue circles representing papers. The visualization uses D3 v7's force simulation (`d3.forceSimulation`) with link, charge, and center forces to position nodes dynamically. Node labels are rendered as SVG text elements that update their positions during each simulation tick, and links appear as gray lines connecting related entities. The code defines seven nodes and seven links manually in JavaScript arrays, demonstrating a small bipartite network with an additional direct author-to-author connection.

Loading thumbnail…

Fork of HTML Starter

This example shows a force-directed network diagram of authors and papers, with orange circles representing authors and skyblue circles representing papers, connected by gray links based on co-authorship and publication relationships. The visualization uses d3.forceSimulation with forceLink, forceManyBody, and forceCenter to compute node positions, rendered as SVG elements that update on each tick event. Node labels are drawn using appended text elements that track the simulated positions.

Loading thumbnail…

Fork of D3 Starter

This force-directed network diagram shows relationships between authors and papers, with orange circles representing authors and blue circles representing papers. Links connect authors to their papers and include a direct connection between Alice and Charlie. The visualization uses `d3.forceSimulation` with link, charge, and center forces to compute the layout, and supports interactive dragging of nodes. Node size and color differentiate the two node types, while labels display each entity’s name. The code draws SVG lines for links and grouped circles with text for nodes, updating positions on each simulation tick.

Loading thumbnail…

Fork of D3 Starter

A tree diagram displays a three-level programming language hierarchy, from a root node to category nodes for Frontend, Backend, and Data Science, each with leaf-node languages. The visualization uses D3.js v7 to build the SVG layout, with `d3.hierarchy` and `d3.tree` computing positions. Node shapes encode type: rectangles for root, circles for categories, and rotated squares for leaves, all connected by `d3.linkHorizontal` paths.

Loading thumbnail…

Fork of HTML Starter

This choropleth map visualizes sample population scores by country, using a blue-green color scale to represent score ranges. It loads world country boundaries from a TopoJSON file and joins them with CSV data containing country IDs and population scores. The visualization is built with D3.js v7, using `d3.geoNaturalEarth1` for the projection, `d3.geoPath` to generate SVG paths, and `d3.scaleThreshold` for the color bins. Country polygons are rendered as SVG elements with hover tooltips showing the country name and score, accompanied by a static legend.

Loading thumbnail…

Fork of React & D3 Starter

This example displays a world map colored by sample population scores from a CSV file. The visualization uses an equirectangular projection via `d3.geoNaturalEarth1()` and renders country polygons with `d3.geoPath()`. Country colors are assigned using `d3.scaleThreshold()` with five color bins. A tooltip shows country names and values on hover, and a legend explains the color scale. The map uses TopoJSON data from the world-atlas package and processes features with the topojson-client library.

Loading thumbnail…

Fork of React & D3 Starter

This choropleth map displays sample population data for U.S. states, with each state filled according to its value on a blue sequential color scale. The map is rendered as an SVG using D3.js v7, with state boundaries drawn via the `d3.geoPath` projection and TopoJSON data from the us-atlas package. Hovering over a state triggers a tooltip showing the state name and its associated data value, using D3's selection and styling methods.

Loading thumbnail…

Fork of React & D3 Starter

This stacked area chart visualizes global entertainment industry revenue from 2000 to 2022 across eight sectors, including streaming, gaming, music, and live events. The SVG rendering uses D3 v7 with `d3.stack()` to layer the data series, `d3.area()` to generate the filled paths, and `d3.scaleOrdinal()` for color mapping. The chart includes axis labels, grid lines, and a legend, with data loaded from a CSV file via `d3.csv()`.

Loading thumbnail…

Fork of React & D3 Starter

This multi-line chart from VizHub displays the growth of eight global digital platform categories from 2000 to 2022, with values read from a CSV file. The visualization uses D3.js v7 to create an SVG chart, employing `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for ticks and grid lines, and `d3.line` to generate each trend path. Categorical color assignment through `d3.scaleOrdinal` distinguishes the platforms, while a custom legend maps each color to its category. The chart renders with a clean white background, rounded corners, and a drop shadow, presenting all lines on a single set of axes for direct comparison of growth trajectories across sectors.

Loading thumbnail…

Fork of React & D3 Starter

This pie chart shows the distribution of exercise levels across 100 individuals, categorizing weekly exercise hours into low, medium, and high groups. The code uses d3.csv to load lifestyle data, d3.pie and d3.arc to generate the slices, and d3.scaleOrdinal for the color scheme. SVG elements render the chart with percentage labels positioned via labelArc centroids, alongside a legend displaying category counts. The visualization applies d3.js v7, featuring a clean white background, shadow effects, and cursive typography throughout.

Loading thumbnail…

Fork of Fork of React & D3 Starter

This example demonstrates a minimal integration of React and D3, displaying the static text "Hello D3 & React" centered on the page. The application initializes a React component with a `useRef` hook and a `useEffect` hook to apply the text via D3's `select` function. It uses the `createRoot` API from `react-dom/client` to render the component into the DOM, while importing the `select` function from D3 v7. The visual output is a single large text element styled entirely by CSS.

Loading thumbnail…

Fork of React & D3 Starter

This example demonstrates how to integrate React with D3 by rendering a simple text message. It uses React’s `useRef` and `useEffect` hooks to access a DOM element, then applies D3’s `select` function to set the element’s text content to “Hello D3 & React.” The app is mounted via `createRoot` from `react-dom/client`, with D3 v7 and React 19 imported through an import map in the HTML file. The visualization highlights the minimal setup needed to combine React’s component model with D3’s DOM manipulation utilities.

Loading thumbnail…

Fork of React & D3 Starter

This example shows a React component rendering a single, large “Hello D3 & React” message centered on the page. It demonstrates the minimal integration between React and D3 by using the `useRef` and `useEffect` hooks to access a DOM node, then calling `d3.select` from D3 v7 to set the text content. The app is mounted with `createRoot` from `react-dom/client`, and React 19 is loaded via an import map. The code contains no data sources or complex visualizations, focusing purely on the starter setup.

Loading thumbnail…

Fork of React & D3 Starter

This visualization shows a scatter plot displaying the relationship between signups and revenue across 100 data points from a CSV dataset. The chart uses SVG rendering with D3 v7, featuring a reusable `scatterPlot` function that handles scales, axes, grid lines, and point rendering. The code employs `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to construct the visualization, with a white background, cursive font styling, and blue semi-transparent circles at a fixed radius of 5 pixels.

Loading thumbnail…

Fork of React & D3 Starter

This example visualizes daily fitness activity trends over 150 days, comparing steps walked, calories burned, and active minutes as multi-line charts within a single SVG. Using React 19 and D3 v7, it parses CSV data with `d3.csv`, scales values with `d3.scaleLinear`, generates paths with `d3.line`, and renders `d3.axisBottom` and `d3.axisLeft` axes. The visualization includes a title, legend, and styled background, with active minutes scaled 100x for visibility.

Loading thumbnail…

Fork of React & D3 Starter

This visualization combines bars and lines to compare daily fitness metrics—calories burned, steps walked, and active minutes—across 150 days. It shows all three trends on a single SVG chart, with steps scaled down to fit the axis. The code uses D3 v7 APIs such as `scaleBand`, `scaleLinear`, `axisLeft`, and `d3.line` to render the chart, while React handles the page setup. Data comes from a CSV file loaded via `d3.csv`, and the rendering uses SVG elements like `rect` and `path`.

Loading thumbnail…

Fork of React & D3 Starter

A scatterplot visualizes the relationship between exercise hours and productivity scores for 100 individuals. The SVG chart uses blue circles to represent each data point, with exercise hours on the x-axis and productivity scores on the y-axis. The code loads health_productivity_100.csv using `d3.csv`, then applies `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for tick marks, and dashed gridlines. The chart includes a cursive title and axis labels rendered with D3's SVG text elements.

Loading thumbnail…

Fork of React & D3 Starter

This example displays average scores in Math, English, and Science as rounded, pastel-colored bars, calculated from a 100-student CSV dataset. It uses D3 v7 to load and aggregate the data with `d3.csv` and `d3.mean`. The visualization is built with D3 scales (`d3.scaleBand`, `d3.scaleLinear`) and axes, while SVG elements render the bars, value labels, title, and axis labels. The page layout is styled directly via D3 selections on the body element.

Loading thumbnail…

Fork of HTML Starter

This example summarizes a student dataset by displaying computed average scores for math, science, and English, along with the total row and column counts. A line chart rendered as SVG uses `d3.line` and `d3.scaleLinear` to plot the three subject score trends across all 100 students, with each subject shown in a distinct color. The data is loaded asynchronously from a CSV file via `d3.csv`, and the page styling uses the Quicksand and Pacifico fonts from Google Fonts with a sky-blue background.