D

Dipesh

@Shrestha-Dipesh·17 public vizzes

Loading thumbnail…

Carbon Emissions of Top 10 Highest GDP Countries

This scatter plot displays the relationship between GDP and CO2 emissions for the ten highest-GDP countries, with each circle colored by country and hover interactions revealing a tooltip with exact values. The visualization uses D3 v7 to load CSV data from a GitHub repository, applies linear scales to map GDP (in trillions) and CO2 emissions, and renders the axes and circles as SVG elements. Tooltip transitions and ordinal color scaling are implemented via d3.scaleOrdinal, and the data is parsed using regex to extract numeric values from formatted strings.

Loading thumbnail…

Q2. A2.

This area chart visualizes population change in China over time, highlighting the overall upward trend in population numbers. The visualization loads data from a CSV file, filters it to only China, and maps years to the x-axis while population values are plotted on the y-axis. Built with d3.v7, the chart uses `d3.scaleBand` and `d3.scaleLinear` for axes, and renders the populated area as a filled SVG path using `d3.area`. The chart includes rotated x-axis labels and axis titles for clarity.

Loading thumbnail…

Q1. A1.

This example shows the top five countries by population in 2020 as a pie chart with a color-coded legend, using data from a CSV file loaded via `d3.csv`. The pie slices are generated with `d3.pie` and `d3.arc`, colored by `d3.schemeCategory10`, and rendered as SVG paths. A legend, built with appended `rect` and `text` elements, maps each country to its slice color.

Loading thumbnail…

Fork of Fork of Hello VizHub

This scatter plot visualizes the relationship between total tax rate and CO2 emissions for the top ten countries with the highest tax rates, using data from a GitHub-hosted CSV file. It renders an SVG chart with D3 v7, employing `d3.csv` to load the data, `d3.scaleLinear` for both axes, and `d3.axisBottom` and `d3.axisLeft` to draw the axes. Steel-blue circles mark each country, with text labels positioned adjacent to each point. The x-axis and y-axis are labeled “Total Tax Rate (%)” and “CO2 Emissions (kt)” respectively, providing a clear comparison of the two metrics.

Loading thumbnail…

Practice

This scatterplot compares carbon dioxide emissions with tax rates for the top ten countries with the highest tax rates, with the data sourced from a GitHub-hosted CSV file. Each steelblue circle represents a country, positioned by its CO2 emissions on the x-axis and its tax rate on the y-axis. Built with d3.v7, the visualization uses `d3.csv` for data loading, `d3.scaleLinear` for axes, and SVG circles for rendering, with axis labels added via `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

Task_8_Q4

This bubble chart displays the population of the first ten countries from a CSV dataset, with each circle’s position on the x-axis representing the country and the y-axis showing population value, while the radius and color encode the same population figure and the country’s numeric code, respectively. A categorical color legend maps country codes to distinct hues. Built with D3 v7, the visualization uses `d3.csv` for loading data, `scaleBand` and `scaleLinear` for axes, `scaleSqrt` for circle size, and `scaleOrdinal` with `d3.schemeCategory10` for coloring. SVG rendering includes rotated country labels on the bottom axis, a left population axis, chart titles, and a custom legend.

Loading thumbnail…

Activity 6_Task 4

This visualization presents a bubble chart showing the correlation between average horsepower, average torque, and highway MPG for various car makes. Each bubble’s position reflects its horsepower on the x-axis and torque on the y-axis, while its radius encodes highway MPG. The chart includes color-coded bubbles by car make, a tooltip displaying the make on hover, and a legend for bubble sizes. Built with D3 v7 (d3.csv, d3.scaleLinear, d3.axisBottom, d3.axisLeft), it uses SVG rendering with interactive mouse events for tooltips and a turbo color scale for aesthetics.

Loading thumbnail…

Task_8_Q3

This scatter plot visualizes the relationship between customer age and family size, with points colored by gender (blue for male, red for female) from the onlinefoods dataset. The D3.js v7 code uses `d3.csv` to load remote data, `d3.scaleLinear` for both axes, and `d3.scaleOrdinal` for gender-based coloring. Circles with 0.7 opacity are positioned via `cx` and `cy` attributes, while `d3.axisBottom` and `d3.axisLeft` generate the axes, and a manual legend with circles and text labels appears in the lower right of the SVG canvas.

Loading thumbnail…

Activity 6_Task 3.2

This example displays a scatter plot of the Iris dataset, showing sepal length against petal length. Each point’s symbol (circle, triangle, or square) encodes the iris species, and a legend identifies these shapes. The visualization uses D3 v7 with `scaleLinear`, `scaleOrdinal`, and `symbol` to render marks, plus custom axis and legend modules. It loads the CSV data from GitHub, scales numeric fields on load, and renders interactively in the browser window.

Loading thumbnail…

Activity 6_Task 3.2

This scatter plot visualizes the Iris dataset, mapping petal length and petal width on the x- and y-axes while coloring each point by species (setosa, versicolor, virginica) in skyblue, lightgreen, or orange. The SVG rendering uses D3 v6’s `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data, scale positions, and draw axes. Additional numeric values for sepal length and width are stored as `rx` and `ry` attributes on each circle, though the visible radius is fixed. The plot’s size adapts to the browser window using `window.innerWidth` and `window.innerHeight`.

