pemmasaniprudhvinadh

@pemmasaniprudhvinadh·37 public vizzes

Fork of World Map

This example renders a natural Earth projection world map using D3 v5 and TopoJSON. It displays countries as green landmasses with black strokes against a blue spherical backdrop. The code fetches world boundary data from the world-atlas package, converts TopoJSON to GeoJSON with topojson.feature, and visualizes it using d3.geoNaturalEarth1, d3.geoPath, and SVG paths. A pre-defined sphere path establishes the globe’s outline before country features are appended.

Apr 13, 2023

Loading thumbnail…

Fork of MY Tree ICE-8

This interactive tree chart displays a family hierarchy, starting with "nellore pedda Reddy" and branching into descendants. The visualization uses a red background, with cyan nodes connected by blue links; nodes expand or collapse when clicked. The code leverages the D3.js library (version 3.5.17) with its `d3.layout.tree` and `d3.svg.diagonal` APIs to calculate the radial layout and draw curved paths. Rendered as an SVG with animated transitions, the chart updates node positions and link paths when the hierarchy structure changes.

Apr 13, 2023

Loading thumbnail…

Fork of Social_Network_graph_ICE-8

A force-directed graph displays nine cricket players as red circles with green labels, connected by black links whose thickness reflects link weight. The visualization uses D3 v4's `d3.layout.force` (with gravity, distance, and charge parameters) to position nodes, and loads node and link data from a local `graph.json` file. Users can drag nodes via `force.drag`, while the tick handler updates line coordinates and node transforms in SVG.

Apr 13, 2023

Loading thumbnail…

Fork of Mexico map

This map of Mexico uses a Mercator projection to display the country’s regions, with each region filled in red and outlined in yellow over a blue graticule grid. The visualization is built with React and D3 v6, using `d3.geoPath` and `geoMercator` to project the geography, while `topojson` converts the raw TopoJSON data into GeoJSON features. The map also shows gray for any missing data, and the overall styling is applied via CSS classes.

Apr 13, 2023

Loading thumbnail…

Fork of Pie Chart

A forked pie chart visualizes the distribution of new COVID-19 tests across geographic locations, using a D3 v5 pie layout with an SVG rendering. The chart shows the top 10 locations by test count, with each slice’s fill color and legend labels derived from the `d3.scaleOrdinal` and `d3.schemeCategory10` palette. Data is loaded from a CSV via `d3.csv`, sorted descending, and rendered with `d3.pie` and `d3.arc`; hover events log values to the console, and legends display each location’s name and test total. The React-based example is presented in an HTML page with custom CSS styling.

Apr 10, 2023

Loading thumbnail…

Location Vs new_cases

This stacked bar chart visualizes the distribution of new COVID-19 cases across locations, with each bar segmented by ISO code. The chart uses D3.js for rendering, including d3.layout.stack for stacking, d3.scale.ordinal for the y-axis, and d3.legend for the color legend. Hovering over a bar displays tooltips via d3-tip, while hovering over legend entries highlights corresponding regions by fading non-selected bars. Data comes from the Global Religious Landscape dataset, though the title and columns suggest COVID-19 case counts, rendered as an SVG animation.

Apr 10, 2023

Loading thumbnail…

Fork of Stylized Bar Chart

This horizontal bar chart ranks the ten most populous countries, comparing their 2020 populations. The chart uses a green fill for bars and muted gray for tick labels and lines, with a tooltip displaying the formatted value on hover. Built with React and D3 v5, it renders as SVG, using `scaleBand`, `scaleLinear`, and `max`. The data comes from a CSV file processed via `csv`. Custom axis components generate ticks, while the Poppins font styles the text.

Apr 10, 2023

Loading thumbnail…

Fork of Stylized Bar Chart

