Skip to main content
Log in
A

amarnadhkari98@gmail.com

@iamamar3·20 public vizzes

Loading thumbnail…

Activity7_2

This example visualizes the market share of smartphone companies in 2024 with a blue area chart. The chart uses a band scale for company names on the x-axis and a linear scale for percentages on the y-axis, with the area generated through `area()` and rendered as SVG. Data is loaded from a CSV file via `csv()`, and axes are created using `axisBottom` and `axisLeft`. The visualization demonstrates importing D3 v7 functions through ES6 modules.

Nov 8, 2024
Loading thumbnail…

Activity7_2

This example visualizes the market share of smartphone companies in 2024 with a blue area chart. The chart uses a band scale for company names on the x-axis and a linear scale for percentages on the y-axis, with the area generated through `area()` and rendered as SVG. Data is loaded from a CSV file via `csv()`, and axes are created using `axisBottom` and `axisLeft`. The visualization demonstrates importing D3 v7 functions through ES6 modules.

Nov 8, 2024
Loading thumbnail…

Activity7_1

This example displays fruit sales distribution across four regions in a pie chart, with each slice labeled to show the regional values and a legend identifying the color mapping. The visualization is rendered as an SVG using D3 v7, where the pie chart is generated from CSV data loaded via the `d3.csv` function, and slices are drawn with the `d3.pie` and `d3.arc` methods. The code also uses D3's selection and join operations to append paths and text elements, with custom styling for the title, axis-like labels, and legend.

Nov 8, 2024
Loading thumbnail…

Activity7_1

This pie chart visualizes fruit sales distribution across four regions: North, South, East, and West. The visualization loads CSV data from a GitHub gist and uses D3.js v7's `csv`, `pie`, and `arc` generators to compute and render the SVG paths. Each slice is colored via a categorical color array and labeled with its region and value, with additional title, axis-style labels, and a legend legend positioned around the chart.

Nov 8, 2024
Loading thumbnail…

Activity6_Task3_Qus6

This scatter plot displays the relationship between fruit weight and sweetness for ten fruit types. Each circle represents a fruit, positioned by weight on the x-axis and sweetness on the y-axis, with color assigned via the `d3.scaleOrdinal` scale, though all points share the category "fruit." Rendered as an SVG using D3 v6, the code loads data from a CSV file via `d3.csv`, scales axes with `d3.scaleLinear` and `d3.extent`, and draws axis ticks with `d3.axisBottom` and `d3.axisLeft`. The plot sizes itself to the browser window.

Oct 25, 2024
Loading thumbnail…

Activity6_Task3_Qus6

This D3.js v6 scatter plot visualizes the relationship between fruit weight (in grams) and sweetness rating (1-10) using data from a CSV file. Each fruit is represented as a circle positioned along the x-axis for weight and y-axis for sweetness, with all points colored pink via a color scale. The visualization uses D3's `csv` loader, `scaleLinear` for axes, `extent` to compute domains, and `axisBottom`/`axisLeft` to render the chart. The SVG output includes labeled axes for weight and sweetness, with the plot sized to fill the browser window.

Oct 25, 2024
Loading thumbnail…

Fork of scatter plot with shape

