remove all dups and negative numbers from 3 arrays [duplicate] - javascript

This question already has answers here:
Remove negative numbers from array
(3 answers)
Closed 5 years ago.
I recently had a technical job interview. the code challenge i was asked to solve was given 3 arrays of numbers. goal was to remove all dups and negative nums
i was able to remove dups but not duplicates, so far i have the following code. what am i missing?
let array1=[10, 200, 10, 200, 100, 100, 200, 200, 200, 200, -99, -6, 0, -859]
let array2 = [100, 200, 100, 200, 689, 689, 200, 400, 210, 200, -58, 200, -305, -6, 0, -859]
let array3 =[100, 200, 100, 200, 689, 689, 200, 400, 210, 400, -6, 200, -305, -6, 0, -859]
const arrays = {
array1,array2,array3
}
let nodups=Array.from(new Set(array1.concat(array2,array3)))
console.log(nodups);


After getting a duplicate free array, you need to filter the array for only positive values.
var array1 = [10, 200, 10, 200, 100, 100, 200, 200, 200, 200, -99, -6, 0, -859],
array2 = [100, 200, 100, 200, 689, 689, 200, 400, 210, 200, -58, 200, -305, -6, 0, -859],
array3 = [100, 200, 100, 200, 689, 689, 200, 400, 210, 400, -6, 200, -305, -6, 0, -859],
result = Array
.from(new Set(array1.concat(array2, array3)))
.filter(v => v >= 0);
console.log(result);


Put them in a Set and apply a filter
let array1=[10, 200, 10, 200, 100, 100, 200, 200, 200, 200, -99, -6, 0, -859]
let array2 = [100, 200, 100, 200, 689, 689, 200, 400, 210, 200, -58, 200, -305, -6, 0, -859]
let array3 =[100, 200, 100, 200, 689, 689, 200, 400, 210, 400, -6, 200, -305, -6, 0, -859]
let res = [...new Set([...array1, ...array2, ...array3])].filter(e => e >= 0);
console.log(res);

Related

Output javascript object as html table

I have a JS object, I have been trying to output it as an HTML table. I have been trying to achieve that by looping through the object, appending the results to a string and putting it inside the table via innerHTML.
The header row is OK
The first data row is OK
However, the subsequent rows do not break of into a new row in the HTML table.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table>
<tr id="headeris">
</tr>
<tr id="duomenys">
</tr>
</table>
<script>
var AdenTalisman =
{
"Enchant" : ["+0","+1","+2","+3","+4","+5","+6","+7","+8","+9","+10"],
"P.Atk" : ["-","-", "-", "-", "-", 50, 80, 135, 180, 225, 270],
"M.Atk" : ["-","-", "-", "-", "-", 100, 150, 250, 360, 420, 490],
"P.Def" : ["-",5, 10, 10, 20, 30, 40, 60, 80, 120, 160],
"M.Def" : ["-",5, 10, 10, 30, 40, 60, 80, 120, 160, 200],
"Atk.Speed": ["-",10, 12, 15, 20, 25, 40, 70, 80, 90, 100],
"C.Speed" : ["-",10, 12, 15, 20, 25, 45, 75, 95, 110, 125],
"HP" : ["-",100, 120, 150, 180, 220, 260, 520, 640, 910, 1120],
"MP" : ["-", 30, 50, 70, 100, 130, 160, 320, 360, 430, 530],
"XP/SP" : ["-", "-", "-", "-", 10, 15, 20, 50, 50, 50, 50]
}
tableH = [];
tableR = [];
let header = '';
for (let k of Object.keys(AdenTalisman)) {
header = [];
header += k.padEnd(10);
tableH += `
<th> ${header} </th>
`
}
console.log(header);
document.getElementById('headeris').innerHTML = tableH;
for (let i = 0; i <= 10; i++) {
tableR += "</tr>"
console.log(tableR)
document.getElementById('duomenys').innerHTML += tableR;
var tableR = '';
tableR += `<tr>`
for (let k of Object.keys(AdenTalisman)) {
row = [];
row += AdenTalisman[k][i];
tableR += `
<td> ${row} </td>
`
}
}
</script>
</body>
</html>

document.getElementById('duomenys').innerHTML += tableR; will:
Convert the DOM of that element into a string of HTML source code
Append a new string to the end of that string
Convert the string into an HTML DOM
The first time you do that, the end tag for the <table> is missing, so it gets added automatically as error recovery.
The second time you do that you end up with something like:
<table>...</table><tr>...
and it is just broken.
If you are going to build a table with JavaScript either:
Build the entire thing (from <table> to </table> with everything inside) as a regular string then then set set some element's innerHTML to that string once and at the end. or
Use createElement, appendChild and friends instead.

