Please note, this is a STATIC archive of website www.tutorialspoint.com from 11 May 2019, cach3.com does not collect or store any user information, there is no "phishing" involved.
Tutorialspoint
Home
Q/A
Tools
Coding Ground
Current Affairs
UPSC Notes
Online Tutors
Code Examples
Whiteboard
Net Meeting
Articles
Library
Videos
eBooks

SampleBarChart

d3js 

<!DOCTYPE html>
<meta charset="utf-8">

	<style>

  .bar{
    fill: steelblue;
  }

  .bar:hover{
    fill: brown;
  }

	.axis {
	  font: 10px sans-serif;
	}

	.axis path,
	.axis line {
	  fill: none;
	  stroke: #000;
	  shape-rendering: crispEdges;
	}

	</style>


<body>
   
<script src="https://d3js.org/d3.v4.min.js"></script>

<script>


data = [
{
	"Letter": "A",
	"Freq": 20},
{
	"Letter" : "B",
	"Freq": 12},
{
	"Letter" : "C",
	"Freq": 47},
{
	"Letter" : "D",
	"Freq": 34},
{
	"Letter" : "E",
	"Freq" : 54},
{
	"Letter" : "F",
	"Freq" : 21},
{
	"Letter" : "G",
	"Freq" : 57},
{
	"Letter" : "H",
	"Freq" : 31},
{
	"Letter" : "I",
	"Freq" : 17},
{
	"Letter" : "J",
	"Freq" : 5},
{
	"Letter" : "K",
	"Freq" : 23},
{
	"Letter" : "L",
	"Freq" : 39},
{
	"Letter" : "M",
	"Freq" : 29},
{
	"Letter" : "N",
	"Freq" : 33},
	{
	"Letter" : "O",
	"Freq" : 18}

]
// set the dimensions of the canvas
var margin = {top: 20, right: 20, bottom: 70, left: 40},
    width = 600 - margin.left - margin.right,
    height = 300 - margin.top - margin.bottom;


// set the ranges
var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);

var y = d3.scale.linear().range([height, 0]);

// define the axis
var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")


var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(10);


// add the SVG element
var svg = d3.select("body").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 + ")");


// load the data


    data.forEach(function(d) {
        d.Letter = d.Letter;
        d.Freq = +d.Freq;
    
  // scale the range of the data
  x.domain(data.map(function(d) { return d.Letter; }));
  y.domain([0, d3.max(data, function(d) { return d.Freq; })]);

  // add axis
  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
    .selectAll("text")
      .style("text-anchor", "end")
      .attr("dx", "-.8em")
      .attr("dy", "-.55em")
      .attr("transform", "rotate(-90)" );

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 5)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Frequency");


  // Add bar chart
  svg.selectAll("bar")
      .data(data)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return x(d.Letter); })
      .attr("width", x.rangeBand())
      .attr("y", function(d) { return y(d.Freq); })
      .attr("height", function(d) { return height - y(d.Freq); });

});

</script>
</body>

Online D3JS Editor

d3js 

<!-- source is https://bl.ocks.org/mbostock/4060366 -->
<!DOCTYPE html>
<htm>
<meta charset="utf-8">
<style>

.links {
  stroke: #000;
  stroke-opacity: 0.2;
}

.polygons {
  fill: none;
  stroke: #000;
}

.polygons :first-child {
  fill: #f00;
}

.sites {
  fill: #000;
  stroke: #fff;
}

.sites :first-child {
  fill: #fff;
}

</style>
<body>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var svg = d3.select("svg").on("touchmove mousemove", moved),
    width = +svg.attr("width"),
    height = +svg.attr("height");

var sites = d3.range(100)
    .map(function(d) { return [Math.random() * width, Math.random() * height]; });

var voronoi = d3.voronoi()
    .extent([[-1, -1], [width + 1, height + 1]]);