This example visualizes the classic iris dataset as a scatter plot, mapping sepal length to the x-axis and petal length to the y-axis, with overlaid shape-based categorization for the three iris species. A custom legend with distinct symbol shapes identifies the species. The visualization is built using D3 v7, leveraging its `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `symbol` APIs for coordinate mapping and shape generation, with axes and labels added via `axisLeft` and `axisBottom`. Data is fetched and parsed from a remote CSV file using D3’s `csvParse`.

Oct 25, 2024
Loading thumbnail…

scatter plot with shape

This example uses a scatter plot to visualize the Iris dataset, displaying sepal length against petal length. Points are color-coded, with distinct shapes distinguishing the three Iris species, supported by a legend for reference. Built with D3 v7, the visualization uses the `select()` and `join()` APIs to efficiently manage SVG elements, while `scaleLinear` and `scaleOrdinal` handle positional and shape encodings. The chart loads data from a remote CSV file and includes axis labels and tick marks for readability.

Oct 25, 2024
Loading thumbnail…

Activity6_Task3

This scatter plot displays the Iris dataset, using petal length and petal width to position each flower, with colors distinguishing the three species (setosa, versicolor, and virginica). Additional sepal measurements are encoded as circle radii, though the visual range of this encoding is limited. The visualization is built with D3 v6, loading CSV data from a remote URL, and rendering SVG circles scaled via `scaleLinear` with axes generated by `axisLeft` and `axisBottom`. The code explicitly assigns circle attributes for position, fill color, and radius, and labels the axes for petal and sepal dimensions.

Oct 25, 2024
Loading thumbnail…

Activity6_Task3

This visualization displays the Iris dataset as a scatter plot, mapping petal length on the x-axis and petal width on the y-axis while coloring each point by species. Using D3 v6, it loads CSV data via `d3.csv`, applies `scaleLinear` for both axes, and renders circles with `d3.selectAll` and `.join`. Axis labels are added via `axisLeft` and `axisBottom`, with rotated text for the vertical label. Despite naming variables for sepal length and width, only petal dimensions are plotted, while species hues are hardcoded for setosa, versicolor, and virginica.

Oct 25, 2024
Loading thumbnail…

Activity6_Task4_Qus4

This bubble chart visualizes the correlation between GDP per capita, population, and life expectancy across ten countries using D3 v7’s `d3.csv`, `d3.scaleLinear`, and `d3.scaleOrdinal` APIs. Bubbles are positioned by GDP (x-axis) and life expectancy (y-axis), with radius encoding population and color assigned per country. Animated SVG circles support interactive tooltips on mouseover and mouseleave events, revealing detailed numeric values for each nation. The visualization reads from the included `countries.csv` dataset and renders entirely in the browser via SVG.

Oct 25, 2024
Loading thumbnail…

Activity6_Task4

This visualization shows the relationship between GDP per capita, life expectancy, and population for ten countries. Each bubble’s x and y positions represent GDP and life expectancy, while the bubble radius encodes population size, with a categorical color scale distinguishing countries. Using D3 v7, the code loads data from a CSV file, scales values with `d3.scaleLinear`, renders SVG circles, and adds interactive tooltips that display country-specific details on mouseover. Axis labels and a title clarify the chart’s context, and the animation of tooltip transitions enhances user exploration.

Oct 25, 2024
Loading thumbnail…

Activity6_Task2_Qus3

This stacked bar chart displays the percentage of fruit sales across four regions: North, South, East, and West, with each bar representing a fruit type and colored segments showing regional proportions. Hovering over a segment reveals a tooltip with the exact percentage for that fruit-region combination. Built with D3 v7, the visualization uses `d3.stack()` to compute the stacked segments, `d3.scaleBand()` for the categorical y-axis, and `d3.scaleLinear()` for the percentage x-axis. The data comes from the embedded `sales.csv` file, and the SVG output includes a legend and axis labels.

Oct 25, 2024
Loading thumbnail…

Activity6_Task2

This stacked bar chart visualizes the distribution of sales percentages across four regions for five fruit products, using data from a CSV file. Each horizontal bar is segmented by region, with colors corresponding to a categorical color scale, and the x-axis measures percentage from 0 to 1. The visualization uses `d3.axisBottom`, `d3.axisLeft`, and `d3.scaleOrdinal` to render the axes and color encoding. Hovering over a segment triggers a tooltip that displays the precise sales percentage for that fruit and region, calculated via `d3.format`. The chart is rendered as an SVG using D3 v7.

Oct 25, 2024
Loading thumbnail…

Activity6_Task1_Qus1

This example displays a horizontal bar chart comparing the populations of ten countries in 2010. Using React with D3 v5, it loads CSV data from GitHub and renders SVG bar marks via the `Marks` component. The `scaleBand` and `scaleLinear` functions map country names and population values, while `AxisBottom` and `AxisLeft` generate the axes. The chart formats population tick labels using `format('.2s')` to replace G with B. A loading state shows "Loading..." until the CSV is fetched and processed.

Oct 25, 2024
Loading thumbnail…

Activity6_Task1_Qus2

This example shows a horizontal bar chart of population figures for 20 countries in 2010, drawn as SVG rectangles scaled by population value. The chart uses React with D3 v5, employing `scaleBand` for the categorical country axis, `scaleLinear` for the population axis, and custom `AxisBottom` and `AxisLeft` components to render ticks. Data is loaded asynchronously via `d3.csv` from a GitHub-hosted CSV file. Population values are formatted with D3’s `format` function, converting large numbers into abbreviated labels like “1.2B,” and hover tooltips display the same formatted values.

Oct 25, 2024
Loading thumbnail…

Activity6_Task1_Qus2

This horizontal bar chart displays the population of the top 20 countries for the year 2010, using D3.js v5 within a React framework and rendering via SVG. The visualization is built with `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, with bars drawn as SVG rectangles. Population values are loaded from a CSV file using D3's `csv` function, formatted with `d3.format` to abbreviate large numbers (e.g., 'B' for billions), and include interactive tooltips showing the formatted population on hover. The chart includes styled blue tick marks and green bars, with axes labeled accordingly.

Oct 25, 2024
Loading thumbnail…

Activity6_Task1

This visualization displays population data for ten countries in the year 2000 using a horizontal bar chart rendered as SVG. The chart ranks countries from top to bottom by population, with green bars sized linearly to population values and formatted axis labels converting large numbers to billions. The React app loads CSV data from a GitHub repository using d3.csv, then applies d3.scaleBand for the categorical y-axis and d3.scaleLinear for the numeric x-axis. Tooltips on each bar show the exact population value via SVG title elements.

Oct 25, 2024
Loading thumbnail…

Activity6_Task1

A horizontal bar chart displays the 2020 population for 30 countries, with bars sorted by country name and labeled with a bottom axis using D3's `scaleBand` and `scaleLinear`. The chart is rendered as SVG within a React component, using D3's `format` to abbreviate tick labels (e.g., converting "G" to "B" for billions). Hovering over each bar reveals the exact population value via an SVG `<title>` tooltip. The data is loaded from a remote CSV file using D3's `csv` function.

Oct 22, 2024
Loading thumbnail…

5 Buddhas

A grid of overlapping diamond shapes renders in vivid, randomized colors against a black background, creating a kaleidoscopic pattern inspired by five Buddha forms. The React application uses SVG `<polygon>` elements generated through nested array mappings, with each point determined by `Math.random()` and `Math.random(a)` to produce irregular geometry. A large embedded SVG path representing a Buddha figure is layered on top, transformed with a `translate` and `scale`. The visualization combines procedural shape generation with a structured iconographic element, built entirely with React and ReactDOM rendering to SVG.

Oct 18, 2024