L

Lakshmipriya-kalapala

@Lakshmipriya-kalapala·17 public vizzes

Loading thumbnail…

Japan Map

This visualization displays a choropleth map of Japan’s administrative regions, with each prefecture filled in a uniform red color and separated by white borders. The map uses an equirectangular-like Mercator projection via `d3.geoMercator` and renders geographic features with `d3.geoPath`. The code loads TopoJSON data for both states and districts, then applies `d3.scaleOrdinal` with a category color scheme, though only the state layer is drawn. Interactive zoom and pan are supported through D3’s `zoom` behavior, which transforms the SVG group containing the map paths.

Loading thumbnail…

Country Map

This example displays a purple map of the United States with orange state boundaries. The visualization uses the `geoAlbersUsaTerritories` projection and `d3.geoPath` to render geographic features from a TopoJSON file. Built with React and D3 v5, the map is drawn as an SVG and hovered states change color from purple to blue-violet. The TopoJSON data is processed using `feature` and `mesh` from the TopoJSON library.

Loading thumbnail…

Social Network

The visualization displays a small social network of seven people, with weighted links indicating relationship strength. It uses a force-directed layout to position nodes, allowing users to click and drag them around the canvas. The graph is rendered as an SVG using D3.js, with brown strokes for links and silver circles with royal blue borders for nodes. Data comes from a local JSON file containing node names and link weights. The code relies on d3.layout.force() for the physics simulation, with node labels positioned to the right of each circle.

Loading thumbnail…

Family Tree

A family tree displays three generations of relatives as orange circles connected by green lines on a pink background. Using D3 v6, the code builds a hierarchical layout with `d3.stratify()` and `d3.tree()`, then renders SVG paths and circles with animated transitions. Node labels show each person's name, while the tree expands from a single root ancestor through children and grandchildren.

Loading thumbnail…

World Map

This interactive choropleth map displays GDP per capita (PPP, current international dollars) for 2020 across world countries, using a yellow-green-blue sequential color scale with missing data filled in green. The visualization fetches topojson country outlines and a CSV dataset, then renders them using d3.geoNaturalEarth1 projection and d3.geoPath. Color encoding relies on d3.scaleQuantile with d3.schemeYlGnBu, while country boundaries are joined via d3.selectAll and Promise.all handles asynchronous data loading. The map also draws graticule lines and an outline for geographic context.

Loading thumbnail…

3D Bar Chart

This example visualizes car manufacturer sales data for six months (July through December) as an interactive 3D bar chart. The bars represent monthly values for each manufacturer, rendered in a three-dimensional space using the x3dom library. The chart is created with d3-x3d’s `barChartMultiSeries` component, populated with CSV data parsed via d3.csv, and scales are defined using d3.scaleLinear. The visualization combines D3 v5 for data handling and DOM manipulation with x3dom for the 3D rendering engine.

Loading thumbnail…

3D Scatter Plot

This example visualizes body mass index data with an interactive 3D scatter plot, mapping height, weight, and body mass onto the x, y, and z axes. The visualization uses Plotly’s `scatter3d` trace type, rendered inside a `div` via the `Plotly.newPlot` API. Data is loaded asynchronously from a CSV file using D3’s `d3.csv` method, with a custom `unpack` function extracting each attribute into arrays. Markers appear as pink circles with fixed size and opacity, while axis titles are styled in red within the layout’s scene configuration.

Loading thumbnail…

Area Chart

This area chart visualizes rainfall measurements over time, with a smooth curve showing yearly rainfall trends and a blue-filled region beneath the line emphasizing the data’s magnitude. The chart uses D3 v5 with SVG rendering, employing `scaleLinear` for both axes, `area` and `line` generators with `curveBasis` smoothing, and `axisBottom`/`axisLeft` for ticks. Data comes from a CSV file loaded via `csv()`, with year and rainfall values parsed as numbers.

Loading thumbnail…

Line Chart