var polygon = svg.append("g")
    .attr("class", "polygons")
  .selectAll("path")
  .data(voronoi.polygons(sites))
  .enter().append("path")
    .call(redrawPolygon);

var link = svg.append("g")
    .attr("class", "links")
  .selectAll("line")
  .data(voronoi.links(sites))
  .enter().append("line")
    .call(redrawLink);

var site = svg.append("g")
    .attr("class", "sites")
  .selectAll("circle")
  .data(sites)
  .enter().append("circle")
    .attr("r", 2.5)
    .call(redrawSite);

function moved() {
  sites[0] = d3.mouse(this);
  redraw();
}

function redraw() {
  var diagram = voronoi(sites);
  polygon = polygon.data(diagram.polygons()).call(redrawPolygon);
  link = link.data(diagram.links()), link.exit().remove();
  link = link.enter().append("line").merge(link).call(redrawLink);
  site = site.data(sites).call(redrawSite);
}

function redrawPolygon(polygon) {
  polygon
      .attr("d", function(d) { return d ? "M" + d.join("L") + "Z" : null; });
}

function redrawLink(link) {
  link
      .attr("x1", function(d) { return d.source[0]; })
      .attr("y1", function(d) { return d.source[1]; })
      .attr("x2", function(d) { return d.target[0]; })
      .attr("y2", function(d) { return d.target[1]; });
}

function redrawSite(site) {
  site
      .attr("cx", function(d) { return d[0]; })
      .attr("cy", function(d) { return d[1]; });
}

</script>
</body>
</html>

Online D3JS Editor

d3js 

<!-- source is https://bl.ocks.org/mbostock/4060366 -->
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<style>

#title {
	background-color: darkblue;
	color: white;
	padding: 10px;
	text-align: center;
}

body {
	font-family: 'Montserrat', sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.x.axis path {
  display: none;
}

.line {
  fill: none;
  stroke: limegreen;
  stroke-width: 2px;
}


</style>
<body>
<div class="linechart"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.1/d3.min.js"></script>
<script>

'use strict';

//setup size of line chart
var margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = 600 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

//parse data from file
var parseDate = d3.time.format("%d-%b-%y").parse;

//set scales
var x = d3.time.scale()
    .range([0, width]);

var y = d3.scale.linear()
    .range([height, 0]);

//create axes
var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

//construct the line using points from data
var line = d3.svg.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.users); });

var svg = d3.select(".linechart").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 + ")");

d3.tsv("data.tsv", function(error, data) {
  if (error) throw error;
//traverse through the data 
  data.forEach(function(d) {
    d.date = parseDate(d.date);
    d.users = +d.users;
  });
//establish the domain for x and y axes
  x.domain(d3.extent(data, function(d) { return d.date; }));
  y.domain(d3.extent(data, function(d) { return d.users; }));

//add "groups" 
  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Users (unique)");

  svg.append("path")
      .datum(data)
      .attr("class", "line")
      .attr("d", line);
});
</script>
</body>
</html>

D3JS Select by Class Program

d3js 

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <div class = "myclass">
         Hello World!
      </div>
      
      <script>
         alert(d3.select(".myclass").text());
      </script>
   </body>
</html>

Online D3JS Editor

d3js 

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <div>
         Hello World!    
      </div>
      
      
      <script>
         alert(d3.select("div").text(""));
      </script>
   </body>
</html>

D3js html method program

d3js 

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
          <ul id = "list">
   <li><li>
   <li></li>
</ul> 
      <script>
       d3.select("#list").selectAll("li").data([10, 20, 30, 25, 15]);
      </script>
   </body>
</html>

Online D3JS Editor

d3js 

<html>
    <head>
        <title>D3.js</title>
        <script src="https://d3js.org/d3.v5.min.js"></script>
    </head>
    <body>
        <h1>Hi this is my first D3js project</h1>
        d3.select(h1).style('color','red');
    </body>
</html>

Online D3JS Editor

