Last Updated on June 29, 2024 by E. Scott
Data Visualization
This group of JavaScript projects entail Chart.js and D3. Most of which I began building while working at a fast pace startup. The company built ridiculous UIs with lots of graphs. Everything was data driven. In turn I got good at cranking out NVD3, D3, High Charts, and Chart.js graphs.
They’re all different from one another. But certainly have concepts in common. Such as using just a canvas or svg tag. Then pumping in the visuals and data. Every chart I built was controlled via an external data source so there was always an API call involved.
It got really challenging however when I’d need to mock a design. And the chart would need to match, exactly. Throw in responsive and rendering obstacles, coupled with multiple streams of JSON, and it’s a real challenge. I digress. Below is an area chart, doughnut chart, and D3 bar chart.
HTML, JS, & CSS
Last group of JavaScript projects are far from minuscule. In every single professional environment, I see invalid markup and poorly written CSS. Please don’t be that full stack developer! lol. I hope you find these samples educational and useful. Moreover, this list and the others will undoubtedly grow. So return to this page sporadically.
Expandable rows is similar to an accordion, but unique in it’s own way. I got some of these ideas from designers and working directly with clients. Tabs are always useful for UI arrangement. As is a responsive carousel. How about a progress bar navigation? I could probably make this responsive. Ping me if you need it to be and I’ll add mobile.
Slider selection is quite old, but still nice to tinker with in my opinion. As is the CSS dropdown menu and animated advertisement. Event propagation simply shows the concept which is no doubt something to be aware of. Dynamic buttons showcase an easy way to generate thereof. Hope you enjoy these JavaScript projects.
Leave a Reply