This visualization displays the top 10 most populous countries as horizontal bars, using data from the United Nations World Population Prospects 2019. React components render an SVG chart, with d3.scaleBand and d3.scaleLinear mapping countries to populations, while d3.csv loads the data. The bars are colored teal with axis ticks styled in gray, and hover tooltips show formatted population values using d3.format.

Apr 10, 2023

Loading thumbnail…

Fork of ICE-7 Area Chart

This example shows the cost of sales from 2000 to 2013 using a smooth area chart rendered with SVG. The code uses D3 v5 functions including `scaleTime`, `scaleLinear`, `line`, `area`, and `curveBasis` to draw a yellow-filled area with a thick black stroke, overlaid on a grid with labeled axes. Data is loaded from a CSV via `csv` and parsed into dates and numbers. The chart is built in a React-compatible structure, with margins and axis labels positioned manually.

Apr 10, 2023

Loading thumbnail…

Fork of Student Scores Bar Chart

This bar chart visualizes student scores as horizontal bars, with each bar’s length representing a score value. The chart is rendered as an SVG using D3 v5, employing `scaleLinear` for the x-axis and `scaleBand` for the categorical y-axis. It loads data from a CSV file and applies an axis layout. The bars are styled purple and become semi-transparent on hover via CSS.

Apr 10, 2023

Loading thumbnail…

cardiovascualr_death vs positive_rate

This scatterplot visualizes the relationship between cardiovascular death rate and COVID-19 positive rate across countries, with each point representing a country. The visualization uses React to render SVG circles positioned by d3.scaleLinear axes, with tooltips showing formatted values via d3.format. Data is loaded from a CSV using d3.csv, and the chart includes labeled axes for both quantitative variables.

Apr 10, 2023

Loading thumbnail…

Fork of Fork of Fork of Fork of ICE-6 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length and width on the x- and y-axes while encoding species with blue, yellow, and red circles. The code uses D3 v6 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load and render the data as SVG. Circles also store sepal measurements as `rx` and `ry` attributes, though these do not affect the visual display. Axes are labeled in red, and the plot fills the entire browser window with a hidden page margin.

Apr 10, 2023

Loading thumbnail…

Fork of Line_Stroke_Death

This chart displays the relationship between female smoking rates and life expectancy, with each country plotted as a point. The data is sourced from a gist and visualized as a line chart using D3 v5's `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with a `curveBasis` smoothing. The SVG rendering uses a thick orange stroke for the path, and includes labeled axes and a title. The chart is generated from CSV data loaded via the `csv` function.

Apr 10, 2023

Loading thumbnail…

Fork of vaccines

This stacked bar chart displays the estimated 2010 religious breakdown of the world's 20 most populous countries, with each bar segment representing a religion. Hovering over a bar shows a tooltip with the exact percentage for that country and religion, while hovering over the legend highlights the corresponding segments. The chart uses D3 v3 with `d3.layout.stack` for stacking, `d3.svg.axis` for scales, and `d3-tip` for tooltips. The legend is rendered with `d3.legend.color`, and an overlay rectangle dims non-highlighted bars. Data originates from a Pew Research study on the global religious landscape.

Apr 10, 2023

Loading thumbnail…

vaccines

This stacked bar chart displays the estimated 2010 religious breakdown of the 20 most populous countries, using horizontal bars with each country’s total tests on the x-axis and location on the y-axis, colored by ISO code. The visualization uses D3 v3 with d3.layout.stack to compute layer offsets, d3.svg.axis for ticks, and d3.legend for a color legend. Hovering over a bar shows a tooltip via d3-tip, while hovering over the legend highlights only that religion’s bars by overlaying a semi-transparent rectangle. Data originates from Pew Research’s Global Religious Landscape, processed through a custom script.

Apr 10, 2023

Loading thumbnail…

cardiovascular_rate in each country)

This visualization displays cardiovascular death rates across countries, with each location mapped along the y-axis and the corresponding mortality rate on the x-axis. Each country appears as a semi-transparent circle, and hovering reveals the country name via tooltip. The chart uses Vega-Lite with the vega-lite-api library, rendering through D3.js v5 and Vega. Data is loaded from a CSV file containing COVID-19 and cardiovascular statistics, and the visualization adapts to the viewport size.

