Skip to main content
Log in
C

Chawin Sungwalngern

@chawinkk·32 public vizzes

Loading thumbnail…

emploment rate Line Chart Germany Final

This line chart displays Germany’s employment rate from 1990 to 2020, with the rate on the y-axis and the year on the x-axis. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and `line` with `curveBasis` to render the smoothed trend, while SVG paths and CSS style the thick black stroke and blue axis labels. Data is loaded via `d3.csv` from a self-generated GitHub-hosted CSV file, and the chart is titled “Germany Emploment rate Line Chart” using the Share Tech font.

Dec 28, 2022
Loading thumbnail…

D3 Scatter Plot H/W finalised

This scatter plot visualizes the relationship between height and weight for individuals ranging from newborns to over 20 years old, using a self-generated dataset stored as a CSV on GitHub. The SVG rendering uses D3 v6’s `csv`, `scaleLinear`, `axisLeft`, and `axisBottom` APIs to map the data points, with each circle representing a single observation. Hovering over a point transitions its fill to orange, while the axes include labeled weight and height scales. The chart is styled with the Share Tech font and positioned using absolute CSS elements.

Dec 28, 2022
Loading thumbnail…

scatter plot top 30 Countries Population with CSV Final

A scatter plot displays the top 30 countries by population in 2020, with each dot positioned along the x-axis by population count and along the y-axis by country name. The visualization, built with D3 v5, uses `csv()` to load data from a CSV file, `scaleLinear` and `scalePoint` for axes, and `axisLeft`/`axisBottom` for ticks. Hovering a circle triggers a mouseover event that changes its fill to orange, with a mouseout transition returning it to black. Data originates from the Kaggle World Population Prospects 2020 dataset.

Dec 28, 2022
Loading thumbnail…

Bar Chart horizontal Population Final

This horizontal bar chart displays the populations of the top 30 countries from 2020, with a unique inverted y-axis that places the most populous nations at the top. The visualization, rendered as an SVG, loads data from a CSV file and uses d3.scaleBand and d3.scaleLinear to position bars. Interactive hover effects are implemented via D3 event listeners, which change bar color from black to orange on mouseover and smoothly transition back on mouseout, creating an animated user experience.

Dec 28, 2022
Loading thumbnail…

Multiple Line Chart of employment rate Final

This visualization compares the employment rates of Germany, Czech Republic, Thailand, and the United States from 1992 to 2022, plotting each country's ratio as a separate colored line on a shared time axis. The data is loaded as a CSV from a GitHub repository. Built with D3 v5, it uses `scaleTime` for the x-axis, `scaleLinear` for the y-axis, `nest` to group data by country, and a `lineGenerator` with `curveBasis` to draw smooth paths. A custom `colorLegend` component renders the categorical color scale in the SVG output.

Dec 28, 2022
Loading thumbnail…

Cars sale in Thailand 2005-19 Line Chart 2 Final

This line chart tracks car sales in Thailand from 2005 to 2019, with the vertical axis representing annual sales volume and the horizontal axis showing time. The visualization uses D3 v5 with SVG rendering, employing `scaleTime` and `scaleLinear` for axes, `extent` to set the domain, and a line generator to plot the data. The dataset is loaded via `csv` from a GitHub-hosted CSV file, with sales values parsed as numbers and years as dates. Styling uses the Share Tech font, with labeled axes, gridlines, and a bold black line path.

Dec 28, 2022
Loading thumbnail…

Cars sale in Thailand 2005-19 Final

This chart visualizes car sales in Thailand from 2005 to 2019, combining a smoothed line and a filled area underneath to show the sales trend over time. The data is loaded from a CSV file hosted on GitHub, with years parsed using `d3.timeParse` and sales values converted to numbers. The visualization uses `d3.scaleTime`, `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom` to construct the plot, while `d3.line`, `d3.area`, and `d3.curveBasis` generate the smoothed line and shaded area, rendered as SVG paths.

Dec 28, 2022
Loading thumbnail…

Bar Chart top 30 Countries Population (vertical) with CSV Final

This bar chart displays the population of the top 30 countries in 2020, using a vertical layout. The data is sourced from the Kaggle World Population Prospects 2020 dataset, which was processed externally before being imported as a CSV. The visualization is rendered in SVG using D3 v5, with bars that change color from black to orange upon mouse hover, and smoothly transition back. It utilizes D3's `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `format` functions to construct the chart, with a custom tick formatter.