d3js 

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>D3.js collapsible tree with boxes</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" type="text/css" href="tree-boxes.css">

    <script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script src="https://d3js.org/d3.v3.min.js" type="text/javascript"></script>
    <script src="tree-boxes.js" type="text/javascript"></script>
  </head>
  <body>
    <div class="container">
        <ct-visualization id="tree-container"></ct-visualization>
        <script>
            d3.json("data-example.json", function(error, json) {
                treeBoxes('', json.tree);
            });
        </script>
    </div>
</body>
</html>

test

d3js 

<!-- source is https://bl.ocks.org/mbostock/4060366 -->
<!DOCTYPE html>
<htm>
<meta charset="utf-8">
<style>

.links {
  stroke: #000;
  stroke-opacity: 0.2;
}

.polygons {
  fill: none;
  stroke: #000;
}

.polygons :first-child {
  fill: #f00;
}

.sites {
  fill: #000;
  stroke: #fff;
}

.sites :first-child {
  fill: #fff;
}

</style>
<body>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var svg = d3.select("svg").on("touchmove mousemove", moved),
    width = +svg.attr("width"),
    height = +svg.attr("height");

var sites = d3.range(100)
    .map(function(d) { return [Math.random() * width, Math.random() * height]; });

var voronoi = d3.voronoi()
    .extent([[-1, -1], [width + 1, height + 1]]);

var polygon = svg.append("g")
    .attr("class", "polygons")
  .selectAll("path")
  .data(voronoi.polygons(sites))
  .enter().append("path")
    .call(redrawPolygon);

var link = svg.append("g")
    .attr("class", "links")
  .selectAll("line")
  .data(voronoi.links(sites))
  .enter().append("line")
    .call(redrawLink);

var site = svg.append("g")
    .attr("class", "sites")
  .selectAll("circle")
  .data(sites)
  .enter().append("circle")
    .attr("r", 2.5)
    .call(redrawSite);

function moved() {
  sites[0] = d3.mouse(this);
  redraw();
}

function redraw() {
  var diagram = voronoi(sites);
  polygon = polygon.data(diagram.polygons()).call(redrawPolygon);
  link = link.data(diagram.links()), link.exit().remove();
  link = link.enter().append("line").merge(link).call(redrawLink);
  site = site.data(sites).call(redrawSite);
}

function redrawPolygon(polygon) {
  polygon
      .attr("d", function(d) { return d ? "M" + d.join("L") + "Z" : null; });
}

function redrawLink(link) {
  link
      .attr("x1", function(d) { return d.source[0]; })
      .attr("y1", function(d) { return d.source[1]; })
      .attr("x2", function(d) { return d.target[0]; })
      .attr("y2", function(d) { return d.target[1]; });
}

function redrawSite(site) {
  site
      .attr("cx", function(d) { return d[0]; })
      .attr("cy", function(d) { return d[1]; });
}

</script>
</body>
</html>

Mapy, grafy.

d3js 

<!-- source is https://bl.ocks.org/mbostock/4060366 -->
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<style>

.links {
  stroke: #000;
  stroke-opacity: 0.2;
}

.polygons {
  fill: none;
  stroke: #000;
}

.polygons :first-child {
  fill: #f00;
}

.sites {
  fill: #000;
  stroke: #fff;
}

.sites :first-child {
  fill: #fff;
}

</style>

<body>
<script src="https://d3js.org/d3.v5.min.js"></script>

