![]() ![]() x.axis.bottom) and call the axis object again. Just select the container elements (in my case. My median ticks are line elements, so I set the x1 and x2 attibutes again. Fortunately, as above, I can grab my dataset out of the chart with lectAll('.bar').data() and calculate a median from that. I could have set this as a global when I loaded data, but I have enough globals in my life code. Rememeber, data is already bound, which helps with next step. For the foreground bar, I'm recalculating width based on the updated x-scale. Background is easy it's a full-width bar (and can be skipped if you don't like having a background offset). (It would be nice if D3 had a parent accessor, like jQuery.) That's a little ugly, because chart is actually a g element translated by margin.left and margin.top, so I need to re-select the parent node. After that, I just go down my list above and resize.įirst, I'm resizing my svg element. I'm calculating width based on the container element and margins, as I did before, and updating my x-scale's range. ![]() ![]() This lets you (mostly) control your layout with CSS and class names, instead of having to keep CSS and JavaScript in sync.ĭo this, and your charts will load with the correct size. Just as before, start with a responsive framework and set initial sizes based on containers. Size and scale SVG elements based on thier containers. Size and scale SVG elements based on thier containers.ġ.Ultimately, the process is roughly the same as making a responsive map, there's just more stuff to keep track of. Each of those needs to be adjusted when the screen size changes. In the chart above, I have a top and bottom axis, labels, bars representing data (with another set as background) and ticks representing the median data point. That means you'll figure out a bar chart more quickly than a choropleth map, and you won't be confused by other other signals (area, position or shape, for example).Ĭharts (bar and otherwise) end up being slightly more complicated to resize than maps, if only because there are more moving parts. Our brains, however, are wired to parse differences in length faster than differences in color. Percent of adults over 25 with at least a bachelor's degree: ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |