2 Level Diverging Bar Chart, can only use one dataset
lsquaredleland
/ README.md
Last active
August 14, 2016 08:54
2 Level Diverging Bar Chart - 1 Data Set Implementation
lsquaredleland
/ README.md
Last active
August 14, 2016 08:54
2 Level Diverging Bar Chart - 2 DataSets Implimentation
2 Level Diverging Bar Chart, can use 2 different datasets or one (code must be modified). Note how in this version elements are not appended.
Bar Chart with baseline at center, rather than traditional top or bottom of the chart.
lsquaredleland
/ README.md
Last active
August 14, 2016 08:53
— forked from mbostock/.block
Concentric Clock
A concentric clock adapted from Mike Bostock's "Arc Tween (clock)".
A concentric Count Down Timer adapted from Mike Bostock's "Arc Tween (clock)".
All it needs is pause functionality and the text input boxes to be centered in the middle, if only there was svg input boxes.. Or alternatively could have d3 brushes in the center instead, similar to HTML5 ranges. Or even better add drag functionality to the indivdual time bar -> something to do.
Flower shape chart designed by setting the origin at the 6 O'Clock position and have the value of the arcs be positive (going left) and negative (going right). Initial code adapted from Mike Bostock's "Arc Tween (clock)".
A bar chart was inserted inside a circle. Implementation achieved by having the origin of the arc at π (6 o'clock position), and have all values going to the right of that position be translated laterally to make room for the rects. Initial code adapted from Mike Bostock's "Arc Tween (clock)".
###D3 Scaling on the container level I use this method of defining the chart's dimensions on the container level so that there is one central place (CSS styling) where all the dimensions are stored. From there I normally scale the chart's interior to make the contents semi responsive.
In the chart's styling define height and width:
#chartArea{
height: 400px;
width: 400px;
}
Grab the chart's CSS styling height and width in javascript portion of code:
#Art Maybe? To create this 'visualisation' I started with a donut chart, where that outerRadius's would not be consistant. Meaning that they had different values as seen in the foreground. From there, using the angle of the bar relative to the x-axis and the length of the outer radius, I calculated the x and y coordinates of bar's end. Which was then used to create an svg line.
#Isotype Art Maybe? To create this 'visualisation' I started with a donut chart, where that outerRadius's would not be consistant. Meaning that they had different values as seen in the foreground. From there, using the angle of the bar relative to the x-axis and the length of the outer radius, I calculated the x and y coordinates of bar's end. Which was then used to calculate the locations for the invidividual circles.
###To Consider:
- Add ClipPaths
- Improve scaling with different number of bars, does not work perfectly currently.
- How to bind data to the isotype more formally?
OlderNewer