V

Vikil Lakkavatri

@vikil143·22 public vizzes

Loading thumbnail…

Student Data Previous 10 years

This example visualizes the number of students at D.G. Ruparel College over the past ten years using an SVG bar chart rendered in React with D3 v5. Each bar represents a year, with height scaled by the student count and color mapped through a rainbow sequential scale. The chart includes dashed gridlines, reversed y-axis tick labels, and yearly annotations. The code loads CSV data via the `useData` hook and d3.csv, then applies `scaleLinear`, `scaleSequential`, and `interpolateRainbow` to encode values.

Loading thumbnail…

Circular Bar

A circular bar chart shows how values increase from 2020 to 2040, with each year represented by a colored arc segment radiating from a central point. The chart uses D3.js v5 within a React component, employing `scaleBand` and `scaleLinear` for positioning, `arc()` for segment geometry, and `scaleSequential` with `interpolateRainbow` to color each arc. Rendered as scalable vector graphics (SVG), the visualization includes a red center point and white background. The static input data comes from the `useStaticData` hook, providing year-value pairs.

Loading thumbnail…

USD to INR conversion graph

This example shows the exchange rate between USD and INR, depicting how the value of the US dollar fluctuates against the Indian rupee over time. The visualization is built using React for the application structure, while D3.js version 5 handles the data plotting and chart rendering. The code uses a custom hook, `useData`, to manage data retrieval, though the actual data fetching logic is not implemented in the visible files. The main component renders a static “Hello React!” message, meaning the chart itself is not yet instantiated; instead, the placeholder demonstrates the intended setup with D3 and React working together.

Loading thumbnail…

Fork of NYC Crime

This visualization of NYC crime data combines a choropleth map, a donut chart, and bar charts in a single SVG canvas. The map uses D3’s `geoMercator` projection to display precincts, while the pie chart and bar plots show crime type, age, and race distributions. Interactive filters let users select a precinct or crime type, updating all views. Built with D3 v6 and React, it uses SVG for rendering and features a reset button for clearing selections.

Loading thumbnail…

By me Designed random bar graph

This bar graph displays a shuffled sequence of nine values ranging from 100 to 900, rendered as uniformly spaced vertical bars. The chart uses a linear y-axis scale and a banded x-axis scale to position each bar, with alternating teal shades distinguishing adjacent bars. Built with React and D3 v5, the visualization loads random data via a custom `useData` hook, which shuffles a range using D3’s `shuffle` and `range` functions. The SVG output is sized dynamically based on the window, and the scaling is handled through `scaleLinear` and `scaleBand`, with inner padding applied to the x-scale for visual separation.

Loading thumbnail…

Geo India

Geo India is an interactive choropleth map that visualizes Indian state and district boundaries, allowing users to drill down from a national overview to a specific state by clicking on it. Built with React and D3, the map uses `d3.geoMercator` for projection and `d3.geoPath` to render TopoJSON features from two remote datasets. Clicking a state triggers a smooth `d3.zoom` transition, scaling and translating the SVG view to focus on the selected region, which then re-renders with district-level polygons. The animation lasts 500 milliseconds, and the map supports pan and zoom up to an 8x scale.

Loading thumbnail…

Fork of La Ola Group

This force-directed graph depicts the organizational structure of the Kenneth Rainin Foundation, showing connections between main departments like Coordinacion, Comercial, and Area Tecnica, with child nodes and leaf nodes representing sub-teams. Built with D3 v6, it uses `d3.forceSimulation` with `forceManyBody` and `forceLink` to position nodes, while SVGs render colored circles and labels that can be dragged via `d3.drag`. Node colors come from a generated palette in colors.js, and data is assembled programmatically in data.js.

Loading thumbnail…

Try this Bar Graph Histogram with Iris Data - Data Decoder - July18

This interactive visualization displays the Iris dataset as a dual histogram, with binned bars for both the X and Y attributes chosen from dropdown menus. Orange circular marks overlay the bar endpoints to highlight bin centers. Built with React and D3 v7, the example uses `d3.bin` for histogram generation, `scaleLinear` and `scaleOrdinal` for scales, and SVG rendering for the marks and axes.

Loading thumbnail…

Try this bar graph of TP_dataviz Projet

This bar graph displays the number of Deezer fans for each album by a specific artist, with bars sorted either by fan count or release date via Ascending and Descending buttons. Built with D3.js v4, it fetches JSON data from the Wasabi API, renders an SVG with animated bar transitions, and includes a tooltip showing album title and fan count on hover. The visualization uses `scaleBand` for the x-axis, `scaleLinear` for the y-axis, and `transition` for smooth updates, demonstrating interactive data sorting and display.

Loading thumbnail…

Bar Graph of Humidity histogram

This bar graph shows the distribution of humidity levels from a year of weather data, with the mean humidity marked by a dashed line. It uses d3.histogram to bin the humidity values into 12 intervals, and d3.scaleLinear for both the x and y axes. The chart is rendered as an SVG, with bar heights calculated from the binned counts, and is built with D3 v5 within a React starter template.

Loading thumbnail…

Try this graph of radial pie ex

