d3-chart-scatter

SVG Scatter/Bubble chart

Installing

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>

Running the example

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

API Reference

# 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.