Background
What
Reusable chart visualizations where dynamic data consistent data structures are key.
Why
Prevent code repetition.
Getting started
Install
npm install @fishawack/lab-d3
Basic usage
Add a color list variable to your defaults.scss which is used to generate the colors for all charts.
$colors-list: $color1 $color2 $color3 $color4;
Import the base lab-d3 style code in your general.scss.
@import "@fishawack/lab-d3/_Build/sass/components/_chart.scss";
Add a html tag that the script can attach onto. The labD3 parent is used for positioning.
<div class="labD3">
<svg id="chart--bar"></svg>
</div>
Initialize the chart with the selector from the html above.
import { Bar } from "@fishawack/lab-d3";
var myBar = new Bar('#chart--bar')
.init()
.data([
{"value": 10},
{"value": 20}
])
.render();
Superscripts
HTML rich text isn't supported in the charts (due to IE not supporting foreignObject tag) so if you need superscript you'll need to use the following characters as a compromise but please check with the writer/editor that this is acceptable as it's almost always easier to move the references off the charts and put them elsewhere.
⁰¹²³⁴⁵⁶⁷⁸⁹
ᵃᵇᶜᵈᵉᶠᵍʰⁱʲᵏˡᵐⁿᵒᵖʳˢᵗᵘᵛʷˣʸᶻ
Resizing
Resizing charts is a pretty deep subject, you might think.. this is svg, surely it resizes automatically? That is true, but being a chart that's drawn via javascript and needs maths to calculate positions its not as simple as it looks. I'll go over the 2 main ways to do resizing and the ups and downsides of each
On resize event
This may seem finicky, but this is the suggested route to take. By listening to the window resize event and calling .resize().renderSync() on the chart object we can recalculate the underlying maths instantly.
window.onresize = function() {
myBar.resize()
.renderSync();
};
The main up side to this approach is all font sizes will be maintained. This means even if the screen is now half the size, the text will still be 16px rather than scaling down to 8px.
Hard set width
By default charts will take their parents width and use their aspect ratio to size themselves. You can however pass in a hard coded width and/or height. This basically makes it so that when the chart is at that width it will appear as intended. If the screen grows or shrinks then the chart will scale up and down relative to the hardcoded width
myBar.att({
width: 400
})
.init()
.render();
Use this if its a fixed width site as it removes the need for event handlers. This method also makes charts work more like images where the text in the chart will shrink relative to the width compared to its hardcoded width.
Attributes
Base
{
colors : ["fill1", "fill2", "fill3", "fill4"],
colorsKey : "key",
minmaxKey : "key",
aspectRatio : 0.5625,
width: 0,
height: 0,
transitionType: "CubicInOut",
transitionSpeed: 800,
delaySpeed : 0,
stagger : 800,
startOpacity: 0,
hide: {},
min: {
x: null,
y: null
},
max: {
x: null,
y: null
},
minmax: 0.01,
label: {
x: null,
y: null
},
labelWidth: "auto",
roundPoints: false,
cb: null,
plot: {
x: "key",
y: "value",
value: "value",
label: "label"
},
tooltip: {
},
totalCount: 100,
value: {
structure: "{value}",
decimal: 0,
html: false,
format: {
value: ".0f",
percent: ".0f",
total: ".0f"
},
offset: {
ratio: false,
y: 0,
x: 0
}
},
chockData: false
}
Chart
{
margin : {ratio: false, top: 10, right: 10, bottom: 10, left: 10},
padding : {ratio: false, outer: 0, inner: 0, space: 10},
axis: {
x: {
ratio: false,
flip: false,
reverse: false,
rotate: false,
inside: false,
hide: false,
ticks: 5,
structure: null,
format: {
value: null,
percent: ".0f",
total: ".0f"
},
tickValues: null,
tickSizeInner: null,
tickSizeOuter: null
},
y: {
ratio: false,
flip: false,
reverse: false,
rotate: false,
inside: false,
hide: false,
ticks: 5,
structure: null,
format: {
value: null,
percent: ".0f",
total: ".0f"
},
tickValues: null,
tickSizeInner: null,
tickSizeOuter: null
}
},
scale: {
x: "band",
y: "linear"
},
autoAxis: "x",
parseDate: d3.timeParse("%Y-%m-%d"),
formatDate: d3.timeFormat("%Y-%m-%d"),
primaryIndex: null,
symbols: ["Cross"],
symbolColors : ["fill2"],
symbolsSize: 100,
symbolsRatio: false,
symbolsKey : "key",
symbolColorsKey : "key",
radius: {
top: {
left: 4,
right: 4
},
bottom: {
left: 4,
right: 4
}
},
inject: {},
prepend: false
}
Changelog
2.6.2
- Added new label property in so you can adjust the format/structure of labels themselves
- Fixed bug in renderSync on barStacked
- barStacked now correctly positions its labels for rotated/flipped axis
2.6.1
- Fixed bug in min/max calc where it wasn't checking the min/max when wrote as separate properties
2.6.0
- Fixed bug in StackedBars so the animate correctly
- Added pad feature to min/max linear scales
2.5.1
- Fixed bug in Brush where it wouldn't parse date on first call
2.5.0
- Brush no longer formats date on callback
2.4.0
- Can now pass lat/long as a start position to maps
- Can set the projection type for World map
- Can set the clip angle for map charts
2.3.1
- New prepend option to pushes new levels onto the top rather than appending to bottom
2.3.0
- BarStacked now handles labels differently, the lowest level label sits on the bar instead of underneath
- Added padding to BarStacked width on labels so they don't go right to bounds
- If level is hidden no longer contributes to height calculation
2.2.4
- Harvey ball reset bug fix
2.2.3
- Fixed bug in callback reset where it doesn't check if there actually is an active state before resetting
2.2.2
callback.reset on the maps now correctly resets the active state- Can now specific min/max zoom level on maps
- Can have a callback for the
zoom functionality on maps - Clicks on the maps now has a threshhold that still allows clicks to pass through
2.2.1
- structure can now be a function which will be passed in directly as the d3 tickFormat function would usually be called
2.2.0
- tickFormat and tickFormatCustom changed to match value.format implementation
2.1.9
- Table update fix where classes weren't updated on rows
2.1.8
- Brush now has clickRecenter attribute
2.1.7
- Added index.js into package.json files array so it gets published
2.1.6
- Transpile library to /src folder before publish
- Map data moved to more logical location
- Updated docs
- Removed bundle
- Removed random from export
2.1.5
- Moved from UMD modules to ES6 exports
2.1.4
- Shared localVariables bug fix
2.1.3
2.1.2
- BarStacked chart type
- calculateAxis call optimized
2.1.1
- Inject at levels/shared now works similar to render/init
- Internally rewritten localVariables to make it better for injected vars
2.1.0
- Seeded random number to Shared
- Scatter has a random number element that can spread the scatter points
- Min/max set on their own no longer breaks on bar chart
- Axis labels correctly remove when removed and render called again
- padding.space no longer applied to labels that don't exist
- colorsKey now used in all charts
- colors when used as an object can now have an unknown property
- Key chart now supports key attribute which overrules the data array
- Animate attribute on axis to turn on animation (UNSTABLE)
- minmax width now based off total width instead of width of parent
- Injecting now possible directly into level element or on init/render functions
2.0.7
- Key chart updates
- att.plot.label can now be changed
- Gantt chart bug fix
2.0.6
- Key chart
- Coords in maps are now sized based on width
2.0.5
- Scatter can now override symbolsSize on value
- Maps now have coords attribute
2.0.4
- Fixed wrapping of bar labels
2.0.3
- valueFormat now doesn't try to call d3.format on non numbers
2.0.2
- Reset method now available on all charts
2.0.1
- World map now uses globe projection
2.0.0
- Npm release under @fishawack/lab-d3
1.13.1
- Chart without a width set now automatically sets its width based on parents offsetWidth
- New Area chart
- Line chart update to be more consistent with area chart
- Line chart undefined now correctly checks the primary axis value
1.13.0
- Chart map now groups circle/path/text all in same g tag
- Statemap data now no longer in alpha order, in the order that stops lines going underneath paths
1.12.2
- Chart map now correctly sets translateExtent, stops jumping and makes margin work after zooming in and out
1.12.1
- Chart map now has zoom in/out prototype functions
- Chart map now has select specific function
1.12.0
- Default values for format for some charts
- Charts now remove their own class name on destroy
- Maps now add/remove class names similar to other charts
- Fixed bug in valueFormat shared function
1.11.0
- valueFormat changed to value.structure
- Can now have value.format and can be overridden at data level
- textFormat -> valueFormat for map data
1.10.1
- Text chart can now have formatValue
- Map no longer resizes font-size to 16 pixels, uses em
- Bar chart now uses att.plot.value for bar height
1.10.0
- Fixed percentage calculation on all charts for valueFormat
- Renamed textFormat to valueFormat for text chart
- Stop removing classnames on destroy of chart
1.9.12
- Dial chart slice now works of min/max values
1.9.11
- Dial chart arc now accurate
- Dial chart atts now not hard coded
1.9.10
1.9.9
- Requires now use relative paths
1.9.8
1.9.7
1.9.6
- Ring now animates in and then to position
- d3 update pattern "old" now passed into buildElements for all charts
- Added json data example to docs
1.9.5
- Ring can have size modifier passed in
- Ring offset can work off alpha index if color set in data value
1.9.4
- Ring chart now can have offset att and overridden at level 1
1.9.3
- Ring chart can now have minmax setting for miximum stroke width
- Ring chart can now have 0 size property
1.9.2
- Ring chart level 1
- Can pass in positions to Ring chart
- Ring chart updating fixed
1.9.1
1.9.0
- colorsKey will fallback to using index if no key found
- Shared now has init function that is only called when the first init called on any chart
- tickSizeInner/Outer can now be a ratio
- Bar/Block chart will now show decimal places on initial 0 value
- symbolSize can now be a ratio
- line now animate path transition
- fixed min/max null values on bar and box
- Removed redundant chockData calls on box
- Bar chart value label no longer set to hard coded font size, will inherit page style and adapt to new font sizes better
- labelFormat -> valueFormat for consistency
- valueOffset now available to offset the value labels on an attribute level or data level
1.8.0
- Scatter/Line symbols now above the min/max
- Harvey ball fade circle is now path that can have innerRadius
- primaryIndex attribute now determines the index used for colors/transitions etc.
- spacePadding now rolled into padding property, also can be ratio now
- Y axis fixes and updates to support wrapping and correct alignment and also be the correct width when auto axis
- dashStyles array was using the incorrect index
- tickFormat/valueLabel now use {value} instead of {0}
- valueLabel -> labelFormat
- tickFormat can now be d3-format value if tickFormatCustom set to false
- Line chart min max now instantly move to be more consistent with the rest of the chart
1.7.0
- Fixed bug when min/max was 0 not rendering
- Line graphs can now have min max
- Removed redundant code from line graph chockData
- Auto y axis now correctly gets the width instead of the height for its sizes
- Scatter chart now available
- Symbol can now be specified on data value for both line and scatter
- Line graphs can now have animated dashed lines
1.6.0
- Prefixed classes added via lab-d3 with a labD3__ keyword. The applies to tablet / text / tumbler
- Fixed table chart when added updated class wasn't added space afterwards
1.5.1
- tickValues can now be set on charts
- line chart now uses correct index
1.5.0
- Config grunt bumped to v3.1.11
- Fixed bug where the call to _additionalSetup for chart_group wasn't getting called when invoked via bar charts as bar chart wasn't calling super function
- Chock data now works globally at root chart object
1.4.7
- Scale animation back out, not currently possible with scale setup
- Gannt missing a required selection module
1.4.6
- Scale is now animated again, seems to have been fixed in a d3 update
- tickFormat can now take an object with a suffix and a prefix
1.4.5
- showBaseline attribute for bar chart
- barChart group axis fake tick -> fake domain
1.4.4
- chockData fix for bar chart min max
1.4.3
- chockData now available for Box chart
1.4.2
1.4.1
- Babelify now incorporated, moduled out even further
- Base class now added at root, text only chart types no longer get guff
1.4.0
1.3.9
- Bumpbed d3 to version 5
- Moduled out all charts, only pulling in whats needed
- animGroups now available for bar chart to animate bars or groups
1.3.8
- Fixed y position of bar value label for values with 0
- chockData attribute now added to render a chart with 0 values
1.3.7
- Fixed space padding on auto rotated y axis
- Can have auto axis null on group scale
- Font size now dynamic, also grabs current font instead of always Arial
1.3.6
- Bar chart / Box chart grouped scale now available for all charts
- Grouped scale can now be flipped correctly
- Grouped scale can now be rotated correctly
- Grouped scale can now be the y axis with all the same options
- Bar chart now supports all directions
- Bar chart now has min max elements
1.3.5
- Fixed text positioning on bar charts for negative values
- Added bundled package as a way to use lab D3
1.3.4
- Puerto Rico projection moved
1.3.3
- Puerto Rico built into statemap
1.3.2
- Table no longer builds from scratch each render, uses d3 data binding
1.3.1
- Lib for geoAlbersUsaPr moved to more suitable location
1.3.0
- State map now include Puerto Rico
1.2.1
- Re-deployed
- Fixes for map reset attribute callback calls.
1.1.0
- Lower now has a threshhold instead of being everything after middle.
- Any map feature thats missing its data when data is piped in now has missing class applied
1.0.0