Dec 28, 2022
Loading thumbnail…

Fork of Choropleth Map with D3 2 and SVG Final

This interactive world map uses a geoStereographic projection to display which countries Chawin S. has visited, with each nation colored according to its `adm0_dif` value via a spectral color scale. The visualization is built with D3 v5, using `d3.geoPath` for rendering country boundaries and a custom legend component. Country names and visit data are joined from a TSV file hosted on GitHub with world atlas GeoJSON from unpkg, linked by ISO numeric codes. Hovering over a country highlights it in pink and shows a tooltip with its name and visit status.

Dec 27, 2022
Loading thumbnail…

World Map with D3 Final

This interactive world map displays country boundaries as selectable SVG paths over a blue sphere, with hover highlighting in red. The visualization uses D3’s `geoPath` and `geoNaturalEarth1` projection to render geographic features, while the `topojson` library’s `feature` function processes TopoJSON data from the world-atlas package. Country names are loaded from a TSV file and mapped to each path’s `id`. A zoom control, implemented via D3’s `zoom` event, adjusts the SVG transform. Data sources include the 50m world-atlas TSV and JSON files.

Dec 27, 2022
Loading thumbnail…

Choropleth Map with D3 and SVG Final

This interactive world map uses a stereographic projection to display countries colored by income group. Built with D3 v5 and rendered as SVG, it loads GeoJSON and TSV data from the world-atlas package. Users can pan and zoom the map, which features a color legend and tooltips showing country names and income classifications. The visualization relies on d3.geoStereographic, d3.geoPath, d3.scaleOrdinal, and d3.zoom APIs.

Dec 27, 2022
Loading thumbnail…

World Map with D3 2 Final

This interactive visualization presents a world map using an orthographic projection, displaying country boundaries with hover effects that highlight each nation in red. The map also supports zoom and pan through D3’s zoom behavior. Built with D3 v5 and TopoJSON, it renders as SVG and loads geographic data from the world-atlas package, combining TSV country names with GeoJSON features. The projection and path generation rely on d3.geoOrthographic and d3.geoPath.

Dec 27, 2022
Loading thumbnail…

Fork of Fork of Fork of Map with D3 geoEquirectangular()

This example displays a world map rendered with the equirectangular projection, showing country boundaries as styled SVG paths. It loads geographic data from the World Atlas TopoJSON dataset and converts it to GeoJSON using the `feature` function from TopoJSON. The visualization uses D3 v5’s `geoPath` and `geoEquirectangular` to generate the map, with countries filled in a light beige and outlined with a dark stroke. The code demonstrates basic data fetching, projection setup, and DOM manipulation through D3 selections.

Dec 26, 2022
Loading thumbnail…

Fork of Map with D3 geoOrthographic

This example shows a world map rendered with an orthographic projection, displaying countries as filled paths on a light background. The visualization uses D3 v5 and TopoJSON to load and parse world-atlas geodata, then applies `d3.geoOrthographic` and `d3.geoPath` to project and draw the country boundaries as SVG elements. The map is static, with no interaction or rotation, and the styling is defined in CSS with muted colors for the landmasses.

Dec 26, 2022
Loading thumbnail…

Map with D3 firts part

A world map rendered with D3.js and the TopoJSON library displays countries as pale beige shapes with blue-gray borders against a teal background. The visualization loads geographic data from the world-atlas package and uses `geoMercator` for projection, while `geoPath` generates the SVG paths for each country. The map is built by selecting the SVG element, fetching the TopoJSON data, and appending a `<path>` element for every country feature.

Dec 26, 2022
Loading thumbnail…

scatter plot top 30 Countries Population with CSV

This scatter plot displays the populations of the top 30 countries in 2020, with countries on the y-axis and population counts on the x-axis. The visualization uses D3 v5’s `scaleLinear` and `scalePoint` to map data, `axisLeft` and `axisBottom` for axes with custom tick formatting, and SVG circles that change color on mouseover. Population data comes from the Kaggle World Population Prospects 2020 dataset, loaded via `d3.csv` from a local CSV file.

Dec 26, 2022
Loading thumbnail…

Multiple Line Chart of employmentrate

