Reid  Rohan

Reid Rohan

1656956820

D3-snippets: An Atom Package with D3v5 Snippets

d3-snippets

An Atom package with D3v5 snippets. Accelerate your graphics!

Contributions are appreciated, if you miss a snippet feel free to create an issue or open a pull request.

d3-snippets in action

Install

You can install it inside Atom (just search for d3-snippets) or via command line:

$ apm install d3-snippets

Reference

# app <>

Append something.

.append('${1:}')

# area <>

Area generator.

const area = d3.area()
    .x(d => x(d.${1:}))
    .y1(d => y(d.${2:}))
    .y0(y(0));

# attr <>

Set attributes.

.attr('${1:}', '${2:}')

# axisb <>

Bottom-oriented axis.

d3.axisBottom(${1:x});

# axisl <>

Left-oriented axis.

d3.axisLeft(${1:y});

# axisr <>

Right-oriented axis.

d3.axisRight(${1:y});

# axist <>

Top-oriented axis.

d3.axisTop(${1:x});

# axis <>

Create a SVG axis.

d3.axis()
    .scale(${1:})
    .ticks(${2:})
    .orient('${3:}')

# createblock <>

Scaffold a block.

<!DOCTYPE html>
<style>
</style>
<body>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
${1:}
</script>

# circle <>

Create a SVG circle.

.enter()
    .append('circle')
    .attr('cx', ${1:})
    .attr('cy', ${2:})
    .attr('r', ${3:})
    .style('fill', '${4:#111}');

# class <>

Set the element class.

.attr('class', '${1:}')

# csv <>

Load a CSV file.

d3.csv('${1:}').then(data => {
  ${2:console.log(data);}
});

# curve <>

Curve shorthand.

.curve(d3.${1:curveCatmullRom}.alpha(0.5));

# fdi <>

Return the data and the index.

(d, i) => ${1:}

# fd <>

Return the data.

d => ${1:}

# dom <>

Set the scale domain.

.domain([${1:}, ${2:}])

# dur <>

Set the transition duration.

.duration(${1:})

# ellipse <>

Create a SVG ellipse.

.enter().append('ellipse')
    .attr('cx', ${1:})
    .attr('cy', ${2:})
    .attr('rx', ${3:})
    .attr('ry', ${4:})
    .style('fill', '${5:#111}');

# ent <>

Enter the data.

.enter()

# extent <>

Set the dataset extent.

d3.extent(${1:data}, d => d.${2:value});

# fill-opacity <>

Set the element fill opacity.

.attr('fill-opacity', ${1:0.5})

# fill <>

Set the element fill.

.attr('fill', '${1:none}')

# fn <>

Blank anonymous function.

() => ${1:}

# geomap <>

Create the projection and path for a map.

const projection = d3.${1:geoMercator}()
    .fitSize([${2:width}, ${3:height}], ${4:land});

const path = d3.geoPath()
    .projection(projection);
${7:}

# g <>

Create a SVG group.

svg
    .append('g')
    .attr('class', '${1:}')

# join <>

Start with a data join.

d3.selectAll('${1:}')
    .data(${2:})

# json <>

Load a JSON file.

d3.json('${1:}').then(data => {
  ${2:console.log(data);}
});

# lineg <>

Line generator.

const line = d3.line()
  .x(d => x(d.${1:}))
  .y(d => y(d.${2:}));

# line <>

Create a SVG Line.

.enter().append('line')
    .attr('x1', ${1:})
    .attr('y1', ${2:})
    .attr('x2', ${3:})
    .attr('y2', ${4:})
    .style('stroke', '${5:#111}');

# locale <>

Set a default locale.

const ${1:en_US} = {
    'decimal': '.',
    'thousands': ',',
    'grouping': [3],
    'currency': ['$', ''],
    'dateTime': '%a %b %e %X %Y',
    'date': '%m/%d/%Y',
    'time': '%H:%M:%S',
    'periods': ['AM', 'PM'],
    'days': ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
    'shortDays': ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
    'months': ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
    'shortMonths': ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}

formatDefaultLocale(${2:en_US});
timeFormatDefaultLocale(${3:en_US});

# margin <>

Append a SVG with the margin convention.

