SVG Scatter/Bubble chart
If you use NPM, npm install d3-chart-scatter. Otherwise, download the latest release.
<script src="https://d3js.org/d3-array.v0.7.min.js"></script>
<script src="https://d3js.org/d3-collection.v0.1.min.js"></script>
<script src="https://d3js.org/d3-color.v0.4.min.js"></script>
<script src="https://d3js.org/d3-format.v0.5.min.js"></script>
<script src="https://d3js.org/d3-interpolate.v0.5.min.js"></script>
<script src="https://d3js.org/d3-time.v0.2.min.js"></script>
<script src="https://d3js.org/d3-time-format.v0.3.min.js"></script>
<script src="https://d3js.org/d3-scale.v0.7.min.js"></script>
<script src="https://d3js.org/d3-selection.v0.7.min.js"></script>
<script src="https://d3js.org/d3-dispatch.v0.4.min.js"></script>
<script src="https://d3js.org/d3-ease.v0.7.min.js"></script>
<script src="https://d3js.org/d3-timer.v0.4.min.js"></script>
<script src="https://d3js.org/d3-transition.v0.2.min.js"></script>
<script src="https://d3js.org/d3-axis.v0.3.min.js"></script>
<script src="../node_modules/d3-chart-xybase/build/d3-chart-xybase.js"></script>
<script src="build/d3-chart-scatter.js"></script>
<script>
var chart = d3_chart_scatter.chart_scatter()
</script>After running npm install in the root folder, to run the example start a simple server in the root folder.
For example, on linux/mac you can run python -m SimpleHTTPServer 8888 and open http://localhost:8888/example/chart_scatter.html
# d3_chart_scatter.chart_scatter()
Constructs a new scatter chart function and returns it.
# d3_chart_scatter.scatter()
Constructs a new scatter chart (bare scatter, no axes) function and returns it.
# chart(context)
Render the chart to the given context, which may be either a selection of SVG container (either SVG or G element).
# chart.chartBase([chartBase])
If chartBase is provided, sets chart's base to this base and returns the chart.
If no argument passed, returns chart's chartBase.
# chart.values([function])
If function is provided, sets chart's getValues to function
If no argument passed, returns chart's chartBase.
Default: data => data.values
# chart.x([function])
If function is provided, sets chart's getX to function
If no argument passed, returns chart's chartBase.
Default: point => point.x
# chart.y([function])
If function is provided, sets chart's getY to function
If no argument passed, returns chart's chartBase.
Default: point => point.y
# chart.size([function])
If function is provided, sets chart's getSize to function
If no argument passed, returns chart's chartBase.
Default: point => point.size || 1
# chart.color([function])
If function is provided, sets chart's getColor to function
If no argument passed, returns chart's chartBase.
Default: point => point.color || 0
# chart.scaleX([scale])
If scale is provided, sets chart's x scale to this scale and returns the chart.
If no argument passed, returns chart's x scale.
Default: d3_scale.scaleLinear()
# chart.scaleY([scale])
If scale is provided, sets chart's y scale to this scale and returns the chart.
If no argument passed, returns chart's y scale.
Default: d3_scale.scaleLinear()
# chart.scaleSize([scale])
If scale is provided, sets chart's size scale to this scale and returns the chart.
If no argument passed, returns chart's size scale.
Default: d3_scale.scaleLinear()
# chart.scaleColor([scale])
If scale is provided, sets chart's color scale to this scale and returns the chart.
If no argument passed, returns chart's color scale.
Default: d3_scale.scaleCategory10()
# chart.sizeRange([min, max])
If [min, max] is provided, sets chart's size scale's range to this and returns the chart.
If no argument passed, returns chart's size scale's range.
Default: [5, 20]
# chart.width(number)
If width is passed, sets chart's overall width to value provided.
If no argument passed, returns current chart's width.
Default: 600
# chart.height(number)
If height is passed, sets chart's overall height to value provided.
If no argument passed, returns current chart's height.
Default: 400
# chart.margin(object)
If margin is passed, sets some or all of the chart's margins.
If no argument passed, returns current chart's margin.
Default: { "top": 10, "right": 10, "bottom": 30, "left": 40 }
# chart.dispatch(dispatch)
If dispatch is passed, sets chart's dispatch and returns the chart.
If no argument passed, returns current chart's dispatch.