This visualization shows employment rate ratios over time for multiple cities, with each city represented as a colored line. The chart uses d3.line with a curveBasis smoothing function, d3.scaleTime and d3.scaleLinear for the x and y axes, and d3.scaleOrdinal with schemeCategory10 for color mapping. Data is loaded from a CSV file using d3.csv, nested by city with d3.nest, and rendered as SVG paths. A custom colorLegend function displays the city names, while gridlines and axis labels are generated using d3.axisLeft and d3.axisBottom.

Dec 26, 2022
Loading thumbnail…

Fork of Bar Chart

This bar chart displays the populations of the world’s 29 most populous countries, using the d3.csv method to load data from a CSV file. Vertical bars are sized with d3.scaleBand and d3.scaleLinear, while d3.axisLeft and d3.axisBottom label the axes. The chart uses SVG rendering with interactive mouseover and mouseout events that transition bar colors from black to orange and back, employing d3.select and transition methods.

Dec 26, 2022
Loading thumbnail…

Fork of Fork of Bar Chart top 30 Countries Population (vertical) with CSV

This bar chart shows the top 30 countries by population, using horizontal bars sorted vertically. The chart displays population values on a linear scale and country names on a band scale, with custom axis formatting that abbreviates large numbers. It uses D3 v5’s `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` APIs, rendering as SVG. Bars turn orange on mouseover via `select` and `attr` transitions. Data comes from the 2020 Kaggle World Population Prospects dataset, loaded from a local CSV file.

Dec 26, 2022
Loading thumbnail…

Cars sale in Thailand 2005-19 Line Chart

This line chart shows car sales in Thailand from 2005 to 2019, with the year on the x-axis and sales volume on the y-axis. The visualization uses D3 v5’s `scaleTime` and `scaleLinear` to map data, `axisBottom` and `axisLeft` for labeled axes, and a `line` generator with a `path` element to draw the trend line. Data is loaded from a CSV file via `d3.csv`, and the SVG is rendered with a clean layout featuring gridlines and custom fonts from Google Fonts.

Dec 26, 2022
Loading thumbnail…

Cars sale in Thailand 2005-19

A combined line and area chart displays annual car sales in Thailand from 2005 to 2019. The black line traces sales trends over time, while the filled area beneath it emphasizes the magnitude of sales. Built with D3 v5, the visualization uses `scaleTime` and `scaleLinear` for axes, `axisBottom` and `axisLeft` for grid lines and labels, and the `line` and `area` generators with `curveBasis` to create the smooth curves. Data is loaded from a CSV file and parsed with `d3.timeParse`.

Dec 26, 2022
Loading thumbnail…

emploment rate Line Chart Germany

This line chart visualizes Germany’s employment rate over time, using a smooth curved line to connect annual data points. The chart includes labeled axes for year and employment rate, with a title displayed in the upper-left corner. The code uses D3 v5 functions such as `csv`, `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis`, rendering the visualization as SVG. Data is loaded from a GitHub-hosted CSV file, and the chart applies a custom Share Tech font for all text elements.

Dec 26, 2022
Loading thumbnail…

Fork of Bar Chart top 30 Countries Population (vertical) with CSV

This vertical bar chart displays the populations of the top 30 countries from the 2020 World Population Prospects dataset. Using D3 v5, the visualization loads CSV data, maps it to a linear scale for the x-axis and a band scale for the y-axis, and renders SVG rectangles with hover effects that temporarily change fill color. The chart also customizes axis formatting to abbreviate large numbers and removes tick lines for a cleaner appearance.

Dec 25, 2022
Loading thumbnail…

D3 Scatter Plot_ rendering_axis

This scatter plot visualizes the Iris Dataset, comparing petal length against sepal length across multiple flower specimens. The code uses D3 v6 to load the CSV data, apply linear scales for both axes, and render circles as SVG elements. Axis ticks are drawn explicitly using `axisLeft` and `axisBottom`, with the plot filling the full browser viewport via `window.innerWidth` and `window.innerHeight`. The example demonstrates a clean, minimal approach to building coordinate-based visualizations with D3’s data-binding and scale functions.

Dec 23, 2022
Loading thumbnail…

Bar Chart top 30 Countries Population (vertical) with CSV