const margin = {top: ${1:20}, right: ${2:10}, bottom: ${3:20}, left: ${4:10}},
    width = ${5:960} - margin.left - margin.right,
    height = ${6:500} - margin.top - margin.bottom;

const svg = d3.select('${7: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 + ')');

${8:}

# max <>

Get the maximum value.

d3.max(${1:data}, d => d.${2:value});

# min <>

Get the minimum value.

d3.min(${1:data}, d => d.${2:value});

# nest <>

Nest a dataset.

const nest = d3.nest()
    .key(d => d.${1:})
    .entries(${2:});

# on <>

Listen for events on the selection.

.on('${1:}', ${2:})

# queue-promise <>

Load multiple files using a Promise.

Promise.all([
    d3.${1:json}('${2:}'),
    d3.${3:json}('${4:}')
  ]).then([${5:file1}, ${6:file2}] => {
    console.log(${7:file1}, ${8:file1});
  })

# queue <>

Create a queue to load multiple files.

d3.queue()
    .defer(${1:d3.json}, '${2:}')
    .defer(${3:d3.json}, '${4:}')
    .await(function(error, ${5:file1}, ${6:file2}) {
        console.log(${7:file1}, ${8:file1});
    });

# r <>

Set the element radius.

.attr('r', ${1:5})

# ran <>

Set the scale range.

.range([${1:}, ${2:}])

# rect <>

Create a SVG rect.

.enter().append('rect')
    .attr('x', ${1:})
    .attr('y', ${2:})
    .attr('width', ${3:width})
    .attr('height', ${4:height})
    .attr('rx', ${5:0})
    .attr('ry', ${6:0})
    .style('fill', '${7:#111}');

# seq <>

Create a sequential scale.

d3.scaleSequential(d3.${1:interpolateViridis})
    .domain([${2:}])

# scale <>

Create a sample scale.

d3.${1:scaleLinear}()
    .domain([${2:}, ${3:}])
    .range([${4:}, ${5:}]);

# sel <>

Select an element.

d3.select('${1:}')

# sela <>

Select all the elements.

d3.selectAll('${1:}')

# sort <>

Sort a dataset.

${1:data}.sort((a, b) => ${2:a}.${3:value} - ${4:b}.${5:value});

# stroke-opacity <>

Set the element stroke opacity.

.attr('stroke-opacity', ${1:0.5})

# stroke-width <>

Set the element stroke width.

.attr('stroke-width', ${1:1})

# stroke <>

Set the element stroke.

.attr('stroke', '${1:black}')

# style <>

Set the element style.

.style('${1:}', '${2:}')

# anchor <>

Set the text anchor.

.attr('text-anchor', '${1:middle}')

# text <>

Set the element text.

.text('${1:}')

# tickSize <>

Set the tick size.

.tickSize(${1:})

# tickValues <>

Set the tick values.

.tickValues(['${1:}'])

# translate <>

Translate the element.

.attr('transform', `translate(${${1:0}},${${2:0}})`)

# voronoi <>

Create a Voronoi diagram.

const voronoi = d3.voronoi()
    .x(d => x(d.${1:}))
    .y(d => y(d.${2:}))
    .extent([[0, 0], [${3:width}, ${4:height}]]);

const voronoiGroup = svg.append('g')
    .attr('class', 'voronoi');

voronoiGroup.selectAll('path')
    .data(voronoi.polygons(${5:data}))
    .enter().append('path')
    .attr('d', d => d ? 'M' + d.join('L') + 'Z' : null)

# x <>

Set the x position.

.attr('x', ${1:})

# y <>

Set the y position.

.attr('y', ${1:})

Hacking

$ cd ~/.atom/packages
$ git clone git@github.com:martgnz/d3-snippets.git
$ cd d3-snippets
$ apm install
$ apm link

Credit

Most of the inspiration comes from fabriotav's and shancarter's Sublime Text packages.

Author: Martgnz
Source Code: https://github.com/martgnz/d3-snippets 
License: MIT license

#javascript #d3 #graphic 

What is GEEK

Buddha Community

D3-snippets: An Atom Package with D3v5 Snippets
Reid  Rohan

Reid Rohan

1656956820

D3-snippets: An Atom Package with D3v5 Snippets

