D3 js Scatter Plot style body min height 600px margin 0 style script type text javascript src https d3js org d3 v7 min js script script Set Dimensions const xSize 600 const ySize 600 const margin 40 const xMax xSize margin 2 const yMax ySize margin 2 Create Random Points const numPoints 100 const data for let i 0 i numPoints i data push Math random xMax Math random yMax Append SVG Object to the Page const svg d3 select body append svg attr width xSize attr height ySize append g attr transform translate margin margin X Axis const x d3 scaleLinear domain 0 500 range 0 xMax bottom svg append g attr transform translate 0 yMax call d3 axisBottom x attr color green make bottom axis green top svg append g call d3 axisTop x Y Axis const y d3 scaleLinear domain 0 500 range yMax 0 left y axis svg append g call d3 axisLeft y right y axis svg append g attr transform translate yMax 0 call d3 axisRight y Dots svg append g selectAll dot data data enter append circle attr cx function d return d 0 attr cy function d return d 1 attr r 3 style fill blue console log ready script D3 js Scatter Plot with Symbols style body min height 600px margin 0 style script type text javascript src https d3js org d3 v7 min js script script Set Dimensions const xSize 600 const ySize 600 const margin 40 const xMax xSize margin 2 const yMax ySize margin 2 Create Random Points const numPoints 100 const data for let i 0 i numPoints i data push Math random xMax Math random yMax Append SVG Object to the Page const svg d3 select body append svg attr width xSize attr height ySize append g attr transform translate margin margin X Axis const x d3 scaleLinear domain 0 500 range 0 xMax bottom svg append g attr transform translate 0 yMax call d3 axisBottom x attr color green make bottom axis green top svg append g call d3 axisTop x Y Axis const y d3 scaleLinear domain 0 500 range yMax 0 left y axis svg append g call d3 axisLeft y right y axis svg append g attr transform translate yMax 0 call d3 axisRight y d3 symbols An array of all the built in symbols useful for setting up scales d3 symbolCircle A normal circle default symbol d3 symbolCross A cross or plus d3 symbolDiamond A diamond d3 symbolSquare A square d3 symbolStar A 5 point star d3 symbolTriangle An equilateral triangle d3 symbolWye A wye or Latin Y var symbolSqr d3 symbol type d3 symbolStar size 100 Symbol svg append g selectAll dot data data enter append path attr d symbolSqr attr transform function d return translate d 0 d 1 style fill blue console log ready script D3 js Scatter Plot with Symbols Interactive style body min height 600px margin 0 style script type text javascript src https d3js org d3 v7 min js script script Set Dimensions const xSize 600 const ySize 600 const margin 40 const xMax xSize margin 2 const yMax ySize margin 2 Create Random Points const numPoints 100 const data for let i 0 i numPoints i data push Math random xMax Math random yMax Append SVG Object to the Page const svg d3 select body append svg attr width xSize attr height ySize append g attr transform translate margin margin X Axis const x d3 scaleLinear domain 0 500 range 0 xMax bottom svg append g attr transform translate 0 yMax call d3 axisBottom x attr color green make bottom axis green top svg append g call d3 axisTop x Y Axis const y d3 scaleLinear domain 0 500 range yMax 0 left y axis svg append g call d3 axisLeft y right y axis svg append g attr transform translate yMax 0 call d3 axisRight y d3 symbols An array of all the built in symbols useful for setting up scales d3 symbolCircle A normal circle default symbol d3 symbolCross A cross or plus d3 symbolDiamond A diamond d3 symbolSquare A square d3 symbolStar A 5 point star d3 symbolTriangle An equilateral triangle d3 symbolWye A wye or Latin Y var symbolSqr d3 symbol type d3 symbolCross size 100 Symbol svg append g selectAll dot data data enter append path attr d symbolSqr attr transform function d return translate d 0 d 1 style fill red Added hover effects on mouseover function d i d3 select this transition duration 50 attr d d3 symbol type d3 symbolCross size 1000 attr stroke green attr stroke width 10px style fill function d return orange on mouseout function d i d3 select this transition duration 50 attr d d3 symbol type d3 symbolCross size 100 attr stroke red attr stroke width 1px style fill red console log ready script D3 js Scatter Plot with Symbols Tool Tip style body min height 600px margin 0 style script type text javascript src https d3js org d3 v7 min js script script Set Dimensions const xSize 600 const ySize 600 const margin 40 const xMax xSize margin 2 const yMax ySize margin 2 Create Random Points const numPoints 100 const data for let i 0 i numPoints i data push Math random xMax Math random yMax Append SVG Object to the Page const svg d3 select body append svg attr width xSize attr height ySize append g attr transform translate margin margin X Axis const x d3 scaleLinear domain 0 500 range 0 xMax bottom svg append g attr transform translate 0 yMax call d3 axisBottom x attr color green make bottom axis green top svg append g call d3 axisTop x Y Axis const y d3 scaleLinear domain 0 500 range yMax 0 left y axis svg append g call d3 axisLeft y right y axis svg append g attr transform translate yMax 0 call d3 axisRight y var tooltip d3 select body append div attr class tooltip style position absolute style opacity 0 notice it s not visible d3 symbols An array of all the built in symbols useful for setting up scales d3 symbolCircle A normal circle default symbol d3 symbolCross A cross or plus d3 symbolDiamond A diamond d3 symbolSquare A square d3 symbolStar A 5 point star d3 symbolTriangle An equilateral triangle d3 symbolWye A wye or Latin Y var symbolSqr d3 symbol type d3 symbolCross size 100 Symbol svg append g selectAll dot data data enter append path attr d symbolSqr attr transform function d return translate d 0 d 1 style fill red Added hover effects on mouseover function d i d3 select this transition duration 50 attr d d3 symbol type d3 symbolCross size 1000 attr stroke green attr stroke width 10px style fill function d return orange show tool tip tooltip transition duration 50 style opacity 1 set tooltip position and contents tooltip html hello i style left d pageX 10 px style top d pageY 15 px on mouseout function d i d3 select this transition duration 50 attr d d3 symbol type d3 symbolCross size 100 attr stroke red attr stroke width 1px style fill red hide tool tip tooltip transition duration 50 style opacity 0 console log ready script Other things to try Other symbols default ones and custom designs Plot multiple data plots on the same plot different symbol for each plot Modularize the code so that you can put 4 scatter plots next to each other to compare Try extra transition hover animations rotate opacity Hover over display more comprehensive information Add labels to the axis also title Add background grid also add button to toggle grid on off
bolCross A cross or plus d3 symbolDiamond A diamond d3 symbolSquare A square d3 symbolStar A 5 point star d3 symbolTriangle An equilateral triangle d3 symbolWye A wye or Latin Y var symbolSqr d3 symbol type d3 symbolCross size 100 Symbol svg append g selectAll dot data data enter append path attr d symbolSqr attr transform function d return translate d 0 d 1 style fill red Added hover effects on mouseover function d i d3 select this transition duration 50 attr d d3 symbol type d3 symbolCross size 1000 attr stroke green attr stroke width 10px style fill function d return orange on mouseout function d i d3 select this transition duration 50 attr d d3 symbol type d3 symbolCross size 100 attr stroke red attr stroke width 1px style fill red console log ready script D3 js Scatter Plot with Symbols Tool Tip style body min height 600px margin 0 style script type text javascript src https d3js org d3 v7 min js script script Set Dimensions const xSize 600 const ySize 600 const margin 40 const xMax xSize margin 2 const yMax ySize margin 2 Create Random Points const numPoints 100 const data for let i 0 i numPoints i data push Math random xMax Math random yMax Append SVG Object to the Page const svg d3 select body append svg attr width xSize attr height ySize append g attr transform translate margin margin X Axis const x d3 scaleLinear domain 0 500 range 0 xMax bottom svg append g attr transform translate 0 yMax call d3 axisBottom x attr color green make bottom axis green top svg append g call d3 axisTop x Y Axis const y d3 scaleLinear domain 0 500 range yMax 0 left y axis svg append g call d3 axisLeft y right y axis svg append g attr transform translate yMax 0 call d3 axisRight y var tooltip d3 select body append div attr class tooltip style position absolute style opacity 0 notice it s not visible d3 symbols An array of all the built in symbols useful for setting up scales d3 symbolCircle A normal circle default symbol d3 symbolCross A cross or plus d3 symbolDiamond A diamond d3 symbolSquare A square d3 symbolStar A 5 point star d3 symbolTriangle An equilateral triangle d3 symbolWye A wye or Latin Y var symbolSqr d3 symbol type d3 symbolCross size 100 Symbol svg append g selectAll dot data data enter append path attr d symbolSqr attr transform function d return translate d 0 d 1 style fill red Added hover effects on mouseover function d i d3 select this transition duration 50 attr d d3 symbol type d3 symbolCross size 1000 attr stroke green attr stroke width 10px style fill function d return orange show tool tip tooltip transition duration 50 style opacity 1 set tooltip position and contents tooltip html hello i style left d pageX 10 px style top d pageY 15 px on mouseout function d i d3 select this transition duration 50 attr d d3 symbol type d3 symbolCross size 100 attr stroke red attr stroke width 1px style fill red hide tool tip tooltip transition duration 50 style opacity 0 console log ready script Other things to try Other symbols default ones and custom designs Plot multiple data plots on the same plot different symbol for each plot Modularize the code so that you can put 4 scatter plots next to each other to compare Try extra transition hover animations rotate opacity Hover over display more comprehensive information Add labels to the axis also title Add background grid also add button to toggle grid on off