This line chart visualizes yearly rainfall data from 2000 to 2004, with the line smoothly interpolated through the data points. The chart displays the title "Yearly rainfall," labeled axes for "Year" and "Rainfall," and gridlines for readability. Using D3 v5, the code employs `select`, `csv`, `scaleLinear`, `extent`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render the SVG. The data comes from a local CSV file, and styling is applied via external CSS.

Loading thumbnail…

Fork of Pie Chart

This example shows the basic cost of Netflix subscriptions across ten countries, sorted descending and displayed as a pie chart with a color-coded legend and cost labels. Built with D3 v5 and React, it uses `d3.pie`, `d3.arc`, and `scaleOrdinal` with `schemeCategory10` to generate SVG paths. Data is loaded via `d3.csv` from a GitHub gist, and mouseover events log the selected value to the console.

Loading thumbnail…

Reusable Scatter Plot

A reusable scatter plot visualizes the Iris dataset, encoding species with distinct shapes and colors while mapping petal width against sepal length. Built with d3.v6, it uses d3.scaleLinear, d3.scaleOrdinal, and d3.symbol to render marks as SVG paths. The chart automatically cycles through four axes every 10 seconds, updating the x-value to explore different variable pairs. Dynamic axes and transitions demonstrate a reusable chart pattern inspired by Towards Reusable Charts, with data loaded via d3.csv from a remote gist.

Loading thumbnail…

Reusable_D3_Scatter_Plot.

This example shows an animated scatter plot of the Iris dataset, cycling through different x-axis variables (petal width, sepal width, petal length, sepal length) while keeping sepal length on the y-axis. The visualization uses D3 v6's `scaleLinear`, `axisLeft`, and `axisBottom` APIs to render SVG circles colored by species, with a custom legend and axis labels. Data is loaded via D3's `csv` function from a GitHub gist, and a `setInterval` timer triggers updates to the plot's x-value mapping.

Loading thumbnail…

Youtube Data Scatter Plot

This scatter plot shows the total library size of YouTube content across various states and countries, with each marker representing a single location. The x-axis lists the locations while the y-axis displays the library size value. The visualization uses Plotly.js to render an interactive scatter plot with red markers, a title, and labeled axes. The data comes from a CSV file containing YouTube library statistics, though only a subset of locations (Alabama through Kentucky) is included in the plotted data.

Loading thumbnail…

Bar Chart Showing Distribution of Cricket Match Tickets 2001-2017

This example shows the distribution of cricket match tickets over the years 2001–2017, with a bar chart displaying the ticket counts for each year. The visualization is rendered using Chart.js in an HTML page with a canvas element. The chart uses a dataset of ticket numbers, with bars colored in a semi-transparent red and a border, and the y-axis starts at zero. The code also includes a separate React component using D3.js, which would load CSV data from a GitHub gist and render a bar chart with SVG elements, though this component is not used in the displayed chart.

Loading thumbnail…

ICE 5

This example displays a static geographic reference page for U.S. zip codes, featuring a prominent map image of Texas and a hyperlink to a CSV dataset linking zip codes to city and state names. The page uses D3 v7’s `d3.csv` to fetch and summarize the dataset, computing approximate file size in kilobytes, row count, and column count, though it does not render these results visually. The design is minimal, relying on basic HTML and CSS styling with a black-and-white text block and a centered header.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

The visualization displays a dense, abstract composition of overlapping Buddha-like SVG paths rendered in vibrant random colors against a black background. React maps over a numeric array to generate hundreds of semi-transparent rotated polygons, while a single detailed path drawing of a Buddha figure is layered on top at a fixed position. The rendering uses React 16.10 with ReactDOM, directly embedding SVG elements in JSX, and relies on JavaScript’s `Math.random()` to determine each polygon’s coordinates, fill color, and rotation.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

A small polygon is drawn at each of the 21 positions in a 21×21 grid, with every polygon's coordinates, fill color, and a 45-degree rotation all randomized via `Math.random()`. Overlaid on top of this, a single large SVG path of Buddha, defined in the code’s hardcoded path data, is scaled and translated. The React app renders everything into an SVG canvas, using `ReactDOM` to mount the component.