d3-snippets

An Atom package with D3v5 snippets. Accelerate your graphics!

Contributions are appreciated, if you miss a snippet feel free to create an issue or open a pull request.

d3-snippets in action

Install

You can install it inside Atom (just search for d3-snippets) or via command line:

$ apm install d3-snippets

Reference

# app <>

Append something.

.append('${1:}')

# area <>

Area generator.

const area = d3.area()
    .x(d => x(d.${1:}))
    .y1(d => y(d.${2:}))
    .y0(y(0));

# attr <>

Set attributes.

.attr('${1:}', '${2:}')

# axisb <>

Bottom-oriented axis.

d3.axisBottom(${1:x});

# axisl <>

Left-oriented axis.

d3.axisLeft(${1:y});

# axisr <>

Right-oriented axis.

d3.axisRight(${1:y});

# axist <>

Top-oriented axis.

d3.axisTop(${1:x});

# axis <>

Create a SVG axis.

d3.axis()
    .scale(${1:})
    .ticks(${2:})
    .orient('${3:}')

# createblock <>

Scaffold a block.

<!DOCTYPE html>
<style>
</style>
<body>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
${1:}
</script>

# circle <>

Create a SVG circle.

.enter()
    .append('circle')
    .attr('cx', ${1:})
    .attr('cy', ${2:})
    .attr('r', ${3:})
    .style('fill', '${4:#111}');

# class <>

Set the element class.

.attr('class', '${1:}')

# csv <>

Load a CSV file.

d3.csv('${1:}').then(data => {
  ${2:console.log(data);}
});

# curve <>

Curve shorthand.

.curve(d3.${1:curveCatmullRom}.alpha(0.5));

# fdi <>

Return the data and the index.

(d, i) => ${1:}

# fd <>

Return the data.

d => ${1:}

# dom <>

Set the scale domain.

.domain([${1:}, ${2:}])

# dur <>

Set the transition duration.

.duration(${1:})

# ellipse <>

Create a SVG ellipse.

.enter().append('ellipse')
    .attr('cx', ${1:})
    .attr('cy', ${2:})
    .attr('rx', ${3:})
    .attr('ry', ${4:})
    .style('fill', '${5:#111}');

# ent <>

Enter the data.

.enter()

# extent <>

Set the dataset extent.

d3.extent(${1:data}, d => d.${2:value});

# fill-opacity <>

Set the element fill opacity.

.attr('fill-opacity', ${1:0.5})

# fill <>

Set the element fill.

.attr('fill', '${1:none}')

# fn <>

Blank anonymous function.

() => ${1:}

# geomap <>

Create the projection and path for a map.

const projection = d3.${1:geoMercator}()
    .fitSize([${2:width}, ${3:height}], ${4:land});

const path = d3.geoPath()
    .projection(projection);
${7:}

# g <>

Create a SVG group.

svg
    .append('g')
    .attr('class', '${1:}')

# join <>

Start with a data join.

d3.selectAll('${1:}')
    .data(${2:})

# json <>

Load a JSON file.

d3.json('${1:}').then(data => {
  ${2:console.log(data);}
});

# lineg <>

Line generator.

const line = d3.line()
  .x(d => x(d.${1:}))
  .y(d => y(d.${2:}));

# line <>

Create a SVG Line.

.enter().append('line')
    .attr('x1', ${1:})
    .attr('y1', ${2:})
    .attr('x2', ${3:})
    .attr('y2', ${4:})
    .style('stroke', '${5:#111}');

# locale <>

Set a default locale.

const ${1:en_US} = {
    'decimal': '.',
    'thousands': ',',
    'grouping': [3],
    'currency': ['$', ''],
    'dateTime': '%a %b %e %X %Y',
    'date': '%m/%d/%Y',
    'time': '%H:%M:%S',
    'periods': ['AM', 'PM'],
    'days': ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
    'shortDays': ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
    'months': ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
    'shortMonths': ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}

formatDefaultLocale(${2:en_US});
timeFormatDefaultLocale(${3:en_US});

# margin <>

Append a SVG with the margin convention.

const margin = {top: ${1:20}, right: ${2:10}, bottom: ${3:20}, left: ${4:10}},
    width = ${5:960} - margin.left - margin.right,
    height = ${6:500} - margin.top - margin.bottom;

