var script document createElement script script src https d3js org d3 v4 min js document head appendChild script onload function d3 select body append span text Hello world var scripts document createElement script scripts src https d3js org d3 v4 min js document head appendChild scripts document body style height 60pt onload function d3 select body append h3 text Hello world d3 select h3 style color darkblue d3 select h3 style font size 24px var scripts document createElement script scripts src https d3js org d3 v4 min js document body appendChild scripts document body style height 170px scripts onload function console log loaded d3js script d3 select body selectAll p data 10 20 30 50 70 text function d return d enter append p text function d return d console log finished var scripts document createElement script scripts src https d3js org d3 v4 min js document body appendChild scripts document body style height 170px scripts onload function console log loaded d3js script var data This is the data we want to visualize In reality it usually comes from a file or database x 10 y 10 x 10 y 20 x 10 y 30 x 10 y 40 x 10 y 50 x 10 y 80 x 10 y 90 x 10 y 100 x 10 y 110 x 20 y 30 x 20 y 120 x 30 y 10 x 30 y 20 x 30 y 30 x 30 y 40 x 30 y 50 x 30 y 80 x 30 y 90 x 30 y 100 x 30 y 110 x 40 y 120 x 50 y 10 x 50 y 20 x 50 y 30 x 50 y 40 x 50 y 50 x 50 y 80 x 50 y 90 x 50 y 100 x 50 y 110 x 60 y 10 x 60 y 30 x 60 y 50 x 70 y 10 x 70 y 30 x 70 y 50 x 70 y 90 x 70 y 100 x 70 y 110 x 80 y 80 x 80 y 120 x 90 y 10 x 90 y 20 x 90 y 30 x 90 y 40 x 90 y 50 x 90 y 80 x 90 y 120 x 100 y 50 x 100 y 90 x 100 y 100 x 100 y 110 x 110 y 50 x 120 y 80 x 120 y 90 x 120 y 100 x 120 y 110 x 120 y 120 x 130 y 10 x 130 y 20 x 130 y 30 x 130 y 40 x 130 y 50 x 130 y 80 x 130 y 100 x 140 y 50 x 140 y 80 x 140 y 100 x 140 y 110 x 150 y 50 x 150 y 90 x 150 y 120 x 170 y 20 x 170 y 30 x 170 y 40 x 170 y 80 x 170 y 90 x 170 y 100 x 170 y 110 x 170 y 120 x 180 y 10 x 180 y 50 x 180 y 120 x 190 y 10 x 190 y 50 x 190 y 120 x 200 y 20 x 200 y 30 x 200 y 40 x 210 y 80 x 210 y 90 x 210 y 100 x 210 y 110 x 210 y 120 x 220 y 80 x 220 y 120 x 230 y 80 x 230 y 120 x 240 y 90 x 240 y 100 x 240 y 110 x 270 y 70 x 270 y 80 x 270 y 90 x 270 y 100 x 270 y 120 The following code chains a bunch of methods Method chaining is what makes d3 very simple and concise d3 select body append svg selectAll d3 calls the d3 library select selects the object in this case the body of HTML append adds SVG element to the body selectAll selects all SVG elements data data data gets the data from the variable data enter append circle enter enters the data into the SVG the data enter as circles with append circle attr r 3 attr adds alters atributes of SVG such as radius r making it 3 pixels attr cx function d return d x coordinates cx circles x coordinates attr cy function d return d y coordinates cy circles y coordinates style fill darkblue style changes CSS of the SVG in this case fills circles with darkblue color console log finished var scripts document createElement script scripts src https d3js org d3 v4 min js document body appendChild scripts document body style height 220px scripts onload function console log loaded d3js script var svg d3 select body create Svg element append svg attr height 200 attr width 200 style border solid 8px red svg append line attr x1 50 attr y1 30 attr x2 150 attr y2 100 attr stroke black attr stroke width 2px console log finished var scripts document createElement script scripts src https d3js org d3 v4 min js document body appendChild scripts document body style height 220px scripts onload function console log loaded d3js script var svg d3 select body create svg element append svg attr height 200 attr width 600 style border solid 1px orange Create a scale transform value in pixel var x d3 scaleLinear domain 0 100 This is the min and the max of the data 0 to 100 if percentages range 40 300 This is the corresponding value I want in Pixel svg append g attr transform translate 50 40 call d3 axisBottom x console log finished var scripts document createElement script scripts src https d3js org d3 v4 min js document body appendChild scripts document body style height 420px let scatterArea document createElement div scatterArea id scatter area document body appendChild scatterArea scripts onload function console log loaded d3js script set the dimensions and margins of the graph var margin top 10 right 40 bottom 30 left 30 width 450 margin left margin right height 400 margin top margin bottom append the svg object to the body of the page var svG d3 select scatter area append svg attr width width margin left margin right attr height height margin top margin bottom append g attr transform translate margin left margin top Create data var data x 10 y 20 x 40 y 90 x 80 y 50 X scale and Axis var x d3 scaleLinear domain 0 100 This is the min and the max of the data 0 to 100 if percentages range 0 width This is the corresponding value I want in Pixel svG append g attr transform translate 0 height call d3 axisBottom x X scale and Axis var y d3 scaleLinear domain 0 100 This is the min and the max of the data 0 to 100 if percentages range height 0 This is the corresponding value I want in Pixel svG append g call d3 axisLeft y Add 3 dots for 0 50 and 100 svG selectAll whatever data data enter append circle attr cx function d return x d x attr cy function d return y d y attr r 7 console log finished var scripts document createElement script scripts src https d3js org d3 v4 min js document body appendChild scripts document body style height 320px scripts onload function console log loaded d3js script var margin top 20 right 20 bottom 60 left 80 width 300 margin left margin right height 300 margin top margin bottom var data language Python value 30 language Java value 20 language C C value 15 language Javascript value 35 language PHP value 15 var colors 00A5E3 FF96C5 00CDAC FFA23A 74737A var svg d3 select body create Svg element append svg attr width width margin right margin left attr height height margin top margin bottom style border solid 1px red attr transform translate 5 5 var chart svg append g attr transform translate margin left margin top attr width width attr height height var pie d3 pie value d d value var color scale d3 scaleOrdinal domain data map d d language range colors let arc d3 arc outerRadius 100 innerRadius 0 var p chart chart selectAll pie data pie data enter append g attr transform translate 70 130 p chart append path attr d arc attr fill d return color scale d data language p chart append text text function d return d data language attr transform function d return translate arc centroid d style text anchor middle console log finished var scripts document createElement script scripts src https d3js org d3 v4 min js document body appendChild scripts document body style height 320px scripts onload function console log loaded d3js script var svg d3 select body append svg attr width 500 attr height 500 var bar1 svg append rect attr fill blue attr x 100 attr y 20 attr height 20 attr width 10 var bar2 svg append rect attr fill blue attr x 120 attr y 20 attr height 20 attr width 10 update function update bar1 transition ease d3 easeLinear duration 2000 attr height 100 bar2 transition ease d3 easeLinear duration 2000 delay 2000 attr height 100 console log finished var scripts document createElement script scripts src https d3js org d3 v7 min js note v7 introduces join method document body appendChild scripts document body style height 320px scripts onload function console log loaded d3js script var svg d3 select body append svg attr width 500 attr height 500 var data var colors d3 scaleOrdinal d3 schemeSet3 function update var height document body clientHeight var width document body clientWidth var h height data length d3 select svg selectAll rect data data join rect style fill d i colors i transition attr width d d value width attr height h 1 attr y d i i h function makedata var num parseInt Math random 20 5 data d3 range num map d return value Math random d3 select svg on click function makedata update makedata update console log finished end onload
00 This is the min and the max of the data 0 to 100 if percentages range 40 300 This is the corresponding value I want in Pixel svg append g attr transform translate 50 40 call d3 axisBottom x console log finished var scripts document createElement script scripts src https d3js org d3 v4 min js document body appendChild scripts document body style height 420px let scatterArea document createElement div scatterArea id scatter area document body appendChild scatterArea scripts onload function console log loaded d3js script set the dimensions and margins of the graph var margin top 10 right 40 bottom 30 left 30 width 450 margin left margin right height 400 margin top margin bottom append the svg object to the body of the page var svG d3 select scatter area append svg attr width width margin left margin right attr height height margin top margin bottom append g attr transform translate margin left margin top Create data var data x 10 y 20 x 40 y 90 x 80 y 50 X scale and Axis var x d3 scaleLinear domain 0 100 This is the min and the max of the data 0 to 100 if percentages range 0 width This is the corresponding value I want in Pixel svG append g attr transform translate 0 height call d3 axisBottom x X scale and Axis var y d3 scaleLinear domain 0 100 This is the min and the max of the data 0 to 100 if percentages range height 0 This is the corresponding value I want in Pixel svG append g call d3 axisLeft y Add 3 dots for 0 50 and 100 svG selectAll whatever data data enter append circle attr cx function d return x d x attr cy function d return y d y attr r 7 console log finished var scripts document createElement script scripts src https d3js org d3 v4 min js document body appendChild scripts document body style height 320px scripts onload function console log loaded d3js script var margin top 20 right 20 bottom 60 left 80 width 300 margin left margin right height 300 margin top margin bottom var data language Python value 30 language Java value 20 language C C value 15 language Javascript value 35 language PHP value 15 var colors 00A5E3 FF96C5 00CDAC FFA23A 74737A var svg d3 select body create Svg element append svg attr width width margin right margin left attr height height margin top margin bottom style border solid 1px red attr transform translate 5 5 var chart svg append g attr transform translate margin left margin top attr width width attr height height var pie d3 pie value d d value var color scale d3 scaleOrdinal domain data map d d language range colors let arc d3 arc outerRadius 100 innerRadius 0 var p chart chart selectAll pie data pie data enter append g attr transform translate 70 130 p chart append path attr d arc attr fill d return color scale d data language p chart append text text function d return d data language attr transform function d return translate arc centroid d style text anchor middle console log finished var scripts document createElement script scripts src https d3js org d3 v4 min js document body appendChild scripts document body style height 320px scripts onload function console log loaded d3js script var svg d3 select body append svg attr width 500 attr height 500 var bar1 svg append rect attr fill blue attr x 100 attr y 20 attr height 20 attr width 10 var bar2 svg append rect attr fill blue attr x 120 attr y 20 attr height 20 attr width 10 update function update bar1 transition ease d3 easeLinear duration 2000 attr height 100 bar2 transition ease d3 easeLinear duration 2000 delay 2000 attr height 100 console log finished var scripts document createElement script scripts src https d3js org d3 v7 min js note v7 introduces join method document body appendChild scripts document body style height 320px scripts onload function console log loaded d3js script var svg d3 select body append svg attr width 500 attr height 500 var data var colors d3 scaleOrdinal d3 schemeSet3 function update var height document body clientHeight var width document body clientWidth var h height data length d3 select svg selectAll rect data data join rect style fill d i colors i transition attr width d d value width attr height h 1 attr y d i i h function makedata var num parseInt Math random 20 5 data d3 range num map d return value Math random d3 select svg on click function makedata update makedata update console log finished end onload