Generate dynamic concentric rings with either CSS, Canvas, or SVG for a fluid and scalable design

Looking to create a graph similar to these examples:

http://bl.ocks.org/cmdoptesc/6228457

or like this

Wanting the graph to be able to scale based on browser width without using javascript if possible. Ideally, looking for a CSS-only solution, but open to using libraries like raphael or d3 if necessary. Any suggestions on how to achieve this scaling up or down?

UPDATE

Created a JS Fiddle showcasing the desired graph:

http://jsfiddle.net/Q9hb5/

However, needing the graph to resize dynamically. Currently using Raphael and exploring SVG resizing options mentioned in articles such as:

and here:

Interested in achieving the dynamic resizing with SVG properties like viewBox and preserveAspectRatio, yet haven't found a suitable example. Open to any suggestions!

Answer №1

Assuming you prefer not to utilize Javascript libraries, it seems that you are generating the SVG image in advance or on the server and then delivering static SVG code to users. On the other hand, canvas images are always created using Javascript.

(If you opt to dynamically generate the graph with Javascript without relying on a library, the challenging aspect will be drawing the graph itself rather than resizing it! As mentioned by @Lars Kotthoff, determining the window size and adjusting everything accordingly is simple using Javascript.)

To enable SVG scaling up and down, you must incorporate a viewBox attribute into your SVG element, which will automatically handle the scaling. However, keep in mind that dynamically sizing the image while maintaining its aspect ratio can be somewhat frustrating. The preserveAspectRatio attribute prevents distortion but only through the addition of empty space, not scaling down. In Firefox, utilizing height:auto; will cause the SVG height to adjust to match the width and viewBox aspect ratio, although this behavior may not occur in webkit browsers.

For example:
http://fiddle.jshell.net/9dSbL/

A slightly indirect solution involves: + Setting the svg height to a small (but nonzero) value like 1px; + Applying overflow:visible; to the svg; + Utilizing a slice option for preserveAspectRatio, causing the image to scale according to the larger dimension of height or width; + Manually adding a bottom padding style to the svg element that matches the aspect ratio of the viewBox; + Enclosing the entire svg within a <div> with a style of overflow:hidden;.

For instance:
http://fiddle.jshell.net/9dSbL/1/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be causing my CSS div class to cover up the image in the background?

Within my HTML code, I have a <div> that contains a whole partial view: <div class="bkgImg"> /* content goes here */ </div> Inside this main <div>, there are two additional <div> elements - one without a class and one wi ...

Retrieving text from a draggable div using jQuery

I have a draggable div that I can move over another element with the class .outerDiv which contains text content. Is there a way for me to retrieve the text from .outerDiv that overlaps with the draggable div? $(".outerDiv .isStore").draggable({ contain ...

The setInterval() function is not functioning properly when used with PHP's file_get_contents

Currently, I'm encountering an issue while attempting to use the function get_file_contents() within a setInterval(). The objective is to continuously update some text that displays the contents of a file. Below is the code snippet: <script src="h ...

Oops! Make sure to explicitly allow the dependency @types/html2canvas by adding it to the "allowedNonPeerDependencies" option

After installing the html2canvas package in my Angular library project, I encountered an error when compiling in production mode using the command ng build --prod. The specific error message is as follows: ERROR: Dependency @types/html2canvas must be exp ...

Angular 6 CSS spacing dilemmas

We recently made the switch from Angular 5 to Angular 6 and noticed that there is no spacing between the buttons/icons, etc. We are looking to bring back the spaces between the buttons and icons. I have recreated the issue below. As you can see in the Ang ...

Transforming a directory structure into JSON using Node.js

Looking to Achieve: My aim is to transform the existing directory structure provided below into a single JSON file. The directory includes JSON files that must be integrated into the output file. Restrictions: Only Node.js Inquiries: How can I effi ...

What is the best way to display a Bootstrap pop-up and then automatically hide it after a few seconds

Does anyone know how to display a Bootstrap popup when the page loads and automatically hide it after 3 seconds? I found an example online but I'm unsure how to adapt the code for my specific needs. <button type="button" class="btn btn-primary" da ...

Adding a Bearer Token to a GET request using location.href: A step-by-step guide

At the moment, I have all my ajax requests sending an Authentication token. However, I have created a service for exporting to excel and since ajax doesn't support that, I am using location.href for the get request. Is there a way to include the token ...

Passing data from a jQuery AJAX request to a success callback function

I am currently in the process of learning Ajax with jQuery, but there is a certain aspect that puzzles me. In the code snippet below, it can be observed that when we invoke the onSuccess function, it does not require any arguments, yet the function itsel ...

PlaneGeometry at x=0 y=0 z=0 for three.js on a flat surface

Hi there! I have a code snippet that currently renders an image vertically, and I'm looking to modify it so that the PlaneGeometry is drawn horizontally instead. Rather than rotating it with mesh.rotation.x=THREE.Math.degToRad(-90);, I'd like it ...

How do I create individual tables for each JSON array within my object using React and MaterialUI?

I have a unique challenge with a component that creates multiple tables, all within one <TableContainer>. The issue lies in the fact that every table is confined within the same container and I am unable to customize each table separately. Each tabl ...

In PHP/HTML, check if a tab already exists before creating a new one

Currently, I am using PHP to retrieve a list of users from the database and have included a link with them. My goal is to have the linked file open in a new tab, but using target="_blank" causes a new tab to open every time I click on the link. However, I ...

how can I filter an array in MongoDB using a specific condition

This is an example of my MongoDB object: { "_id": ObjectId("asdklfjasdlkfjal"), "geometry": { "type": "Point", "coordinates": [ -26.62375, 152.86114 ] } }, { "_id": ObjectId("asdklfjasdlkfjal ...

How can I make the fullcalendar 'moreLink' popover stay open when clicking outside?

Currently, I am working with FullCalendar v6 on nextjs. One built-in feature that caught my attention is the event popover that appears when there are too many events, accessible by clicking "more." However, I am facing a challenge in preventing this pop ...

What is the best way to make the child Div float to the bottom of the parent Div?

Screenshot I attempted various CSS techniques in an effort to make the .booknetic_appointment_container_footer float to the bottom of #booknetic_theme_5, but unfortunately, I was unsuccessful. The closest solution I found involved hardcoding padding, but ...

Display a loading spinner dialog using Jquerymobile until the page finishes loading

I am facing an issue with my app where I need to show a Loading dialog while sending data from the first page to the server. The goal is to display the Loading dialog until the send operation (posting to server) is complete and then proceed to page two. I ...

Select two images and simultaneously move them around on a webpage

Looking for a way to replicate the functionality shown in this image - when I drag one map, another one should automatically move as well. Additionally, the downtown map needs to be contained within the mobile frame. The two map images are located in sep ...

Using Flexbox and Bootstrap 5 to create a responsive design with Aspect Ratio

This snippet of code showcases a unique two-column layout, utilizing both bootstrap and flexbox. The left column is dedicated to displaying video descriptions, while the right column houses the embedded video. <div class="d-flex flex-row flex-wrap& ...

What are the steps to refreshing a table using AJAX?

Struggling to update a table from my database, I have been following a PHP guide but can't get it to work. In a separate file, the data is retrieved and displayed in a table. I am attempting to use JavaScript to refresh this file. This code snippet ...

Only when all the AJAX scripts have finished executing should you refresh the page

As I endeavor to initiate various actions upon clicking a button .button, my first task is to cleanse each <div> that contains the class .classToClean and subsequently run ajax scripts to update the database. To accomplish this, I have opted for the ...