A bare minimum HTML page demonstrating use of CSS and JavaScript.
See also React Starter.
<!DOCTYPE html> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.js"></script>// select the svg area var svg = d3.select("#my_dataviz")
// Handmade legend svg.append("circle").attr("cx",200).attr("cy",130).attr("r", 6).style("fill", "#6e7aca") svg.append("circle").attr("cx",200).attr("cy",150).attr("r", 6).style("fill", "#5bc344") svg.append("circle").attr("cx",200).attr("cy",170).attr("r", 6).style("fill", "#d64e2b") svg.append("circle").attr("cx",200).attr("cy",190).attr("r", 6).style("fill", "#7a001a") svg.append("circle").attr("cx",200).attr("cy",210).attr("r", 6).style("fill", "#c78a1c") svg.append("circle").attr("cx",200).attr("cy",230).attr("r", 6).style("fill", "#c465d6")
svg.append("text").attr("x", 220).attr("y", 130).text("Widgets").style("font-size", "15px").attr("alignment-baseline","middle") svg.append("text").attr("x", 220).attr("y", 150).text("Hosting").style("font-size", "15px").attr("alignment-baseline","middle") svg.append("text").attr("x", 220).attr("y", 170).text("Analytics").style("font-size", "15px").attr("alignment-baseline","middle") svg.append("text").attr("x", 220).attr("y", 190).text("CMS").style("font-size", "15px").attr("alignment-baseline","middle") svg.append("text").attr("x", 220).attr("y", 210).text("Advertising").style("font-size", "15px").attr("alignment-baseline","middle") svg.append("text").attr("x", 220).attr("y", 230).text("Shop").style("font-size", "15px").attr("alignment-baseline","middle")
svg.append("circle").attr("cx",320).attr("cy",130).attr("r", 6).style("fill", "#cdd782") svg.append("circle").attr("cx",320).attr("cy",150).attr("r", 6).style("fill", "#ffe93f") svg.append("circle").attr("cx",320).attr("cy",170).attr("r", 6).style("fill", "#00aaab") svg.append("circle").attr("cx",320).attr("cy",190).attr("r", 6).style("fill", "#004c15") svg.append("circle").attr("cx",320).attr("cy",210).attr("r", 6).style("fill", "#9792be") svg.append("circle").attr("cx",320).attr("cy",230).attr("r", 6).style("fill", "#f29e51")
svg.append("text").attr("x", 340).attr("y", 130).text("Javascript").style("font-size", "15px").attr("alignment-baseline","middle") svg.append("text").attr("x", 340).attr("y", 150).text("Mx").style("font-size", "15px").attr("alignment-baseline","middle") svg.append("text").attr("x", 340).attr("y", 170).text("Media").style("font-size", "15px").attr("alignment-baseline","middle") svg.append("text").attr("x", 340).attr("y", 190).text("Payment").style("font-size", "15px").attr("alignment-baseline","middle") svg.append("text").attr("x",340).attr("y", 210).text("Encoding").style("font-size", "15px").attr("alignment-baseline","middle") svg.append("text").attr("x", 340).attr("y", 230).text("Shipping").style("font-size", "15px").attr("alignment-baseline","middle")
// 3rd column svg.append("circle").attr("cx",440).attr("cy",130).attr("r", 6).style("fill", "#69b3a2") svg.append("circle").attr("cx",440).attr("cy",150).attr("r", 6).style("fill", "#404080") svg.append("circle").attr("cx",440).attr("cy",170).attr("r", 6).style("fill", "#69b3a2") svg.append("circle").attr("cx",440).attr("cy",190).attr("r", 6).style("fill", "#404080") svg.append("circle").attr("cx",440).attr("cy",210).attr("r", 6).style("fill", "#69b3a2") svg.append("circle").attr("cx",440).attr("cy",230).attr("r", 6).style("fill", "#404080")
svg.append("text").attr("x", 460).attr("y", 130).text("variable A").style("font-size", "15px").attr("alignment-baseline","middle") svg.append("text").attr("x", 460).attr("y", 150).text("variable B").style("font-size", "15px").attr("alignment-baseline","middle") svg.append("text").attr("x", 460).attr("y", 170).text("variable A").style("font-size", "15px").attr("alignment-baseline","middle") svg.append("text").attr("x", 460).attr("y", 190).text("variable B").style("font-size", "15px").attr("alignment-baseline","middle") svg.append("text").attr("x",460).attr("y", 210).text("variable A").style("font-size", "15px").attr("alignment-baseline","middle") svg.append("text").attr("x", 460).attr("y", 230).text("variable B").style("font-size", "15px").attr("alignment-baseline","middle")
</script>