Bibek Lamsal

@killerbeelsl·10 public vizzes

iris_pie_chart

This pie chart shows the distribution of the three Iris flower classes in the dataset, with each slice labeled by class name and count. It also includes a second visualization, an area chart of sepal length versus sepal width, created from the same Iris dataset. The pie chart uses `d3.pie` for the arc layout, `d3.arc` for path generation, and `d3.scaleOrdinal` with `d3.schemeCategory10` for coloring. Data is loaded via `d3.csv` from two remote CSV sources, and the chart is rendered as SVG.

Apr 29, 2024

Loading thumbnail…

Final Project

This visualization displays seven bar and scatter plots comparing countries by education enrollment, minimum wage, GDP, and labor force participation, with each figure highlighting factors like tertiary education rates or primary enrollment levels. Built with D3 v7, the charts load CSV data and render SVG elements including axes, bars, circles, legends, and hover interactions that change element colors. The scatter plot encodes labor force participation through circle radius, while bar charts use color-coded categories with underlined titles for each figure.

Apr 26, 2024

Loading thumbnail…

activity6-4

This interactive bubble chart visualizes the Iris dataset, plotting sepal length and width for three flower species, with bubble size encoding petal length and color distinguishing species. D3.js v7 handles data loading via `d3.csv`, scales with `d3.scaleLinear` and `d3.scaleOrdinal`, and renders SVG circles. Hover interactions trigger tooltips showing species and measurement details. A categorical legend identifies species by color.

Apr 17, 2024

Loading thumbnail…

Activity6-3.1

This example shows a scatter plot of penguin measurements, plotting flipper length against culmen length with different symbols for each species. The visualization uses d3.scaleLinear for the x and y axes, d3.scaleOrdinal with symbolsFill to encode species via shape, and custom shape legend rendering. Data is loaded from a CSV file using d3.csvParse and displayed using d3 selection joins with path elements for marks. The axes are generated with d3.axisLeft and d3.axisBottom.

Apr 17, 2024

Loading thumbnail…

Activity6-3.1

This scatter plot visualizes the Iris dataset, plotting sepal length against petal length, with points colored and shaped according to species. The visualization uses D3 v7's `scaleLinear` for axes, `scaleOrdinal` with `symbolsFill` for categorical shapes, and a custom legend to map species to distinct symbols. Data is loaded asynchronously from a remote CSV file using `csvParse`, and the axes and legend are rendered via reusable D3 modules.

Apr 17, 2024

Loading thumbnail…

Activity6-3

This visualization displays the Iris dataset as a scatter plot, mapping petal length to the x-axis and petal width to the y-axis, with points colored by species. It uses D3 v6 to load CSV data, create linear scales, and render SVG circles with axes. The code also calculates redundant sepal measurements but does not display them in the plot.

Apr 17, 2024

Loading thumbnail…

actvity6-2

A stacked horizontal bar chart shows the percentage of population in three age brackets—14 years and below, 15 to 64 years, and 65 years and above—across seven global regions. The SVG is built with D3 v7, using `d3.stack()` to compute the stacked segments, `d3.scaleLinear()` and `d3.scaleBand()` for positioning, and `d3.scaleOrdinal()` to assign categorical colors. Interactive tooltips reveal exact percentages on hover. Data comes from a CSV file, with axes labeled and a title displayed above the chart.

Apr 17, 2024

Loading thumbnail…

Activity6

A horizontal bar chart displays the population of the top 20 countries in 2010, with countries listed on the y-axis and population values on the x-axis. Built with React and D3 v5, the visualization uses `d3.scaleBand` for the categorical axis, `d3.scaleLinear` for the numeric axis, and `d3.format` to abbreviate large numbers. Data is fetched from a CSV file using `d3.csv`. Each bar includes a tooltip showing the formatted population value.

Apr 17, 2024

Loading thumbnail…

Activity6

This example demonstrates the basic setup of a VizHub project, displaying a simple "Hello VizHub!" message in the center of the page using D3 v5. It imports the `select` function from D3 via UNPKG and a local ES6 module that exports the message string. The rendering approach uses `select('#message').text(message)` to set the div’s content, with styling applied via a linked CSS file.

Apr 17, 2024

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how VizHub enables modular, ES6-based D3 v5 projects. It shows a simple static page that replaces the text of a `#message` div with the string “Hello VizHub!” using the `select` function imported from D3. The code also imports a local ES6 module (`myMessage.js`) to supply the text, and uses `index.html` to load D3 from a CDN and link a local stylesheet. The visualization highlights basic project structure and import mechanics rather than data-driven rendering.

Apr 17, 2024