<script>
var mapData = {
  "mapName" : "Piana",
  "xSizePix" : 900,
  "ySizePix" : 900,
  "mapScale" : 55,
  "xExitPoint" : 600,
  "yExitPoint" : 300,
  "places": [
    {
      "id": 34,
      "type": "building",
      "name": "Świątynia",
      "color": "#555",
      "x": -2,
      "y": 2
    },
    {
      "id": 35,
      "type": "building",
      "name": "Świątynia",
      "color": "#555",
      "x": -2,
      "y": 1
    },
    {
      "id": 118,
      "type": "building",
      "name": "Poczta",
      "color": "#f43",
      "x": -8,
      "y": -1
    },
    {
      "id": 0,
      "type": "road",
      "name": "furtka",
      "color": "#aaa",
      "x": -0,
      "y": 0
    },
    {
      "id": 1,
      "type": "road",
      "name": "droga",
      "color": "#aaa",
      "x": -1,
      "y": 0
    },
    {
      "id": 2,
      "type": "road",
      "name": "droga",
      "color": "#aaa",
      "x": -2,
      "y": 0
    },
    {
      "id": 3,
      "type": "road",
      "name": "droga",
      "color": "#aaa",
      "x": -3,
      "y": 1
    },
    {
      "id": 4,
      "type": "road",
      "name": "droga",
      "color": "#aaa",
      "x": -4,
      "y": 2
    },
    {
      "id": 5,
      "type": "road",
      "name": "droga",
      "color": "#aaa",
      "x": -5,
      "y": 2
    },
    {
      "id": 54,
      "type": "road",
      "name": "pomost",
      "color": "#a55",
      "x": -4,
      "y": 3
    },
    {
      "id": 58,
      "type": "road",
      "name": "droga",
      "color": "#aaa",
      "x": -6,
      "y": 1
    },
    {
      "id": 587,
      "type": "building",
      "name": "Sklep",
      "color": "#777",
      "x": -7,
      "y": 1
    },
    {
      "id": 6,
      "type": "road",
      "name": "droga",
      "color": "#aaa",
      "x": -6,
      "y": 3
    },
    {
      "id": 7,
      "type": "road",
      "name": "droga",
      "color": "#aaa",
      "x": -7,
      "y": 3
    },
    {
      "id": 71,
      "type": "road",
      "name": "droga",
      "color": "#aaa",
      "x": -7,
      "y": 2
    },
    {
      "id": 75,
      "type": "building",
      "name": "Gospoda",
      "color": "#777",
      "x": -7,
      "y": 4
    },
    {
      "id": 76,
      "type": "road",
      "name": "pomost",
      "color": "#a55",
      "x": -8,
      "y": 4
    },
    {
      "id": 8,
      "type": "road",
      "name": "droga",
      "color": "#aaa",
      "x": -8,
      "y": 2
    },
    {
      "id": 81,
      "type": "road",
      "name": "droga",
      "color": "#aaa",
      "x": -8,
      "y": 1
    },
    {
      "id": 86,
      "type": "road",
      "name": "pomost",
      "color": "#a55",
      "x": -9,
      "y": 3
    },
    {
      "id": 9,
      "type": "road",
      "name": "droga",
      "color": "#aaa",
      "x": -9,
      "y": 1
    },
    {
      "id": 10,
      "type": "road",
      "name": "droga",
      "color": "#aaa",
      "x": -8,
      "y": 0
    },
    {
      "id": 11,
      "type": "road",
      "name": "droga",
      "color": "#aaa",
      "x": -7,
      "y": 0
    },
    {
      "id": 12,
      "type": "road",
      "name": "droga",
      "color": "#aaa",
      "x": -6,
      "y": -1
    },
    {
      "id": 121,
      "type": "building",
      "name": "chata",
      "color": "#aaa",
      "x": -6,
      "y": -2
    },
    {
      "id": 13,
      "type": "road",
      "name": "droga",
      "color": "#aaa",
      "x": -5,
      "y": -1
    },
    {
      "id": 135,
      "type": "building",
      "name": "Gospoda",
      "color": "#777",
      "x": -5,
      "y": 0
    },
    {
      "id": 136,
      "type": "building",
      "name": "Gospoda",
      "color": "#777",
      "x": -5,
      "y": 1
    },
    {
      "id": 14,
      "type": "road",
      "name": "droga",
      "color": "#aaa",
      "x": -4,
      "y": 0
    },
    {
      "id": 15,
      "type": "road",
      "name": "droga",
      "color": "#aaa",
      "x": -3,
      "y": 0
    }
  ],
  "joints": [
      [0,1],[1,2],[2,3],[3,4],[3,34],[4,5],[5,6],[5,54],[5,58],[58,587],[6,7],
      [7,8],[7,71],[7,75],[7,76],[8,9],[8,81],[8,86],[9,10],[10,11],[11,12],
      [11,58],[11,118],[12,13],[12,121],[13,14],[13,135],[135,136],[14,15],
      [15,2],[34,35]
      ]
};

