kannamAmulyachowdary

@kannamAmulyachowdary·14 public vizzes

Fork of D3 map

This example displays a world map populated with thumbnail images of cultural heritage objects from the Network Digital Heritage data, positioned by their geographic coordinates. The map uses D3.js with the geoNaturalEarth1 projection and geoPath to render country outlines from TopoJSON data. Thumbnails are placed via a SPARQL query against the NMVW endpoint, with each image’s latitude and longitude mapped through the projection. The visualization uses D3 v5 and TopoJSON, with SVG rendering and hover effects that adjust image blending.

Jul 7, 2022

Loading thumbnail…

Amulya

A world map displays global population distribution with semi-transparent teal circles sized by city population using a square-root scale. The visualization renders a Natural Earth projection with graticules, land masses, and country borders via D3's geoNaturalEarth1 and geoPath, while React manages component state. City coordinates are projected from latitude and longitude, with population data loaded from a CSV using d3.csv and world topology from TopoJSON.

Jul 7, 2022

Loading thumbnail…

Fork of Fork of 3D Scatter Plot with Iris Dataset

This example visualizes fruit data by plotting three dimensions—Mango, Yellow papaya, and Fruitssize—as a 3D scatter plot with two overlapping marker traces, one semi-transparent and one solid gray. Drawn inside a `myDiv` container, it uses Plotly’s `scatter3d` trace type and `Plotly.newPlot` to render the scene. The data loads from a CSV file via the D3.js `d3.csv` callback, and the plot’s margins are zeroed out in the layout.

Jul 7, 2022

Loading thumbnail…

bonus ice

This example visualizes state-wise population growth using a 3D cube plot, where each cube's height corresponds to population values. The visualization is built with React and D3 v4, rendering SVG elements with animated transitions. It uses `d3.scaleBand` and `d3.scaleLinear` for axes, and the 3D rendering utilizes the `d3-3d` library's cube shapes with interactive drag rotation. Data is loaded from a CSV file via `d3.csv`.

Jul 7, 2022

Loading thumbnail…

Fork of Fork of d3-x3d : 3D Bar Chart Example

This 3D bar chart visualizes TikTok account rankings, with bar heights representing subscriber counts for each creator. The visualization uses the d3-x3d library, which bridges D3.js (v5) with X3D’s declarative 3D graphics. Data is embedded directly in the HTML, mapping each account’s IMDb-style rank and subscriber figures to bar dimensions. The code instantiates d3-3d’s bar chart module, feeding categorical (account names) and quantitative (subscriber counts) values into the 3D scene, while X3DOM handles browser-based rendering of the interactive scene.

Jul 7, 2022

Loading thumbnail…

Amulya kannam

This interactive 3D bar chart visualizes the top 10 countries most affected by COVID-19, with each bar representing a country's case count. The visualization uses the d3-x3d library to render the chart in a 3D X3D scene, leveraging data loaded from a CSV file hosted on GitHub. The implementation combines d3.v5 for data parsing and chart configuration, while the d3-3d and x3dom libraries handle the three-dimensional rendering. The page includes a styled header and a chart holder div with fixed dimensions.

Jul 7, 2022

Loading thumbnail…

Amulya kannam

This example displays a single static message, “Hello HTML!”, centered on the page using large, 13em font size. The page is a minimal HTML document that relies on plain CSS for styling and JavaScript is not used. It demonstrates a bare-bones setup for a React starter project, with no interactive or data-driven elements present.

Jul 3, 2022

Loading thumbnail…

Amulya kannam

A scatter plot of the Iris dataset visualizes petal length against sepal width. The D3 scaleLinear and scaleOrdinal APIs map data to positions and colors, with each species assigned a distinct hue via the color scale. The React application uses SVG circles, rendered with a map over the data, to display each sample. Interactive tooltips show the petal length value on hover.

Jul 2, 2022

Loading thumbnail…

Amulya kannam

This visualization shows the protein content in grams for various cereals as a pie chart, with each slice colored and labeled via a legend that displays both the cereal name and its protein value. The chart is rendered in SVG using D3.js v5, where the `pie()` and `arc()` functions generate the segments, and `scaleOrdinal` assigns colors. Data is loaded asynchronously from a CSV file hosted on GitHub using `d3.csv` (via `getData.js`), then formatted with `d3.format` for the legend labels. The page title and heading are styled with red text via CSS.

Jul 2, 2022

Loading thumbnail…

Fork of Barchart of Stock yields

This horizontal bar chart displays stock yields, calculated as dividend divided by book value, for companies on the MSE in 2020. Data from `data.csv` is loaded via `d3.csv` and sorted in descending order by yield. The visualization uses a linear scale for the x-axis and a band scale for sorted company names, with axes generated by `d3.axisBottom` and `d3.axisLeft`. Rectangles are drawn in SVG with a steelblue fill, and the x-axis labels are formatted as percentages using `d3.format`.

Jun 26, 2022

Loading thumbnail…

Marks and Channels

This bar chart shows the monthly basic cost of movie streaming subscriptions across twelve countries. The visualization uses rectangular bars as marks, with vertical position encoding country and horizontal bar length encoding cost. Built with React and D3 v5, the code uses `scaleBand` and `scaleLinear` for axes, renders SVG elements, and loads data from a CSV file via `d3.csv`.

Jun 26, 2022

Loading thumbnail…

Untitled

This example shows a horizontal bar chart comparing the basic monthly cost for twelve countries, with blue bars representing costs and axes labeled with country names and numeric values. Built with React, it uses `useState` and `useEffect` to fetch and parse CSV data via `d3.csv`, then renders an SVG using `scaleBand` for the y-axis, `scaleLinear` for the x-axis, with `d3.max` computing the domain. The code includes custom tick grids and labels, and the data comes from a remote gist URL.

Jun 26, 2022

Loading thumbnail…

Fork of ICE:5 loading and parsing CSV data withD3.js

This example demonstrates how to load and parse CSV data from a URL using D3.js. The page fetches a remote CSV file with `d3.csv`, then displays a message reporting the dataset's row count, column count, and approximate size in kilobytes. The rendering uses a minimal HTML structure with basic CSS styling, including a green background and a pre-formatted message container. The implementation relies on D3.js's `csv` and `csvFormat` methods to handle the data parsing and formatting within a React-based project.

Jun 23, 2022

Loading thumbnail…

ICE:5 loading and parsing CSV data withD3.js

This example demonstrates how to load and parse CSV data from a remote URL using D3.js, then displays a summary of the dataset’s structure. It reports the number of rows, columns, and total data size in kilobytes on a green HTML page. The code relies on `d3.csv` to fetch the data, `d3.csvFormat` to calculate its size, and plain DOM manipulation via `document.getElementById` to update the message container.

Jun 23, 2022