The initial phase of the project started with trying to understand how a single input can be interpreted in different ways based on the context of the view. This also helped us get familiarize with the Html,CSS, SVG. Since complex visualizations are a combination of many of the small simple elements, understanding the coordination between the simple elements can be useful for creating complex visualizatios.
The below example shows a visualization with slider, text box,numerical input, rectangle and radio buttons. All these are coordinated in various ways. Here a numerical value from the input from the slider is used to change the font size, text content of the numerical input element, change the opacity of the rectangle, length of the sentance. Similarly we also used the numerical input from the text Html input element to change the slider, font size, length of the sentance, Opacity of the rectangle. The radio buttons are used to change the color of the rectangle.
The sentence will be truncated based on the slider. 1234567890 1234567890 1234567890 ................