cytoscape-data.js

var cy = cytoscape({
	container: document.getElementById("cy"),
	elements: [
	// nodes
	{data: {id: "a", name:"1"}},
	{data: {id: "b", name:"2"}},
	{data: {id: "c", name:"3"}},
	{data: {id: "d", name:"4"}},
	{data: {id: "e", name:"5"}},
	{data: {id: "f", name:"6"}},
	{data: {id: "g", name:"7"}},
	// edges
	{
		data: {
			source: "a",
			target: "b"
		}
	},{
		data: {
			source: "a",
			target: "c"
		}
	},{
		data: {
			source: "b",
			target: "d"
		}
	},{
		data: {
			source: "b",
			target: "e"
		}
	},{
		data: {
			source: "c",
			target: "f"
		}
	},{
		data: {
			source: "c",
			target: "g"
		}
	}],
	layout: {
		name: "breadthfirst",
		directed: true,
		padding: 30,
		avoidOverlap: true
	},
	style: [
	{
		selector: "node",
		style: {
			shape: "circle",
			"background-color": "red",
			label: "data(name)"
		}
	}]
});