S

Seema Shrestha

@shresthaseema·17 public vizzes

Loading thumbnail…

Question2_Answer2

This example displays a green area chart of United States population from 1995 to 2020, with years on the x-axis and population on the y-axis. The visualization filters a CSV dataset for the United States and maps yearly values using `d3.scaleBand` and `d3.scaleLinear`, then renders the area shape with the `d3.area` function. Axes are drawn using `d3.axisBottom` and `d3.axisLeft`, with rotated year labels and manually added title and axis text. The result is rendered as an SVG element with a width of 900 and height of 450 pixels.

Loading thumbnail…

Question1_Answer1

This pie chart visualizes the distribution of drug types from a CSV dataset of 200 patients, showing the count of prescriptions for each drug. The chart uses D3 v7’s `d3.pie()` and `d3.arc()` to generate SVG arcs, with a categorical color scale (`d3.scaleOrdinal` with `d3.schemeCategory10`) for segment fills. Data is aggregated via `d3.group()`, and each slice includes a white value label. A legend on the right maps colors to drug names, rendered as SVG rectangles and text.

Loading thumbnail…

Fork of Hello VizHub

This area chart visualizes a dataset loaded from a CSV file hosted on GitHub. The chart displays values over time, with dates parsed via `d3.timeParse` and a linear scale for the y-axis. The area path is generated using `d3.area` and rendered as a steelblue SVG path. Axes are created with `d3.axisBottom` and `d3.axisLeft`, and the chart is built with D3 v7.

Loading thumbnail…

Carbon Emissions of Top 10 Highest Tax Rate Countries

This bar chart visualizes the CO2 emissions of the ten countries with the highest total tax rates, using data from a CSV file hosted on GitHub. It ranks countries by tax rate and displays their corresponding emissions values above each bar. The visualization is built with D3 v7, using `d3.scaleBand` and `d3.scaleLinear` for axes, and includes interactive hover tooltips that reveal the exact tax rate. Bars are rendered as SVG rectangles with dark green styling that brightens on mouseover.

Loading thumbnail…

Fork 2

A scatter plot visualizes the relationship between GDP and CO2 emissions for ten major countries, with each point colored by country and hover interactions revealing exact values via tooltips. The chart uses D3.js v7 to load CSV data from GitHub, parse numeric values, and render SVG circles positioned by linear scales. Axes, tick formatting, and labels are generated with `d3.axisBottom` and `d3.axisLeft`, while a color ordinal scale assigns category colors to countries.

Loading thumbnail…

Activity 8_Q4.A4

A bubble chart displays patient age and sodium-to-potassium ratio, with bubble size encoding the count of patients per drug and color distinguishing drug types. The visualization uses D3 v6 to load CSV data from a GitHub repository, render SVG circles, and apply scales via `d3.scaleLinear`, `d3.scaleSqrt`, and `d3.scaleOrdinal`. Axes, labels, and a legend are added using `d3.axisLeft` and `d3.axisBottom`, with data aggregated through `d3.rollup`.

Loading thumbnail…

Activity 8_Q1.A2

A horizontal bar chart displays population figures for twenty countries in 2010, using green rectangles to represent values on a linear scale. The chart is built with React and D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Data is loaded from a remote CSV via `d3.csv`, and axes and marks are rendered as SVG components with formatted tick labels converting gigabytes to billions.

Loading thumbnail…

Activity6_Task4

This bubble chart visualizes the relationship between average horsepower, torque, and highway MPG across 30 car makes, using position for the quantitative axes and circle size for fuel efficiency. Each bubble represents a make, colored by a categorical ordinal scale using `d3.interpolateTurbo`, with hover tooltips showing the make name. The chart is rendered as SVG with D3 v7, using `d3.scaleLinear` for axes and a legend that encodes MPG values through circle size.

Loading thumbnail…

Activity 8_Q3.A3

This scatter plot visualizes the relationship between patient age and the sodium-to-potassium ratio, with points colored by drug type to reveal potential patterns across categories. The visualization uses D3 v6 to load a CSV dataset from GitHub, applies linear scales for both axes, and renders circles on an SVG canvas. The code employs `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.schemeCategory10` for color encoding, with axis labels and a legend generated programmatically to clarify the drug categories and measurement units.

