Sukesh Kumar

@Sukesh09·5 public vizzes

Cars Scatter Plot

This scatter plot visualizes the relationship between GDP and SEF (Social and Economic Factors) for several countries, with each circle representing a country. The chart uses D3 v5 with SVG rendering, employing `d3.scaleLinear` for both axes and `d3.axisLeft`/`d3.axisBottom` for ticks. Data comes from the included CSV file, loading via `d3.csv`. The circles are styled with red fill, opacity, and a categorical color scale for stroke, while axis labels appear rotated for the y-axis.

Aug 4, 2019

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays GDP against female school enrollment percentages for several South Asian and Oceanian countries, with each country represented by a distinct colored line. The data originates from Gray Area’s Data Canvas - Sense Your City project. The visualization uses D3 v5’s `scaleLinear`, `scaleTime`, `line` generator with `curveBasis`, and `nest` for grouping, rendering vector graphics via SVG. A custom `colorLegend` function adds an ordinal color scale legend, while axis labels and gridlines are styled through CSS.

Aug 3, 2019

Loading thumbnail…

World Countries Tree

This visualization displays a tree diagram of world countries nested by continent and region, with each leaf node labeled by country name. It uses the D3 v5 library, specifically `d3.tree` and `d3.hierarchy`, to compute the layout, and `d3.linkHorizontal` to generate the curved link paths. The SVG rendering is styled with teal strokes and serif font text, and includes zoom interaction via `d3.zoom`. Font size scales inversely with tree depth, making top-level regions larger. The example is built around two data files (`data_v1.json` and `data_v2.json`) that structure the hierarchical world geography.

Aug 3, 2019

Loading thumbnail…

Customizing Axes

This example displays a horizontal bar chart of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects. It shows how to customize D3 axes by formatting population values with d3.format, removing axis domains, adding grid lines via tickSize, and styling tick labels and the axis label. The chart uses d3.csv to load data, d3.scaleLinear and d3.scaleBand for scales, and d3.axisLeft and d3.axisBottom for rendering SVG axes.

Aug 3, 2019

Loading thumbnail…

World Countries Tree

This visualization displays a hierarchical tree of world countries, organized by continent and subregion, using data from a nested JSON file. The layout uses d3.tree and d3.hierarchy to compute node positions, with d3.linkHorizontal generating curved paths for the connections. Text labels show the name of each country or region at its corresponding node. The SVG rendering includes a custom Playfair Display font and subtle text shadows for improved readability, with the tree filling the entire browser viewport.

Aug 2, 2019