This radial pie chart displays the population distribution across age brackets for each U.S. state, with each state occupying a wedge and colored segments representing age categories. The visualization uses d3.scaleBand for angular positioning and the custom d3-scale-radial.js scaleRadial for radial distances from an inner to outer radius. Rendered as SVG with React, it includes circular grid lines with tick labels, state labels around the perimeter, and a legend for age groups. The code reads from a CSV file and applies d3.stack for the segmented bars.

Loading thumbnail…

Fork of React Starter

This example is a React starter that sets up an empty SVG canvas sized to the browser window. On mount, the app uses D3’s `csv` function to load a local `data.csv` file, which contains monthly temperature readings from 1901 onward, but it only logs the parsed data to the console and does not render any visualization. The code combines React with D3 v5 and renders the SVG element declaratively, but it lacks any plotting, axes, or other visible output.

Loading thumbnail…

Green house gas bar chart

This visualization displays greenhouse gas emissions by country using a bar chart, with the data loaded from a CSV file containing country names and population figures. The chart renders as SVG elements within a React component, drawing only the X and Y axes as black lines using basic SVG line elements. The code relies on React hooks (useState, useEffect) and the d3.csv function to fetch and parse the data, while d3.v5 is loaded via CDN. The visualization uses a fixed 450×450 pixel SVG canvas with no bars actually drawn, showing only the coordinate system and data loading foundation.

Loading thumbnail…

Fork of D3 Implementation

This example shows a grid of horizontal and vertical bars covering the full screen, with two circular masks revealing the intersection of the bars. Each bar is a separate SVG `<rect>` element, generated using `d3.range` and `selectAll().join()`. The first mask uses a black background with a white circle to show the horizontal bars, while the second inverts the colors to show the vertical bars. The code relies on D3 v7’s `select` and `range` functions to construct the elements and masks dynamically.

Loading thumbnail…

D3.js Starter

This interactive React visualization renders a stylized face using SVG primitives. A radial gradient defines the head's golden shading, while D3.js v5's `line()` and `curveCardinal()` functions from the `d3-shape` component construct the eye shapes. The custom `eyeGeneratorCurve()` function coordinates curve paths based on calculated distances between points. Each eye is drawn as a closed path with filled white interiors and black strokes, positioned within a translated group. The application manages state and rendering through React's component system, with the SVG canvas sized at 400 by 400 pixels.

Loading thumbnail…

For Testing Purpose

A stylized smiley face is rendered in SVG using React and D3 v7. The face features radial gradients for the head and nose, with D3's `arc()` generator creating the mouth path. Polygon elements form the eyes, while the code uses React's `createRoot` to mount the component. The visualization is purely illustrative, demonstrating how D3's geometric utilities can be combined with React's declarative UI structure.

Loading thumbnail…

Try this dataviz or use data for react native

This scatterplot visualizes the daily new COVID-19 cases in Italy, with point radius proportional to the number of intensive care patients. The x-axis uses `scaleTime` for dates, while `scaleSqrt` maps intensive care counts to point sizes. A button toggles a path drawn with `line()`. The code leverages D3 v6's `csv` parser, `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` APIs. Data comes from a continuously updated GitHub repository containing national pandemic statistics, rendered as SVG within a React framework.

Loading thumbnail…

Fork of AQI Data in Bangor, Maine Over Time

The visualization shows daily Air Quality Index (AQI) readings for Bangor, Maine, over time, filtered by pollutant type (Ozone or PM2.5) through a dropdown menu. It plots AQI values against dates using d3.scaleTime and d3.scaleLinear, rendering a smooth curved line via d3.line with curveNatural and individual data points as circles with tooltips. The component uses React hooks to manage state and loads CSV data from a GitHub gist, while SVG elements are generated through reusable axis and mark components.

Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. The visualization demonstrates custom axis styling, including tick labels, grid lines, and axis titles. Built with D3 v5, the code uses `scaleLinear` for the x-axis and `scaleBand` for the y-axis, with SVG rendering. It reads data from a CSV file and applies custom fonts and colors to enhance the chart’s readability.

Loading thumbnail…

D3.js Starter

This example shows a simple smiley face drawn with D3.js, using a yellow circle for the head, two black circles for eyes, and an arc path for the mouth. It renders to an SVG element with fixed dimensions. The code imports `select` and `arc` from D3 v5, uses `svg.append` to create each shape, and sets attributes like `fill`, `r`, and `cx`/`cy` directly. The mouth’s path is generated by the `arc()` function with specified start and end angles. The page loads D3 from a CDN and runs the script in a React-based setup.

Loading thumbnail…

Customizing Axes

This example displays a horizontal bar chart of population figures for prefectures in East Japan, with each bar’s length proportional to the population value. It customizes both axes: the y-axis removes its line and tick marks for a cleaner look, while the x-axis uses `d3.axisBottom` with a `.2s` tick formatter (e.g., “13.7M”) and spans the full chart height via negative tick sizes. The chart is rendered with D3 v5, loading data from a CSV, and uses `scaleLinear` and `scaleBand` for positioning.

Loading thumbnail…

Population Histogram by Country 2

This histogram visualizes the populations of the top 10 most populated countries as of 2018, sourced from a local CSV file. The chart uses SVG rectangles rendered via the D3.js library, with each bar’s height corresponding to the country’s population value (scaled by 1000). The code relies on `d3.select` and `d3.csv` to load and bind the data, while CSS styles the tick labels and lines. The visualization focuses on comparing population magnitudes across the listed nations.