Apr 10, 2023

Loading thumbnail…

life_expectancy vs new_vaccinations

This scatter plot visualizes the relationship between life expectancy and new vaccinations, with each circle colored according to a species category using yellow, green, or brown. The visualization loads CSV data from a GitHub gist and renders circles as SVG elements using d3.scaleLinear, d3.extent, d3.axisLeft, d3.axisBottom, and d3.select. Axis labels and a title are added as text elements, while the circles use both radius and rx/ry attributes for sizing. The chart is built with D3 v5 within a plain HTML page, using window dimensions for responsive sizing.

Apr 10, 2023

Loading thumbnail…

Fork of Bar graph-task1

This example visualizes global COVID-19 testing data by continent, displaying new test counts as horizontal bars. The visualization uses D3 v5 and React to render an SVG bar chart, with D3's `scaleBand` and `scaleLinear` mapping continent names and test values to screen coordinates. Axes are drawn manually using D3's `axisBottom` and `axisLeft` components. The bar chart loads data from a CSV file using D3's `csv` function, filtering to show the first twelve records. A second, unused 3D scatter plot with Plotly is also present in the code, though it is not rendered in the final output.

Apr 10, 2023

Loading thumbnail…

Fork of Pie Chart

This visualization displays life expectancy across continents using a pie chart, with legend labels showing each continent and its corresponding value. The code loads CSV data from a GitHub gist, sorts it, and renders the top 10 entries using D3 v5. The chart uses `d3.pie()` and `d3.arc()` for segment generation, `d3.scaleOrdinal` with `schemeCategory10` for colors, and SVG paths rendered in a React environment. Interactive mouseover events log data to the console, while the legend is positioned separately and styled with CSS classes.

Apr 10, 2023

Loading thumbnail…

Video Game Sales

This example shows regional video game sales as a 3D multi-series bar chart, comparing North America, Japan, and global sales across the top-selling titles. The visualization uses the `d3.x3d` library to render the bars in an X3D scene, with `d3.csv` loading the dataset and a custom row parser structuring the data for the chart. The chart is created by calling `d3.x3d.chart.barChartMultiSeries()`, and the code updates the displayed data using D3’s selection and `datum` methods.

Apr 5, 2023

Loading thumbnail…

Fork of BONUS 1: 3D Scatter Plot

This 3D scatter plot visualizes video game sales data, showing the relationship between North American, European, and other regional sales as points in three-dimensional space. Each marker represents a game, with its position determined by the sales figures on the x, y, and z axes. The visualization uses Plotly's `Plotly.newPlot` method and `scatter3d` trace type, while D3.js is employed to load and parse the CSV data from a GitHub Gist. The layout configures axis titles with green font styling, and markers are rendered as translucent circles with red color and borders.

Apr 5, 2023

Loading thumbnail…

Fork of ICE-7 Fork of Area Chart

This area chart displays CO2 emission values from 1960 to 1973, with years on the x-axis and emission values on the y-axis. The visualization combines a smooth line and a filled pink area beneath it, using D3 v5’s `scaleTime`, `scaleLinear`, and `area` generator with `curveBasis`. Data is loaded from a CSV via `d3.csv` and rendered as an SVG with styled axes, tick marks, and axis labels. The example demonstrates importing D3 modules locally and via UNPKG.

Mar 30, 2023

Loading thumbnail…

Fork of Fork of Fork of ICE7 Pie Chart

A pie chart displays the total runs scored by eight prominent cricketers, highlighting the dominance of Sachin Tendulkar with 53,378 runs relative to others. The visualization loads data from a JSON file and uses D3 v5’s `pie` and `arc` generators to create SVG paths, with `scaleOrdinal` and `schemeCategory10` assigning colors to each segment. A legend on the right maps each player’s name and formatted run total using `format`, while arcs are rendered without inner radius. The chart emphasizes comparative performance through proportional slice areas.