Loading thumbnail…

Activity 6_Task 3

This scatter plot visualizes the Iris dataset, showing petal length against petal width, with points colored by species: setosa, versicolor, and virginica. The visualization uses D3 v6 to load CSV data and render circles on an SVG canvas, with axis labels for petal length and sepal length. Axes are generated using `d3.axisLeft` and `d3.axisBottom`, while the data is scaled with `d3.scaleLinear` and `d3.extent`. The plot is built entirely with D3 selections, appending circles and text elements directly to the SVG.

Loading thumbnail…

Task_8_Q2

A stacked bar chart displays population totals for ten countries across six years, from 2015 to 2020, using data from a CSV file. Each bar is segmented by year, with colors from `d3.schemeCategory10` and a legend indicating the year mapping. The chart uses `d3.stack()` to compute the stacked series, `d3.scaleBand` for the categorical x-axis, and `d3.scaleLinear` for the y-axis, rendering with SVG rectangles.

Loading thumbnail…

Activity 6_Task 2

This stacked bar chart visualizes the percentage distribution of IMDb movie ratings across six genres, showing how genre influences rating outcomes. Each bar represents a genre and is divided into five rating categories, from below 5.0 to above 8.5, with tooltips revealing exact percentages on hover. The visualization uses d3.stack to structure the data, d3.scaleBand for the y-axis, and d3.scaleLinear for the x-axis, rendering SVG rectangles. Data comes from the embedded CSV file, and d3.format displays percentage values with two decimal places.

Loading thumbnail…

Task_8_Q1.2

A bar chart displays the population of 20 countries in 2010, sorted by country name along the y-axis and population magnitude along the x-axis. The chart uses React and D3 v5, with `scaleBand` and `scaleLinear` for ordinal and numeric axes, respectively. Data is loaded as CSV from a GitHub repository using `d3.csv`, and values are formatted with `d3.format`. Marks are rendered as SVG rectangles, with tooltips showing population values in a compact, abbreviated format. Axis ticks and labels are styled via custom React components.

Loading thumbnail…

Task_8_Q1.1

This bar chart displays the population of ten countries in the year 2000, using horizontal bars sorted by country name. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Population values are parsed from a CSV file and formatted with D3's `format` function, converting values to billions. The chart includes custom axis components and uses SVG rectangles with tooltips showing the precise population for each country.

Loading thumbnail…

Activity 6_Task 1

A horizontal bar chart displays the 2020 populations of 30 countries, with each bar labeled by country name and the x-axis formatted in billions using D3's `format` function. The visualization is built with React components and D3 v5 scales, using `scaleBand` for the categorical y-axis and `scaleLinear` for the population values. SVG rectangles render the bars, and native `<title>` elements provide tooltips showing the formatted population figures. Data is loaded via `d3.csv` from a GitHub-hosted CSV file, with the population values multiplied by 1,000 during preprocessing.

Loading thumbnail…

5 Buddhas

5 Buddhas is a generative art piece built with React and SVG that layers hundreds of semi-transparent, randomly colored polygons over a large central Buddha path. The polygons are generated through triple-nested loops, with randomized positions and hues that produce a chaotic, sparkling backdrop, while the Buddha figure anchors the composition. A black background heightens the contrast of the neon-like colors and the rotating diamond shapes, creating a hypnotic, glitch-inspired visual experience.