H

haripriyaa07

@haripriyaa07·29 public vizzes

Loading thumbnail…

Top 10 Male population countries

This bar chart displays the top 10 countries by male population, showing Qatar leading with over 226 million, followed by the United Arab Emirates and Bahrain. The visualization uses D3 v7 with an SVG rendering approach, scaling the population values by 1,000. It employs `scaleLinear` and `scaleBand` for axes, with `axisLeft` and `axisBottom` for ticks, and appends purple rectangles to represent each country's population from the CSV data source.

Loading thumbnail…

Fork For bird data

This animated scatter plot explores relationships among physical measurements of bird species, including bill, flipper, and body mass attributes. It cycles the x-axis through columns of the dataset using a `setInterval` timer, while the y-axis remains bill length. Points are colored by species via a custom function, with a legend mapping species to colors. The visualization is rendered as an SVG using D3.js (v6.7.0) with locally defined `scatterPlot` and ES6 modules, loading data from a CSV via `d3.csv` and using scales and axes from `d3`.

Loading thumbnail…

Stacked barchart

This chart displays the age distribution of a population across nine South Korean provinces, showing raw counts or percentages of people within ten-year age brackets. A stacked bar chart represents each province, with colored segments corresponding to age ranges. Users can toggle between raw counts and percentage-of-illness views using radio buttons. The visualization uses D3.js version 3.5.6, including the `d3.layout.stack` function for stacking, `d3.svg.axis` for axes, and transitions to animate between the two modes. Data is loaded from a CSV file, and SVG is used for rendering.

Loading thumbnail…

Activity 8 Country

This example displays a map of South Korea rendered as an SVG using D3 v5 and TopoJSON data from the world-atlas package. It extracts the country’s geometry with `topojson.feature`, fits a `d3.geoMercator` projection to the shape with `fitSize`, and draws the path via `d3.geoPath`. The code loads D3 from a CDN script tag and appends the map to the page body.

Loading thumbnail…

Question7- Network

A force-directed network graph displays the friendships among ten people, including Taylor, Selena, and members of BTS. Each node is represented by a large lavender circle with a label, and links show the "Friend with" relationships. The visualization uses D3's `forceSimulation` with `forceLink`, `forceManyBody`, and `forceCollide` to position nodes, while SVG `line` elements with markers depict edges. Users can drag nodes to rearrange the layout, with hover effects highlighting the selected node.

Loading thumbnail…

Question7-network

A hierarchical tree diagram maps blood group types and their Rh factor variants, with nodes color-coded by depth (red for root, blue for level 1, green for leaves). The visualization uses d3.stratify to structure the data, d3.tree to compute layout, and SVG circles and cubic Bézier paths for rendering. Labels from the dataset appear beside each node. The code follows a tutorial pattern and displays a simple branching hierarchy for A, B, AB, and O groups with positive and negative subtypes.

Loading thumbnail…

Question7

This interactive visualization displays a hierarchical tree map of weekend activity choices, branching from a central root into categories like relaxation, games, movies, and camping. The layout is generated using D3's `stratify()` and `tree()` functions, which arrange nodes by depth and assign coordinates. Circles representing each activity are rendered with SVG, colored by generation depth, and animated via `.transition()` as connections (paths) draw between parent and child nodes. Text labels identify each activity, while the entire graphic is drawn using D3 v6 with a plain SVG rendering approach.

Loading thumbnail…

draft

A scatter plot animates through the Iris dataset, cycling the x-axis between petal width, sepal width, petal length, and sepal length every two seconds while keeping sepal length on the y-axis. Built with D3 v6, the reusable `scatterPlot` function uses `scaleLinear`, `axisLeft`, and `axisBottom` to render axes and circles via SVG, with data loaded through `csv`. The animation updates the plot’s x-value accessor and re-invokes the chart, producing a dynamic exploration of iris flower measurements.

Loading thumbnail…

Question4

This interactive visualization explores a music dataset by presenting three linked views. A bubble chart plots artists based on average popularity and valence, with circle size representing track count. Two additional bar charts display the top ten music genres and artists by track count, filtered for tracks with popularity scores above 80. All charts use SVG rendering with D3.js v4, featuring tooltips on hover and links between views. Data is loaded from external CSV files and processed using JavaScript array methods like reduce and sort.

Loading thumbnail…

Question 6