Use thead and tbody elements
const AdenTalisman = {
"Enchant": ["+0", "+1", "+2", "+3", "+4", "+5", "+6", "+7", "+8", "+9", "+10"],
"P.Atk": ["-", "-", "-", "-", "-", 50, 80, 135, 180, 225, 270],
"M.Atk": ["-", "-", "-", "-", "-", 100, 150, 250, 360, 420, 490],
"P.Def": ["-", 5, 10, 10, 20, 30, 40, 60, 80, 120, 160],
"M.Def": ["-", 5, 10, 10, 30, 40, 60, 80, 120, 160, 200],
"Atk.Speed": ["-", 10, 12, 15, 20, 25, 40, 70, 80, 90, 100],
"C.Speed": ["-", 10, 12, 15, 20, 25, 45, 75, 95, 110, 125],
"HP": ["-", 100, 120, 150, 180, 220, 260, 520, 640, 910, 1120],
"MP": ["-", 30, 50, 70, 100, 130, 160, 320, 360, 430, 530],
"XP/SP": ["-", "-", "-", "-", 10, 15, 20, 50, 50, 50, 50]
}
const EL_theadRow = document.querySelector("#headeris tr");
const EL_tbody = document.querySelector("#duomenys");
const ELNew = (sel, att) => Object.assign(document.createElement(sel), att || {});
Object.entries(AdenTalisman).forEach(([name, items]) => {
// Create THs for THEAD>TR
EL_theadRow.append(ELNew("th", {textContent: name}));
// Create TR for TBODY
const TR = ELNew("tr");
// Create TD for TBODY>TR
items.forEach((val) => TR.append(ELNew("td", {textContent: val})));
EL_tbody.append(TR);
});
<table>
<thead id="headeris"><tr></tr></thead>
<tbody id="duomenys"></tbody>
</table>

Try this
Change table to use thead and tbody as stated on Roko answer
<table>
<thead id="headeris">
</thead>
<tbody id="duomenys">
</tbody>
</table>
Change multi array looping like this
var tableR = '';
for (let i = 0; i <= 10; i++) {
tableR += `<tr>`
for (let k of Object.keys(AdenTalisman)) {
row = [];
row = AdenTalisman[k][i];
tableR += `
<td> ${row} </td>
`
}
tableR += `</tr>`
}
document.getElementById('duomenys').innerHTML += tableR;
var AdenTalisman = {
"Enchant": ["+0", "+1", "+2", "+3", "+4", "+5", "+6", "+7", "+8", "+9", "+10"],
"P.Atk": ["-", "-", "-", "-", "-", 50, 80, 135, 180, 225, 270],
"M.Atk": ["-", "-", "-", "-", "-", 100, 150, 250, 360, 420, 490],
"P.Def": ["-", 5, 10, 10, 20, 30, 40, 60, 80, 120, 160],
"M.Def": ["-", 5, 10, 10, 30, 40, 60, 80, 120, 160, 200],
"Atk.Speed": ["-", 10, 12, 15, 20, 25, 40, 70, 80, 90, 100],
"C.Speed": ["-", 10, 12, 15, 20, 25, 45, 75, 95, 110, 125],
"HP": ["-", 100, 120, 150, 180, 220, 260, 520, 640, 910, 1120],
"MP": ["-", 30, 50, 70, 100, 130, 160, 320, 360, 430, 530],
"XP/SP": ["-", "-", "-", "-", 10, 15, 20, 50, 50, 50, 50]
}
tableH = [];
tableR = [];
let header = '';
for (let k of Object.keys(AdenTalisman)) {
header = [];
header += k.padEnd(10);
tableH += `
<th> ${header} </th>
`
}
document.getElementById('headeris').innerHTML = tableH;
var tableR = '';
for (let i = 0; i <= 10; i++) {
tableR += `<tr>`
for (let k of Object.keys(AdenTalisman)) {
row = [];
row = AdenTalisman[k][i];
tableR += `
<td> ${row} </td>
`
}
tableR += `</tr>`
}
document.getElementById('duomenys').innerHTML += tableR;
<table>
<thead id="headeris">
</thead>
<tbody id="duomenys">
</tbody>
</table>

