Skip to main content
SimilarExport ZIP
100%

Mallak Alkhathlan assignment 1

✓ Published0🌍 Public
Mmnalk
Last edited Aug 29, 2021
Created on Aug 28, 2021
Forked from Hello VizHub

The graphic displays a survey of student emotional responses as a horizontal bar chart, with two distinct visual encodings. The first set of bars uses plain orange rectangles with emoji labels (e.g., 😤, 😂) to show counts, while the second set employs SVG linear gradients, transitioning through colors like Tomato, SlateBlue, and Orange, with rounded corners. The SVG uses CSS classes for hover interactions, changing bar fills to SlateBlue and text to Tomato. The chart, defined in an inline SVG within `index.html` and styled by `styles.css`, relies on native SVG elements (`rect`, `linearGradient`, `text`) and CSS transitions—no external JavaScript libraries.

AI-generated description

Inspired by other people's work: 1)https://developer.mozilla.org/en-2)US/docs/Web/SVG/Tutorial/Gradients [Gradients] 3)https://www.w3schools.com/graphics/svg_stroking.asp [svg stroking] 4)https://www.w3schools.com/charsets/ref_emoji_smileys.asp [Emoji] 5)https://www.w3schools.com/css/css_colors.asp [CSS Color Names]

MIT Licensed

Similar vizzes

Loading thumbnail…

Mallak Alkhathlan assignment 1

This chart displays student emotional data using two sets of horizontal bar charts. The first set uses CSS-styled rectangles with emoji labels, while the second set applies SVG `<linearGradient>` definitions and `stop` elements to color the bars. The visualization uses inline SVG, CSS transitions and hover states, and includes stroked paths for additional data representation.

Mmnalk
92% match
Loading thumbnail…

Dataviz 2018 Assignment Graphics

A grid of blue rectangular bars replicates the graphics from a Dataviz 2018 assignment using plain SVG rect elements. The visualization shows a series of short horizontal bars arranged in rows and columns, with one bar in the third column enlarged to a taller block, all enclosed by a grey rectangular border. The rendering relies on static SVG shapes defined in index.html, with no JavaScript or D3 data binding. CSS is limited to hiding the page margin and setting unused stroke styles, so the graphic is purely markup-driven rather than computed from data.

MMukund Khandelwal
70% match
Loading thumbnail…

Dataviz 2018 Assignment Graphics

A grid of blue rectangular bars replicates the graphics from a Dataviz 2018 assignment using plain SVG rect elements. The visualization shows a series of short horizontal bars arranged in rows and columns, with one bar in the third column enlarged to a taller block, all enclosed by a grey rectangular border. The rendering relies on static SVG shapes defined in index.html, with no JavaScript or D3 data binding. CSS is limited to hiding the page margin and setting unused stroke styles, so the graphic is purely markup-driven rather than computed from data.

MMukund Khandelwal
70% match
Loading thumbnail…

Dataviz 2018 Assignment Graphics

A grid of blue rectangular bars replicates the graphics from a Dataviz 2018 assignment using plain SVG rect elements. The visualization shows a series of short horizontal bars arranged in rows and columns, with one bar in the third column enlarged to a taller block, all enclosed by a grey rectangular border. The rendering relies on static SVG shapes defined in index.html, with no JavaScript or D3 data binding. CSS is limited to hiding the page margin and setting unused stroke styles, so the graphic is purely markup-driven rather than computed from data.

MMukund Khandelwal
70% match
Loading thumbnail…

Assignment 1: 66 DOD

The visualization displays a grid of 18 randomly generated smiley faces, each rendered as a yellow circle with black eyes, white pupils, and an arc-based mouth. Built with React and D3 v7, the code composes reusable components like `BackgroundCircle`, `Eyes`, and `Mouth` using SVG elements. Each face’s eye radius, pupil size, and mouth width vary via `Math.random()`, creating subtle visual diversity across the repeated layout. The `d3.arc` API generates the mouth curves, while SVG circles handle facial features within a translated coordinate system.

YYashashvi Singh
68% match
Loading thumbnail…

SVG

This example shows student marks for individual modules, filtered by student ID through a dropdown menu. It presents a bar chart of marks per module for the selected student, with an animated update when the selection changes. The code uses D3 v5 to load the data with `d3.json`, binds the data to SVG rectangles, and renders axes with `d3.axisBottom` and `d3.axisLeft`. The x and y scales are created with `d3.scaleBand` and `d3.scaleLinear`, respectively. The visualization is a React project but uses vanilla JavaScript and SVG rendering for the chart.

SSurajRepo
68% match
Loading thumbnail…

Bonus assignment

A smiley face is drawn and animated using D3 and React, showing a bar chart that transforms into a rotating, bouncing face. The visualization uses D3's ordinal and linear scales, SVG axes, and a drop-shadow filter to render the chart, which is built inside a React component. The code employs D3 v2 with jQuery, selecting DOM elements and appending SVG elements dynamically. The smiley face is constructed from chart data and options, with smooth animations driven by D3's transition methods.

Ssuchitra2602
67% match
Loading thumbnail…

Exercise2: Pseudo Visualization

Four horizontal bars, colored orange, red, green, and blue, with varying widths, sit on a white background, each outlined in black. The visualization uses basic Scalable Vector Graphics (SVG) primitives—`rect` elements defined directly in the HTML—to create a static, pseudo-chart that mimics a stacked bar layout. No JavaScript libraries or data-binding frameworks are present; the rendering is purely declarative, with positions and dimensions hard-coded in the markup and styling provided by a simple external stylesheet.

Nnubhatia
67% match