Data Visualizations in chord chart of Vega

-


Link of works


Chord chart was a project for my client,  it mainly shows the nodes and ribbons which are used to connect nodes,  and ribbons on hovering shows the data flow animation with directions on it. Nodes can be expanded.

  • Loading and data flowing


































  • Expanding





Comments

Post a Comment

Popular posts from this blog

Underlay Image Upload of Floorplan on Houzz

-
Image
Link           https://pro.houzz.com/manage/floorplans Abstract          Underlay image can be used as a reference in floor plan design.  Suppose the user has a pdf or image and they want to create the same design in Houzz website, they could use this feature to draw the walls, add windows, doors and furnitures.  With this design added,  they could view the plan in 2d or 3d.  At the same,  they can also leverage all the features of Houzz floor plan to see the measurements,  to apply different style to the walls and floors， and add all the furnitures from Houzz marketplace.          This was the biggest project I did in Houzz,  besides designers and project managers,  I also need to work with backend engineers to make sure the connection between frontend and backend be conducted well. Backend is using websocket to notify the front end about info of the uploaded image,...
Read more

Measurement Tool of Floor Plan on Houzz

-
Image
Link https://pro.houzz.com/manage/floorplans Abstract        The measurement tool is basically the ruler on the canvas to measure the distance between objects,  objects include the walls,  windows,  doors, furnitures and other rulers. Snapping is ensured during the interaction so the measurement could be accrurately reflect the design ideas.                Measurement tool was my first major project in Houzz.  From this project,  I could learn the whole process of implementing a new majoy feature. By finishing this project,  I learned how to define a new object and update the object with our engine code. At the same I learned how to update the objects data between ui and engine,  so every change on the ui will update the object on the canvas and change on the canvas will change the display content of ui. I also learned how to define the frontend object in backend,  so the date could ...
Read more