Tags

Introduction

Participated in the data-driven news competition in China, we constructed a font-end page using HTML5, CSS3 and javascript: 新能源：核电知识知多少？

We built the page with tiny basic knowledge of “the Big 3” in 5 days, including one day learning from Zhou Yongkang’s case by Caixin.

I would not say it is a news story though “nuclear” is currently a very hot topic around the world, because it is rather a pile of skills／process of fresh learners of “the Big 3” language.

Design

After brainstorming the topic with my team mates Chao Tianyi and Li Jun, I came up with the idea that “why can’t we make a map of relationships between the owners and operators of nuclear stations in China?” After one day’s research, I finally found these data sources:

The pages includes 6 parts: the header, the context, the main, the world, the accidents and the footer. I designed the page in a very straightforward way that consists of a chart with a paragraph laying inline.

Implementation

The first line chart on the website is constructed by D3.js. The main parts is by HTML5 canvas. The interactive bar chart is by Chart.js and the final map is by Google Fusion Table.  The charts on the page are all from the data collected from above mentioned resources.

Difficulties

  • Layout, which means to adapt smaller screen on mobile or tablet is the core issue we met.
  • Lacking knowledge of D3.js library, we couldn’t make fancy interactive charts to show the data and information.
  • Lacking knowledge of web design, the page may not be that good looking.

Further Development

  • The main layout issue would be solved to make more adaptive.
  • Hard coding parts need to be polished.
  • The graphic and web design also need efforts.

Solution that may solve the problem:

Comments

Please feel free to drop me a line after looking at our webpage, we need your feedbacks!

Thanks!