const svg = d3.select('${7: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 + ')');

${8:}

# max <>

Get the maximum value.

d3.max(${1:data}, d => d.${2:value});

# min <>

Get the minimum value.

d3.min(${1:data}, d => d.${2:value});

# nest <>

Nest a dataset.

const nest = d3.nest()
    .key(d => d.${1:})
    .entries(${2:});

# on <>

Listen for events on the selection.

.on('${1:}', ${2:})

# queue-promise <>

Load multiple files using a Promise.

Promise.all([
    d3.${1:json}('${2:}'),
    d3.${3:json}('${4:}')
  ]).then([${5:file1}, ${6:file2}] => {
    console.log(${7:file1}, ${8:file1});
  })

# queue <>

Create a queue to load multiple files.

d3.queue()
    .defer(${1:d3.json}, '${2:}')
    .defer(${3:d3.json}, '${4:}')
    .await(function(error, ${5:file1}, ${6:file2}) {
        console.log(${7:file1}, ${8:file1});
    });

# r <>

Set the element radius.

.attr('r', ${1:5})

# ran <>

Set the scale range.

.range([${1:}, ${2:}])

# rect <>

Create a SVG rect.

.enter().append('rect')
    .attr('x', ${1:})
    .attr('y', ${2:})
    .attr('width', ${3:width})
    .attr('height', ${4:height})
    .attr('rx', ${5:0})
    .attr('ry', ${6:0})
    .style('fill', '${7:#111}');

# seq <>

Create a sequential scale.

d3.scaleSequential(d3.${1:interpolateViridis})
    .domain([${2:}])

# scale <>

Create a sample scale.

d3.${1:scaleLinear}()
    .domain([${2:}, ${3:}])
    .range([${4:}, ${5:}]);

# sel <>

Select an element.

d3.select('${1:}')

# sela <>

Select all the elements.

d3.selectAll('${1:}')

# sort <>

Sort a dataset.

${1:data}.sort((a, b) => ${2:a}.${3:value} - ${4:b}.${5:value});

# stroke-opacity <>

Set the element stroke opacity.

.attr('stroke-opacity', ${1:0.5})

# stroke-width <>

Set the element stroke width.

.attr('stroke-width', ${1:1})

# stroke <>

Set the element stroke.

.attr('stroke', '${1:black}')

# style <>

Set the element style.

.style('${1:}', '${2:}')

# anchor <>

Set the text anchor.

.attr('text-anchor', '${1:middle}')

# text <>

Set the element text.

.text('${1:}')

# tickSize <>

Set the tick size.

.tickSize(${1:})

# tickValues <>

Set the tick values.

.tickValues(['${1:}'])

# translate <>

Translate the element.

.attr('transform', `translate(${${1:0}},${${2:0}})`)

# voronoi <>

Create a Voronoi diagram.

const voronoi = d3.voronoi()
    .x(d => x(d.${1:}))
    .y(d => y(d.${2:}))
    .extent([[0, 0], [${3:width}, ${4:height}]]);

const voronoiGroup = svg.append('g')
    .attr('class', 'voronoi');

voronoiGroup.selectAll('path')
    .data(voronoi.polygons(${5:data}))
    .enter().append('path')
    .attr('d', d => d ? 'M' + d.join('L') + 'Z' : null)

# x <>

Set the x position.

.attr('x', ${1:})

# y <>

Set the y position.

.attr('y', ${1:})

Hacking

$ cd ~/.atom/packages
$ git clone git@github.com:martgnz/d3-snippets.git
$ cd d3-snippets
$ apm install
$ apm link

Credit

Most of the inspiration comes from fabriotav's and shancarter's Sublime Text packages.

Author: Martgnz
Source Code: https://github.com/martgnz/d3-snippets 
License: MIT license

#javascript #d3 #graphic 

Sherman  Zemlak

Sherman Zemlak

1627823400

Top 10 Atom Code Editor Packages

Today we will be talking about my top 10 atom code editor packages. These are packages which I use on a daily basis. The Atom developer community have created many useful packages for web development to make your life easy while using atom. We will describe how to install these packages on your atom code editor and also describe each of the packages.