Or you can do it like this:
const AT = {
"Enchant": ["+0", "+1", "+2", "+3", "+4", "+5", "+6", "+7", "+8", "+9", "+10"],
"P.Atk": ["-", "-", "-", "-", "-", 50, 80, 135, 180, 225, 270],
"M.Atk": ["-", "-", "-", "-", "-", 100, 150, 250, 360, 420, 490],
"P.Def": ["-", 5, 10, 10, 20, 30, 40, 60, 80, 120, 160],
"M.Def": ["-", 5, 10, 10, 30, 40, 60, 80, 120, 160, 200],
"Atk.Speed": ["-", 10, 12, 15, 20, 25, 40, 70, 80, 90, 100],
"C.Speed": ["-", 10, 12, 15, 20, 25, 45, 75, 95, 110, 125],
"HP": ["-", 100, 120, 150, 180, 220, 260, 520, 640, 910, 1120],
"MP": ["-", 30, 50, 70, 100, 130, 160, 320, 360, 430, 530],
"XP/SP": ["-", "-", "-", "-", 10, 15, 20, 50, 50, 50, 50]
};
document.querySelector("table").innerHTML = Object.entries(AT).map(([k,v],i)=>
"<tr><th>"+k+"</th>"+(i?"<td>":"<th>")+v.join(i?"</td><td>":"</th><th>")+(i?"</td>":"</th>")+"</tr>"
).join("");
table {border:1px solid grey}
th,td {text-align:right; padding:4px}
tr:nth-child(even) {background-color:#ddd}
<table></table>

Plotly.js - Hover label of multiple traces overlaps with xaxis hover label

I'm facing an issue where the hover label of multiple traces overlaps with the x-axis's hover label when all the trace values are close to 0.
In the example below, you can see the overlap when you mouseover x=1000
const data = []
const x = [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000];
data.push({
x: x,
y: [100, 105, 132, 150, 130, 103, 2, 200, 301, 1],
});
data.push({
x: x,
y: [200, 205, 232, 250, 230, 193, 1, 100, 201, 0],
})
data.push({
x: x,
y: [0, 205, 232, 250, 230, 193, 10, 100, 0, 0],
})
const layout = {
height: 350,
xaxis: {
// tickformat: ',.2r',
},
hoverlabel: {
font: {
family: 'Helvetica Neue',
size: 11,
}
}
}
Plotly.plot('graph', data, layout);
<head>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id="graph"></div>
</body>
https://codepen.io/anon/pen/RBpQPg
Any workarounds would be appreciated. For example, would it be possible to combine all the hover labels into 1 label somehow?

How to implement C3 chart zoom functionality on a button click

I am new to C3 chart. I found the zoom functionality in the documentation for C3 . It will work for the mouse wheel scroll. But what I want is to implement the zoomin and zoomout in two seperate buttons. Can anyone direct me to the right track.
Thanks in advance.

Here below is an example of zoom in/out managed with buttons.
However unlike mouse wheel you have to decide which starting point to use.
var chart = c3.generate({
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 150, 250, 150, 200, 170, 240, 100, 150, 250, 150, 200, 170, 240, 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 350, 220, 250, 300, 270, 140, 150, 90, 150, 50, 120, 70, 40]
]
},
zoom: {
enabled: true,
rescale: true,
onzoom: function (domain) {
console.log("zoom", domain);
}
}
});
var zoom = 1;
var zoom_factor = 1.1;
var min = 0;
var max = chart.data()[0].values.length;
$("#zoom-in").click(function() {
if (zoom<5) zoom *= zoom_factor;
console.log("zoom-in", min, max, zoom);
chart.zoom([min, max/zoom]);
});
$("#zoom-out").click(function() {
if (zoom>1) zoom /= zoom_factor;
console.log("zoom-out", min, max, zoom);
chart.zoom([min, max/zoom]);
});
$("#zoom-reset").click(function() {
zoom = 1;
console.log("zoom-reset", min, max, zoom);
chart.zoom([min, max/zoom]);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<link href="https://rawgit.com/masayuki0812/c3/master/c3.css" rel="stylesheet"/>
<script src="https://rawgit.com/masayuki0812/c3/master/c3.js"></script>
<button id="zoom-in">zoom-in</button>
<button id="zoom-out">zoom-out</button>
<button id="zoom-reset">zoom-reset</button>
<div id="chart"></div>

Here is a a solution to this that works in conjonction with mouse whell and preserves current scroll position.
var chart = c3.generate({
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 150, 250, 150, 200, 170, 240, 100, 150, 250, 150, 200, 170, 240, 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 350, 220, 250, 300, 270, 140, 150, 90, 150, 50, 120, 70, 40]
]
},
zoom: {
enabled: true,
rescale: true,
onzoom: function (domain) {
console.log("zoom", domain);
}
}
});
var zoom_factor = 3;
var min = 0;
var max = chart.data()[0].values.length;
$("#zoom-in").click(function() {
const zoom = chart.zoom();
const newZoom = [zoom[0] + zoom_factor , zoom[1] - zoom_factor];
if (newZoom[1] - newZoom[0] > 0) chart.zoom(newZoom);
});
$("#zoom-out").click(function() {
const zoom = chart.zoom();
// Bound zoom to min and max
chart.zoom([Math.max(zoom[0] - zoom_factor, min), Math.min(zoom[1] + zoom_factor , max)]);
});
$("#zoom-reset").click(function() {
console.log("zoom-reset", min, max);
chart.zoom([min, max]);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.13/c3.min.css" media="screen" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.15.0/d3.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.13/c3.min.js" type="text/javascript"></script>
<button id="zoom-in">zoom-in</button>
<button id="zoom-out">zoom-out</button>
<button id="zoom-reset">zoom-reset</button>
<div id="chart"></div>

How to get rounded corner for grouped bar chart(stack chart) in c3.js

Please help me add rounded corner for stacked chart(grouped bar chart) in c3.js.
I have found something similar here How to get rounded columns in c3.js bar chart
but this is the normal bar chart.
It is not working for stacked chart.
I'm not familiar with d3.js.
Thank you :)
This is my code.
var chart = c3.generate({
bindto: "#id",//element
padding: {
left: 50,
right: 50,
top: 20,
bottom: 20
},
data: {
// x : 'x',
columns: [//Data Arry
['data1', 30, 200, 200, 400, 150, 250, 30, 200, 200, 400, 150, 250, 0, 100, 100, 200, 150, 400, 400, 400, 400, 400, 400, 400],
['data2', 30, 200, 200, 400, 150, 250, 30, 200, 200, 400, 150, 250, 0, 100, 100, 200, 150, 400, 400, 400, 400, 400, 400, 400],
['data3', 30, 200, 200, 400, 150, 250, 30, 200, 200, 400, 150, 250, 0, 100, 100, 200, 150, 400, 400, 400, 400, 400, 400, 400],
],
type: 'bar',
groups: [
['data1', 'data2', 'data3']//grouping data to get stacked chart
],
},
bar: {
width: {
ratio: .6 //setting width of bar
},
spacing: 2//setting space between bars
},
grid: {
y: {//grid lines
show: true,
color:'red'
}
},
axis: {
x: {
type: 'category',
tick: {
rotate: -90,
multiline: false,
format: "%b" //format: "%e %b %y"
},
height: 50,
categories: ['2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017'] //Xaxis labels
},
y2: {
show: false
},
y: {
tick: {
format: d3.format("s")//format y axis
}
}
},
color: {
pattern: ['#fc7f86', '#34dfe2', '#dc92fa', '#43daa1'] //color code
}
});

Set Data order as null
data: {
columns: [
['data1', 30, 200, 200, 400, 150, 250, 30, 200, 200, 400, 150, 250, 0, 100, 100, ],
['data2', 30, 200, 200, 400, 150, 250, 30, 200, 200, 400, 150, 250, 0, 100, 100, ],
['data3', 30, 200, 200, 400, 150, 250, 30, 200, 200, 400, 150, 250, 0, 100, 100, ],
],
type: 'bar',
groups: [
['data1', 'data2', 'data3']
],
order: null
},

c3js, X Axis crushed and badly formated

Currently I am playing arround with this Example:
http://c3js.org/samples/axes_x_tick_culling.html
But the issue is, when you add like 3-4x the Ammount of Data, the X values get crushed and badly formated. How can I fix this any idea?
See here: http://i.imgur.com/F7BWMDk.png
Thanks.

Width is working fine for me, take a look X axis with tripple digit numbers
enter link description here
var chart = c3.generate({
data: {
columns: [
['sq', 30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 200, 100, 400, 150, 250,30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 200, 100, 400, 150, 250,30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 200, 100, 400, 150, 250,30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 200, 100, 400, 150, 250,30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 200, 100, 400, 150, 250,30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 200, 100, 400, 150, 250,30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 200, 100, 400, 150, 250]
]
},
axis: {
x: {
type: 'category',
tick: {
width: 22,
culling: {
max: 7
}
}
}
}
});

Here you go,
you need to add the tick.width parameter.
It's not documented yet (we're working on it)
var chart = c3.generate({
data: {
columns: [
['sq', 30, 200, 100, 400, 150, 11,11,11,11,111,11,11,11,22,22,22,22,22,223,43,32,14,250, 30,31, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 200, 100, 400, 150, 250]]
},
axis: {
x: {
type: 'category',
tick: {
culling: true,
width: 11
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="chart">
</div>
var chart = c3.generate({
data: {
columns: [
['sq', 30, 200, 100, 400, 150, 11,11,11,11,111,11,11,11,22,22,22,22,22,223,43,32,14,250, 30,31, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 200, 100, 400, 150, 250]]
},
axis: {
x: {
type: 'category',
tick: {
culling: true,
width: 11
}
}
}
});
jsfiddle

Categories

Resources