This example renders a world map on a spherical projection using D3.js and TopoJSON. It loads country boundary data from the World Atlas TopoJSON source, converts it to GeoJSON, and displays the landmasses as filled purple shapes with black outlines, set against a light grey sphere. The visualization uses D3’s geoNaturalEarth1 projection and geopath to draw the map, while a CSS style controls the visual styling of the sphere and land elements. The map is rendered as static SVG paths within an 960 by 500 canvas.

Loading thumbnail…

draft2

This scatter plot visualizes the relationship between flipper length and body mass for three penguin species, with each species color-coded as pink, purple, or blue. The chart uses D3 v5’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map the data from a CSV file, rendering circles with SVG. Custom labels for axes and a title are added via D3 selections, while the tick text and fonts are styled with cursive and times fonts.

Loading thumbnail…

question 3

This visualization displays the Iris dataset as a D3 scatter plot, mapping petal width against sepal length for individual flower samples. The code uses d3.csv to load the data from a GitHub Gist, then applies scaleLinear, scaleOrdinal, axisLeft, and axisBottom to construct the chart. Each data point is rendered as a distinct SVG symbol generated with d3.symbol and colored by species. The visualization includes labeled axes and is implemented as a reusable scatterPlot component.

Loading thumbnail…

IMDb Movie ratings

This stacked bar chart shows the distribution of movie ratings across different genres, with each bar segment representing the percentage of a rating level within a genre. Hovering over a segment reveals the exact percentage via a tooltip. Built with D3 v7, the visualization uses `d3.stack()` to create the stacked layout, `d3.scaleLinear` and `d3.scaleBand` for axes, and an ordinal color scale for rating categories. Data is loaded from a CSV file using `d3.csv`.

Loading thumbnail…

Activity 7 Task1

This bar chart displays the population of 20 countries in 2020, sorted by country name on the y-axis with horizontal bars extending to represent population values. The visualization uses React with D3 v5’s `scaleBand` and `scaleLinear` to map data, rendering SVG rectangles via custom React components. The data is loaded from a CSV file using D3’s `csv` method, formatted with `format` to abbreviate large numbers, and includes axis labels and tooltips showing the population value.

Loading thumbnail…

Network Graph

This interactive network graph visualizes a social network of friends, with nodes representing individuals and links showing their relationships. The visualization uses force-directed layout through d3.forceSimulation with link, charge, collision, and center forces to position the nodes. Users can drag nodes to rearrange the network. Data is loaded from a local JSON file, and the graph is rendered as SVG elements including circles for nodes and lines for links, with arrow markers indicating relationship direction. Hovering highlights individual nodes.

Loading thumbnail…

MuscleCars tree

A hierarchical tree visualization displays muscle car models grouped by manufacturer, with nodes color-coded by depth level. The SVG rendering uses D3 v3’s `d3.layout.tree` to position nodes and links, with a zoom and drag behavior via `d3.behavior.zoom`. Animation transitions node positions over 800 milliseconds on updates, while tooltips and drop-shadow filters enhance interactivity. Data is loaded from a JSON file detailing Ford, Dodge, and their sub-models like Mustang and Charger.

Loading thumbnail…

Activity 8 Map

This interactive world map visualizes country boundaries using light green landmasses against a sky blue ocean. The visualization employs an equirectangular projection, rendered via SVG paths generated with `d3.geoPath`. Users can zoom and pan the map using the `d3.zoom` and `d3.event` APIs. The geographic data originates from the `world-atlas` TopoJSON file, which is converted to GeoJSON features using the `topojson.feature` function. Countries highlight in maroon when hovered, based on CSS styling.

Loading thumbnail…

Reusable Scatter plot Activity 8

This interactive scatter plot visualizes the Iris dataset, displaying relationships between sepal and petal measurements with color-coded species markers. The visualization cycles through different attribute combinations on the x-axis at regular intervals, while the y-axis remains fixed on sepal length. Built with D3.js, it uses reusable scatter plot components, including scaleLinear for coordinate mapping, axisBottom and axisLeft for axes, and setInterval for animation. The SVG rendering includes custom legends, rotated axis labels, and title styling, with data loaded from a CSV file and parsed through d3.csv.

Loading thumbnail…

Pie Chart