Mar 30, 2023

Loading thumbnail…

Fork of Fork of Fork of ICE7 Pie Chart

This chart shows a pie visualization of cricket players' run totals, with a legend listing each player's name and their corresponding runs alongside a color-coded swatch. The chart reads total runs from a local JSON file and renders the pie slices using `d3.pie` and `d3.arc`, while a categorical color scale from `d3.scaleOrdinal` with the `schemeCategory10` range fills each segment. The SVG also includes a manually positioned legend built with `d3.select` and appended `rect` and `text` elements.

Mar 30, 2023

Loading thumbnail…

Fork of D3.js Line Chart

This line chart visualizes customer counts per year from 2000 to 2010 using data loaded from a CSV file. The SVG rendering employs D3.js v7 with a band scale for the x-axis and a linear scale for the y-axis, with axes generated via d3.axisBottom and d3.axisLeft. The line path is drawn using d3.line() with half-bandwidth offsets to align points with categorical year labels. Axis labels “Year” and “customers” are added as SVG text elements, while the chart is styled with steelblue strokes and thick axis text.

Mar 30, 2023

Loading thumbnail…

Fork of Pie Chart

This visualization shows the basic cost of Netflix subscriptions in ten countries, displayed as a pie chart with a legend listing each country and its corresponding price. The chart uses D3 v5 APIs including `pie`, `arc`, `scaleOrdinal`, and `schemeCategory10` to generate the segments and colors. Data is loaded from a CSV file via `csv()` and rendered as SVG. The legend is built with appended rectangles and text elements, formatting prices with a custom number formatter.

Mar 30, 2023

Loading thumbnail…

Fork of Fork of Scatter Plot with Color

This scatter plot visualizes the Iris Dataset, showing petal length on the x-axis and sepal width on the y-axis, with each of the three iris species colored distinctly via a d3.scaleOrdinal. The visualization is built with React and D3 v5, using d3.scaleLinear for axes and SVG circles for marks. Data is loaded asynchronously from a CSV file using d3.csv, with axes rendered by custom React components that call d3 scale methods like ticks for positioning grid lines and labels.

Mar 30, 2023

Loading thumbnail…

Fork of Scatter Plot with Color

This example shows the Iris Dataset as a scatter plot with colored points representing different species. The visualization maps petal length to the x-axis and sepal width to the y-axis, using a categorical color scale to distinguish species. Built with React and D3 v5, it uses scaleLinear for axes, scaleOrdinal for colors, and renders circles as SVG marks. Tooltips display x-axis values formatted with D3's format function. Data is loaded asynchronously from a CSV via useData, with axis labels and styling defined in an SVG canvas.

Mar 30, 2023

Loading thumbnail…

Fork of Fork of Fork of Videogame sales (Platform v/s Global Sales)

This scatterplot shows the relationship between video game platforms and their global sales figures, with each circle representing a game and its position indicating sales volume. The visualization reveals that most games cluster at lower sales levels, with a few notable outliers achieving significantly higher sales. The chart uses Vega-Lite's API through the vega-lite-api library, configuring circle marks with opacity for overlapping points. Data comes from a CSV file loaded via d3.csv, and the visualization renders as an SVG using Vega's renderer with custom styling for improved readability.

Mar 23, 2023

Loading thumbnail…

Fork of Fork of Videogame sales (Platform v/s Global Sales)

This visualization displays global sales for individual video games across different platforms, with each circle representing a game and its position showing sales volume. The chart reveals that most games sell similarly across platforms, though notable outliers exist with significantly higher sales. Built with Vega-Lite and d3.v5, the visualization loads data from a CSV file containing games with sales exceeding 100,000 copies, using circular marks with encoded x-axis for quantitative sales values and categorical platform labels on the y-axis.