var bodySelect = d3.select("body");
var svgCanvas = bodySelect.append("svg")
    .attr("width", mapData.xSizePix)
    .attr("height", mapData.ySizePix);

svgCanvas.selectAll("line")
    .data(mapData.joints)
    .enter()
    .append("line")
    .attr("x1", function(d) {return elScreenCentrPosX(d[0])})
    .attr("y1", function(d) {return elScreenCentrPosY(d[0])})
    .attr("x2", function(d) {return elScreenCentrPosX(d[1])})
    .attr("y2", function(d) {return elScreenCentrPosY(d[1])})
    .attr("stroke-width", 6)
    .style("stroke", function(d) {return elGetColor(d[0])})
    ;

svgCanvas.selectAll("rect")
    .data(mapData.places)
    .enter()
    .append("rect")
    .attr("x", function(d) {return elScreenPosX(d.x, d.type)})
    .attr("y", function(d) {return elScreenPosY(d.y, d.type)})
    .attr("height", function(d) {return elScreenSize(d.type)})
    .attr("width", function(d) {return elScreenSize(d.type)})
    .attr("rx", function(d) {return elRoundRadi(d.type)})
    .attr("ry", function(d) {return elRoundRadi(d.type)})
    .attr("fill", function(d) {return d.color})
    .attr("stroke", "black")
    ;

svgCanvas.selectAll("text")
    .data(mapData.places)
    .enter()
    .append("text")
    .attr("x", function(d) {return elScreenPosX(d.x, d.type)+5})
    .attr("y", function(d) {return elScreenPosY(d.y, d.type)+15})
    .text(function(d) {return d.id})
    ;

function elGetColor(placeId){
    var color = "black";
    for (var i of mapData.places){
      if (i.id == placeId) {
          color = i.color;
      }
    };
    return color;
}

function elScreenPosX(unscaledPos, type){
    var delta = (mapData.mapScale - elScreenSize(type))/2;
    return mapData.xExitPoint + unscaledPos * mapData.mapScale + delta;
}

function elScreenPosY(unscaledPos, type){
    var delta = (mapData.mapScale - elScreenSize(type))/2;
    return mapData.yExitPoint + unscaledPos * mapData.mapScale + delta;
}

function elScreenCentrPosX(placeId){
    var centrPos = 0;
    for (var i of mapData.places){
      if (i.id == placeId) {
        centrPos = i.x * mapData.mapScale + mapData.xExitPoint + mapData.mapScale/2;
      }
    };
    return centrPos;
}

function elScreenCentrPosY(placeId){
    var centrPos = 0;
    for (var i of mapData.places){
      if (i.id == placeId) {
        return i.y * mapData.mapScale + mapData.yExitPoint + mapData.mapScale/2;
      }
    };
    return centrPos;
}

function elScreenSize(type){
    if (type == "building") return 50;
    if (type == "road") return 40;
    return 5;
}

function elRoundRadi(type){
    if (type == "building") return 5;
    if (type == "road") return 1;
    return 0;
}

function elColor(type){
    if (type == "building") return 5;
    if (type == "road") return 1;
    return 0;
}


</script>
</body>
</html>

1 2 3 4 5 6 7 ... 10 Next
Advertisements
Loading...
img img img img img img

Follow

© Copyright 2019. All Rights Reserved.

Newsletter

We use cookies to provide and improve our services. By using our site, you consent to our Cookies Policy.