This pie chart shows the distribution of students across different majors at UNT. The D3.js visualization uses a pie chart with colored segments to represent each major, with data labels showing student counts in thousands. It employs `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate and style the chart, while `d3.csv` loads the dataset from a GitHub Gist. A legend on the right lists each major with its corresponding color and student count, rendered as SVG elements.

Loading thumbnail…

Area Chart Activity 8

This area chart visualizes the cost of sales from 2000 to 2013, using a smooth basis curve to connect the data points and a light green fill beneath the line to emphasize the magnitude of values over time. The chart renders as an SVG using D3 v5, with scaled time and linear axes, and includes rotated orange axis labels for clarity. Data is loaded from a remote CSV file, and the code employs d3’s `area`, `line`, `scaleTime`, and `scaleLinear` functions to generate the visualization.

Loading thumbnail…

linechart

This line chart displays the cost of sales from 2000 to 2013, with each year plotted against its corresponding cost value on a linear scale. The visualization uses D3 v7 APIs including `d3.csv` to load data, `d3.scaleBand` for the categorical year axis, `d3.scaleLinear` for the cost axis, and `d3.line` to generate the path geometry with a light green stroke. The chart is rendered as an SVG with axes, labels, and a title, with data coming from a local CSV file.

Loading thumbnail…

Bubble chart

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes. Each circle’s position encodes horsepower on the x-axis and torque on the y-axis, while its radius and color represent highway MPG and make, respectively. Hovering reveals a tooltip with the make name. A legend maps bubble sizes to MPG values and includes color-coded dots for each brand. Built with D3 v7, the SVG rendering uses `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.axisBottom`, `d3.axisLeft`, and `d3.interpolateTurbo`, with data loaded from a local CSV.

Loading thumbnail…

Fork of Scatter Plot with Shape

This example demonstrates a scatter plot of Iris flower measurements, plotting sepal length against petal length. Each point is shaped according to the species of the flower, with a custom legend mapping the three species to distinct symbols. The visualization uses D3 v7 APIs including `scaleLinear`, `scaleOrdinal`, `symbol`, and `symbolsFill` to render the marks, and loads the Iris dataset from a remote CSV file via `csvParse`. The rendering pipeline is modular, with separate modules for axes, the scatter plot, and the shape legend.

Loading thumbnail…

Activity 7 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length and width on the x- and y-axes. Each of the 150 data points is a circle, with colors representing the three species: setosa, versicolor, and virginica. The code uses d3.csv to load data from a GitHub repository, d3.scaleLinear for scaling, d3.extent to compute domains, and d3.axisLeft and d3.axisBottom to render the axes. The plot is rendered as an SVG, with circle elements positioned using attributes derived from the scaled data.

Loading thumbnail…

Task 10

The visualization displays a large background image and renders the first ten rows of a remote CSV dataset as formatted JSON text, using an SVG canvas. The code loads D3 v5 and other libraries via UNPKG, imports `select` and `csv` from D3, and fetches data from a GitHub gist. The example demonstrates basic data loading, JSON serialization, and DOM manipulation within a Vue framework.

Loading thumbnail…

Activity6

This example loads a CSV from a GitHub gist using `d3.csv` and renders the first ten rows as JSON inside a `<pre>` element appended to the body via `d3.select`. It imports `select`, `csv`, and `csvFormat` from D3 v5, and computes the dataset size in kilobytes with `csvFormat`. The page also demonstrates local ES6 module imports with an exported message variable, though that message is not displayed in the visible output. The static SVG background image is embedded directly in the HTML.

Loading thumbnail…

BMI by Age

This example visualizes the relationship between age and average Body Mass Index (BMI) using a binned bar chart. The data is loaded via `d3.csv` from a GitHub gist, with BMI values calculated from weight and height measurements. The visualization uses D3 v7 APIs including `d3.bin`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to group ages into bins and display the average BMI per bin as purple rectangles on an SVG canvas. Axes are customized with tick styling and labels for both dimensions.

Loading thumbnail…

Transforming Data

This example demonstrates data transformation by loading the classic Iris dataset from a CSV file and computing the average sepal length for each species. It uses D3's `csvParse` to parse the data, `flatRollup` and `sum` to aggregate values, then displays the resulting summary as JSON text in a `<pre>` element. The visualization highlights D3 v7’s modular import system and local ES6 modules, with a simple state management pattern that asynchronously fetches and processes the data before rendering.

Loading thumbnail…

5budha

A dense field of randomly rotated, multicolored polygons fills a black SVG canvas, generated by triple-nested React array maps. A large red Buddha-like figure is overlaid as a complex vector path, drawn with numerous cubic curves and transformed into place. The visualization uses React and ReactDOM to render both the generative scatter and the detailed SVG path, with coordinates produced via `Math.random()`.