Mar 23, 2023

Loading thumbnail…

Fork of Videogame sales (Platform v/s Global Sales)

This visualization plots global sales of video games against gaming platforms using a circular scatterplot. Each circle’s position encodes the platform on the y-axis and the game’s global sales on the x-axis, with opacity used to show overlapping points. The chart uses Vega-Lite and the vega-lite-api to construct the markCircle encoding, while d3.csv loads the Videogame Sales dataset from a GitHub gist. Tooltips display game names on hover. The visualization is rendered as an SVG, with config.js customizing axes and text styling.

Mar 23, 2023

Loading thumbnail…

Fork of Videogame sales (Platform v/s Global Sales)

A circular scatterplot charts global video game sales for each platform using the Vega-Lite API with d3.csv loading the gist-hosted dataset. Each circle encodes a game’s total global sales along the x-axis, grouped by platform on the y-axis, with tooltips revealing the game title. The visualization reveals that most platforms show similar sales distributions, with occasional high-selling outliers. The code configures axes, font sizes, and colors through a custom config object, while the plot itself uses a markCircle encoding with transparent fill and adjusted scales to emphasize the outlier patterns.

Mar 23, 2023

Loading thumbnail…

Fork of Video Game Publishers by Genre

This fork of a video game sales dataset visualizes publisher success across genres through small multiples of scatterplots, mapping mean global sales on the y-axis against variance on the x-axis to reveal consistency of developer performance. Hovering a dot reveals the publisher name, though clusters can make identification difficult. The code uses Observable Plot’s `plot` and `Plot.dot` within a faceted layout, filtering outliers by computing the mean and variance of variances and applying a 75% z-score cutoff. Data is loaded via `d3.csv` with `autoType`, and aggregations use `d3.rollup`, `d3.mean`, and `d3.variance`.

Mar 23, 2023

Loading thumbnail…

Fork of Videogame sales (Platform v/s Global Sales)

This visualization uses a bar chart to compare global video game sales across different platforms, revealing that most platforms achieve similar sales totals with a few notable outliers. The chart is built with D3.js and Vega-Lite, loading data from a CSV hosted on GitHub. The code configures the visualization with the `vl.drawBar` API, encodes platform on the y-axis and global sales on the x-axis, and uses a tooltip to display individual game names.

Mar 23, 2023

Loading thumbnail…

Fork of Fork of Fork of ICE-6 Bar Graph

This bar chart shows North American sales for the top 12 video game genres, with each genre plotted along the vertical axis and sales values on the horizontal axis. The visualization uses React hooks for state management and D3 v5’s `csv` loader to fetch data from a GitHub gist, then renders the bars as SVG rectangles scaled by `scaleLinear` and `scaleBand`. Gridlines and axis labels are generated manually using D3’s `ticks()` method. The graph includes a title and red vertical gridlines for readability.

Mar 23, 2023

Loading thumbnail…

ICE_5_ASSIGNMENT

This example presents an interactive world map rendered with SVG, allowing users to zoom and pan across a natural Earth projection. It shows country boundaries with hover highlighting, using a dark blue ocean and light green landmasses. The map is built with D3 v7 and TopoJSON, using `d3.geoPath` and `geoNaturalEarth1` for geographic projection. A CSV file from Walmart is loaded via `d3.csv` to display file size, row, and column counts in a text overlay. The zoom behavior is implemented with D3's `zoom` function.

Mar 9, 2023

Loading thumbnail…

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

Overlapping Buddha is a generative art piece that layers hundreds of semi-transparent SVG circles onto a complex, multi-segmented path tracing the Buddha’s silhouette. The circles are mapped across a 20×20×20 nested grid, with their positions and colors randomized, creating a shimmering, dense pointillist texture against a blue background. This React application renders the composition using the ReactDOM API for SVG output, while the Buddha path is defined by raw path data.

Mar 2, 2023