Loading thumbnail…

Activity6_Task3.2

This visualization displays the Iris dataset using a D3.js scatter plot, mapping sepal length to the x-axis and petal length to the y-axis. Each data point is rendered as a path with a distinct symbol from `symbolsFill`, where the species determines its shape. It loads CSV data via `d3.csvParse` from a remote GitHub source and uses `scaleLinear` for positioning and `scaleOrdinal` for shape encoding. A custom legend shows the species labels, and the axes are drawn with `axisLeft` and `axisBottom`.

Loading thumbnail…

Activity6_Task3

This interactive scatter plot visualizes the Iris dataset, showing the relationship between petal length and petal width, with each species rendered as a distinct color: skyblue for setosa, lightgreen for versicolor, and orange for virginica. It displays the data as SVG circles whose x and y positions correspond to the petal measurements. Built with d3.v6, the visualization loads CSV data from a GitHub repository, uses scaleLinear for axis scaling, and leverages the axisLeft and axisBottom APIs to render labeled axes for petal length and sepal length. The chart occupies the full browser window.

Loading thumbnail…

Activity 6_Q2.A2

This stacked bar chart compares the populations of ten countries from 2010 to 2020 using data from a CSV file. Red and blue bars represent each year, with country names along the x-axis and population values on the y-axis. The visualization uses D3.js v6 APIs like `d3.scaleBand`, `d3.scaleLinear`, and `d3.stack` to render SVG rectangles, with a legend identifying the two time periods.

Loading thumbnail…

test

A stacked bar chart displays the percentage distribution of IMDb ratings across movie genres, showing how rating levels vary by genre. The chart uses a diverging color scheme and horizontal bars, with each genre represented as a segmented bar totaling 100%. Hovering over a segment reveals a tooltip with the exact percentage for that rating level. The visualization is built with D3.js v7, using `d3.stack()` for data stacking, `d3.scaleOrdinal()` for colors, and `d3.axisBottom()` for the percentage axis. Data comes from a CSV file processed with `d3.csv()`.

Loading thumbnail…

Activity 6_Task 2

This stacked bar chart shows the percentage distribution of IMDb ratings across six movie genres, with each bar representing a genre and segments colored by rating level from “below 5.0” to “above 8.5.” Hovering over a segment displays its exact percentage in a tooltip. The visualization uses D3 v7’s `d3.stack()` and `d3.scaleOrdinal()` to construct the bars, while `d3.axisBottom` and `d3.axisLeft` render the scales. Data comes from a local CSV file, and the chart is rendered as SVG with interactive mouse events for highlighting and tooltip display.

Loading thumbnail…

Activity 8_Q1.A1

A horizontal bar chart displays the populations of ten countries for the year 2000, sorted from largest to smallest. The chart uses green bars with blue tick marks on a white background, and hovering over a bar reveals the population value via a tooltip. The visualization is built with React and D3 v5, using `scaleBand` and `scaleLinear` for axes, with data loaded from a CSV file via the `csv` function. The rendering uses SVG elements, with axis labels formatted using D3's `format` function to abbreviate large numbers.

Loading thumbnail…

Activity 6_Task 1

A horizontal bar chart displays the 2020 population for 30 countries, ranked by country name along the y-axis and population on the x-axis. The visualization uses React with D3 v5's `scaleBand` and `scaleLinear` for positioning, while SVG rectangles render the bars with a native `<title>` tooltip showing formatted values. Data is loaded via `d3.csv` from a GitHub-hosted CSV file, with axis ticks and labels generated by custom React components.

Loading thumbnail…

5 Buddhas

This visualization, titled “5 Buddhas,” uses a React and SVG pipeline to render an abstract, generative Buddhist-inspired composition. A black background hosts a tightly packed grid of 20x20x20 overlapping diamond polygons, each colored with semi-random RGB values and rotated, creating a shimmering, kaleidoscopic field. Superimposed on this patterned canvas is a central, gold-toned Buddha figure, drawn as a detailed SVG path, which anchors the chaotic geometry with its calm, iconic silhouette.