Atom Packages:
https://atom.io/packages

Subscribe to the YouTube Channel:
https://www.youtube.com/channel/UCWkzkhQ3syxBjjAYwqCbzYg?sub_confirmation=1

#atom #packages

Joseph  Murray

Joseph Murray

1624048020

How to Find All the Classes of a Package in Java

In this article let’s take a look at how to find all classes of a package in Java

To find all classes of a package in Java we can use the ClassHunter of Burningwave Core library. So we start by adding the following dependency to our pom.xml:

XML

1

<dependency>2
    <groupId>org.burningwave</groupId>3
    <artifactId>core</artifactId>4
    <version>8.4.0</version>5
</dependency>

The next steps are the following:

  • retrieving the ClassHunter through the ComponentContainer
  • defining a regular expression that we must pass to the **ClassCriteria **object that will be injected into the **SearchConfig **object
  • calling the **loadInCache **method that loads in the cache all loadable classes of the indicated paths, then applies the criteria filter and then returns the **SearchResult **object which contains the classes that match the criteria

#java #classes #class #packages #package #how to find all the classes of a package in java

Jeewan Garg

Jeewan Garg

1596709222

Boost Your Business With Affordable SEO Packages India

Natural SEO positioning undoubtedly generates long-term revenue. Thus, choose our cost-effective SEO packages India to assist you in creating quality content, analyzing competition, enhancing technical accepts of your website, etc. With JeewanGarg’s affordable SEO Packages, you will achieve the top of the search result in your domain.

Firstly, the best SEO Agency in Delhi talks with you to get to know your business, objectives, and concepts better, and thus they provide you with an ideal and authentic solution. If you have a plan or want to enhance any, JeewanGarg will ask you some questions that will help the agency learn more about your project and proffer you with an outstanding solution that will help you improve and boost your ROI.

JeewanGarg.com is a Digital Marketing Agency, the proffer seo packages india, and the packages is available throughout India and internationally. We are distributors of authentic Google Solutions and an authorized Google Partner, with a handy experience over a decade.

JeewanGarg, apart from Search Engine Optimization (SEO), also has excellency in Google AdWords, Social Marketing, YouTube Marketing, and CMS’s SEO integrations. JeewanGarg has loads of experience in the fields that have helped numerous customers reach and efficiently cover their market.

However, if you want to see your online presence in leading search engines, such as Bing, Yahoo, and Google, JeewanGarg has outstanding knowledge to put your business at its top.

JeewanGarg and their experts work very closely with their clients based on their organizations’ line of services and products, whatever the size of the business. Our priority is the client, and at JeewanGarg, they believe in a personal and friendly relationship in close association with their clients. Our objective is to help our clientele generate more traffic on their websites in an affordable way. The higher the amount of traffic on your website, your business will earn more revenue.
The success of your online business mostly depends on Search Engine Optimization. Thus, it is advisable if you are not an expert in SEO, then you shouldn’t do it yourself. Hire the best SEO Agency in Delhi, choose the Best SEO Packages, and enhance your business online, quickly reaching your ultimate customer.

They are plenty of SEO Packages in India available with JeewanGarg.com, but be careful while selecting the best for yourself and your business. We offer yearly SEO Packages, along with some monthly SEO Packages as well. Apart from these, we also provide you with project-based SEO service, basic SEO Packages, local SEO Packages, E-commerce SEO Packages, Local SEO Packages, and Enterprise SEO Packages.

#best seo packages #seo packages india #cheap seo packages india #seo packages in india

How to Install Pyenv on Ubuntu 18.04

What is Pyenv?
Pyenv is a fantastic tool for installing and managing multiple Python versions. It enables a developer to quickly gain access to newer versions of Python and keeps the system clean and free of unnecessary package bloat. It also offers the ability to quickly switch from one version of Python to another, as well as specify the version of Python a given project uses and can automatically switch to that version. This tutorial covers how to install pyenv on Ubuntu 18.04.

#tutorials #apt #debian #environment #git #github #linux #package #package management #package manager #personal package archive #ppa #pyenv #python #python 3 #python support #python-pip #repository #smb #software #source install #ubuntu #ubuntu 18.04 #venv #virtualenv #web application development