This bar chart displays the population of the top 30 countries in 2020, with a vertical layout where each country is listed along the y-axis and population counts extend horizontally. The data originates from the Kaggle World Population Prospects 2020 dataset, loaded as a CSV. The visualization uses D3 v5 with scaleLinear, scaleBand, axisLeft, and axisBottom to position bars and axes, while customizing tick formatting to abbreviate numbers with suffixes like “B” for billions. The SVG rendering includes styled rectangles and a custom font from Google Fonts.

Dec 20, 2022
Loading thumbnail…

full Sole wit reproduction with D32 multiple symbol not stack

This example recreates Sol LeWitt’s Wall Drawing 370 using D3’s `symbol` and `symbols` APIs to generate the artist’s signature geometric forms. Two masks—one inverted—are created from these symbols, then applied to alternating horizontal and vertical striped rectangles across the full screen. The code uses D3 selections, `range`, `join`, and SVG `mask` elements to layer 100 stripes in each direction, producing a precise, full-window reproduction of the original artwork’s pattern.

Dec 20, 2022
Loading thumbnail…

full Sole wit reproduction with D32 multiple symbol

This visualization reproduces Sol LeWitt’s Wall Drawing #370 using two overlapping sets of horizontal and vertical bands, each masked by a large geometric symbol. The first mask creates vertical stripes from 100 horizontal rectangles, while the second, inverted mask shapes horizontal stripes from vertical rectangles. Built with D3.js, it uses `select`, `range`, `symbol`, and `symbols` to generate the complex mask paths, and renders entirely as SVG, with dimensions matching the browser window.

Dec 20, 2022
Loading thumbnail…

full Sole wit reproduction with D32

This example reproduces Sol LeWitt’s wall drawing using a generative approach. It displays two sets of thin, horizontal and vertical stripes across the full canvas, each filtered by a circular mask to form a central geometric pattern. The implementation relies on the D3.js library, using `d3.select`, `d3.range`, and `d3.symbol` to create SVG shapes and masks. The masks, defined as `mask_1` and `mask_2`, alternately invert the visibility of the stripes, producing the overlapping effect. The render is driven by the D3 version 7.7.0 API and output as SVG.

Dec 20, 2022
Loading thumbnail…

full Sole wit reproduction with D3

This example reproduces Sol LeWitt’s Wall Drawing 370 using D3.js and SVG. It draws a grid of 100 horizontal and 100 vertical thin rectangles that span the full width and height of the browser window. Two SVG masks—one featuring a large circular cutout and another with a smaller black circle on a white background—are applied to the respective rectangle groups, creating an overlapping circular reveal in the center. The code uses D3’s `select`, `range`, `symbol`, and `symbols` APIs to generate the shapes and manage data binding.

Dec 19, 2022
Loading thumbnail…

Sole wit vertical bg with inner horizontal circle D3 2 class square method

This example uses D3.js (v7) to recreate Sol LeWitt's Wall Drawing #370. It displays a full-screen SVG canvas containing two sets of thin, rectangular marks: vertical bands spanning the canvas height, and horizontal bands spanning its width. Two SVG masks restrict each band set to a circular region, creating a circle in the center where the vertical and horizontal lines intersect. The code generates marks using `d3.range` and appends them as SVG `rect` elements, leveraging the `mask` attribute to define the visual boundary.

Dec 19, 2022
Loading thumbnail…

Sole wit horizontal Reproduction with scrip

This example reproduces Sol LeWitt’s Wall Drawing 370 as a horizontal sequence of green horizontal bands. The page creates an SVG element sized to the full browser window and uses a `for` loop to append 100 `rect` elements, each 10 pixels tall and spaced 20 pixels apart vertically. The code relies on the SVG DOM API via `document.createElementNS` and does not use any external libraries such as D3 or Three.js. The rendering directly mirrors the geometric simplicity of the original conceptual art piece.

Dec 19, 2022
Loading thumbnail…

Sole wit vertical Reproduction with scrip

This example reproduces Sol LeWitt's Wall Drawing No. 370 as a vertical grid of thin black rectangles that span the full browser window height. The page generates an SVG element using the `document.createElementNS` API and populates it with 100 `rect` elements, positioning each at intervals of 20 pixels along the x-axis. The script responds to the window's dimensions, setting the SVG's width and height to the viewport size, and lays out the vertical bands without any interactivity or animation. It is a straightforward, algorithmic interpretation of the original geometric artwork.

Dec 18, 2022