Show HN: Interactive Periodic Table in JavaScript

#1

Post by codedrome » Thu, Jan 30, 2020, 3:28 PM UTC

Show HN: Interactive Periodic Table in JavaScript
online.codedrome.com

Re: Show HN: Interactive Periodic Table in JavaScript

#2

Post by darekkay » Thu, Jan 30, 2020, 3:49 PM UTC

Is there a mobile/responsive version planned? It is currently simply condensed and unreadable on smaller viewpoerts.

Shameless related plug: Chemical Element of the Day [1]

[1] https://tips.darekkay.com/html/chemical-elements-en.html

Re: Show HN: Interactive Periodic Table in JavaScript

#3

Post by bluebasket » Thu, Jan 30, 2020, 3:55 PM UTC

this is super cool! i clicked on the group names on the right thinking the filtering will happen automatically but you have to select them and apply on the left.

Re: Show HN: Interactive Periodic Table in JavaScript

#4

Post by dreen » Thu, Jan 30, 2020, 4:24 PM UTC

Great job, looks really nice.

I have one suggestion. The colours are not colourblind-friendly. I suggest a colour palette picker (based on types of colour deficiency issues) or an ability to toggle subtle gradients.

Re: Show HN: Interactive Periodic Table in JavaScript

#5

Post by vanderZwan » Thu, Jan 30, 2020, 5:26 PM UTC

What's the name for that law when there's something you never think of and then you encounter multiple times really quickly? Because a couple of days ago, Bob Kerns published a really cool Periodic Table input element on Observable:

https://observablehq.com/@bobkerns/elements-input

(not to take anything away from the submitted periodic table - they're both really nice)

Re: Show HN: Interactive Periodic Table in JavaScript

#6

Post by maximp » Thu, Jan 30, 2020, 5:30 PM UTC

Very cool! I like the design. Would you consider applying filters on selection, without having to click the "Apply Filter" button? Feels smoother & more intuitive this way.

Re: Show HN: Interactive Periodic Table in JavaScript

#7

Post by graedus » Thu, Jan 30, 2020, 6:26 PM UTC

vanderZwan wrote: post #5

What's the name for that law when there's something you never think of and then you encounter multiple times really quickly? Because a couple of days ago, Bob Kerns published a really cool Periodic Table input element on Observable: https://observablehq.com/@bobkerns/elements-input (not to take anything away from the submitted periodic table - they're both really nice)

Frequency illusion or Baader–Meinhof phenomenon

https://en.wikipedia.org/wiki/List_of_cognitive_biases#Frequ...

Re: Show HN: Interactive Periodic Table in JavaScript

#8

Post by enjoyyourlife » Thu, Jan 30, 2020, 10:45 PM UTC

I still like https://ptable.com/ better

Re: Show HN: Interactive Periodic Table in JavaScript

#9

Post by shahedshah » Fri, Jan 31, 2020, 11:13 AM UTC

Oh wow. Thanks for sharing. This'll definitely be useful for my kids studies. It would be even better if filtering happened automatically when selecting options.

Edit: Oops. I should be paying more attention to comments as someone already suggested this.

Re: Show HN: Interactive Periodic Table in JavaScript

#10

Post by vanderZwan » Tue, Feb 04, 2020, 8:24 PM UTC

graedus wrote: post #7

vanderZwan wrote: post #5

What's the name for that law when there's something you never think of and then you encounter multiple times really quickly? Because a couple of days ago, Bob Kerns published a really cool Periodic Table input element on Observable: https://observablehq.com/@bobkerns/elements-input (not to take anything away from the submitted periodic table - they're both really nice)

Frequency illusion or Baader–Meinhof phenomenon https://en.wikipedia.org/wiki/List_of_cognitive_biases#Frequ...

Thank you!