zjutkarma

@zjutkarma·13 public vizzes

Fork of Word Cloud Example

This fork of the D3 v3 word cloud example visualizes family names and first names from local JSON data. The code loads data using `d3.json`, filters and sorts entries by frequency, and displays the top 120 terms as an SVG word cloud via `d3.layout.cloud`. Buttons in a toolbar allow switching between the `Fam_Totaal.json` and `VN_Tot.json` datasets. The visualization uses a linear scale, random rotation, and category20 color encoding to render text within an 800 by 400 pixel container.

Apr 27, 2022

Loading thumbnail…

Choropleth Tutorial - Leaflet

A choropleth map visualizes food-safety inspection counts across Chinese provinces, with hover interactions revealing province names and defect quantities. Built with Leaflet and D3 v5, the map loads GeoJSON boundaries from `china.js` and applies a color scale based on population density data. Additional charts—a word cloud and two pie charts—are embedded via Observable iframes, while a legend and dynamic tooltip enhance readability. The project integrates Vue as part of its framework stack.

Apr 26, 2022

Loading thumbnail…

Fork of Customizing Axes

This bar chart displays the population of the top 10 most populous Chinese provinces, based on 2018 estimates from the United Nations World Population Prospects. It demonstrates extensive D3 axis customization, including custom tick formatting that converts large numbers to abbreviated labels, grid lines, and styled tick text. Using d3.scaleLinear and d3.scaleBand, the chart positions bars and applies d3.axisLeft and d3.axisBottom with modified tick behavior. The SVG rendering includes a title, axis label, and steelblue bars, with data loaded from a CSV file.

Apr 26, 2022

Loading thumbnail…

Fork of Pie Chart

This fork of Observable’s pie chart example embeds an interactive D3.js (v5) visualization via an iframe into a minimal HTML page. The chart renders the U.S. population by age group, using `d3.pie()` and `d3.arc()` to draw wedges, with a spectral color scale and labels positioned by `d3.arc().centroid`. Data comes from a local CSV file. The styling is handled with CSS, and the code leverages Observable’s `PieChart` function.

Apr 24, 2022

Loading thumbnail…

bar chart example

This example presents a horizontal bar chart comparing the populations of ten Chinese provinces, with populations listed in the data.csv file and scaled by a factor of 1000. The visualization uses D3.js v5 within a React framework, rendering to an SVG element. The code constructs linear and band scales, and employs `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to position bars and axes, with CSS styling for the bar fill color and text size.

Apr 20, 2022

Loading thumbnail…

Fork of Let's make a map with D3.js!

This example displays a natural Earth projection of the world map, with countries rendered as light green filled paths against a blue ocean sphere. The visualization uses D3 v5 and TopoJSON to load world-atlas data from unpkg, then applies `d3.geoNaturalEarth1` and `d3.geoPath` to project geographic features. The code also draws a background sphere representing the globe and sets stroke opacity for country boundaries.

Apr 20, 2022

Loading thumbnail…

Fork of example of line chart

This scatterplot visualizes the relationship between horsepower and weight for a sample of automobiles, with each car represented by a semi-transparent red circle. Built with D3 v5, it uses scaleLinear to map both variables and customizes the axes with tick formatting and labels. The visualization loads automobile data from a CSV file and renders it as SVG, demonstrating axis customization through the axisBottom and axisLeft APIs.

Apr 19, 2022

Loading thumbnail…

example of scatter plot

This scatter plot visualizes the relationship between horsepower and weight for various car models, with each circle representing an individual car. The plot uses D3’s `scaleLinear` for both axes and renders circles via SVG, with axes customized using `axisBottom` and `axisLeft`, including tick lines and labels. Data is loaded from a CSV file containing auto-mpg statistics, and the visualization distinguishes overlapping points through semi-transparent red circles. The chart title is displayed at the top, and all styling is handled through external CSS.

Apr 19, 2022

Loading thumbnail…

D3.js Intro

This example displays a simple yellow smiley face rendered in SVG, with animated eyebrows that move up and down over time. The face is constructed using D3.js v5 selection methods to append circles, rectangles, and an arc-generated mouth path. The code uses the `arc` API from D3 to define the mouth shape, while `transition` and `duration` create the eyebrow animation. The static SVG container is sized at 960 by 500 units, and the face is centered using a translated group element.

Apr 19, 2022

Loading thumbnail…

Cars Report

This example displays a text-based report of cars filtered by price, showing each car’s year, make, model, and price on separate lines. It uses React, but the core logic runs through JavaScript functions in separate modules: `generateReport` filters the imported `cars` array (parsed from JSON) by a maximum price and joins formatted strings via `formatCar`. The HTML page has a styled `<pre>` element that receives the generated message through `document.getElementById` and sets its `textContent`.

Apr 19, 2022

Loading thumbnail…

Treemap example

This treemap presents the populations of ten countries, with each rectangle’s width proportional to its population and the height divided equally. The visualization uses a bar-chart layout rather than a nested treemap, with countries listed on the y-axis and population values on the x-axis. Built with D3 v5, the code loads data from `data.csv` and draws SVG rectangles using `scaleLinear` and `scaleBand` scales, with axes rendered via `axisLeft` and `axisBottom`.

Mar 23, 2022

Loading thumbnail…

Shapes with SVG and CSS

This example shows how to draw basic geometric shapes—circles, rectangles, lines, and paths—in an SVG canvas, using CSS classes to apply stroke and fill styling. The code uses raw SVG elements alongside a linked stylesheet, with JavaScript and React noted as part of the broader setup, though the visible rendering relies solely on SVG markup and CSS rules. CSS classes like `.lines` control line thickness and color, while inline attributes set shape fills and transformations, such as scaling and translating groups.

Mar 21, 2022

Loading thumbnail…

Fork of HTML Starter

This example displays a single HTML message, “Hello HTML!”, centered on the page using a large 13em font size. It demonstrates the fundamental structure of an HTML document that incorporates CSS styling within a `<style>` block. The code uses no JavaScript or external libraries, relying solely on plain HTML and CSS to render the text. This serves as a minimal template for combining CSS and JavaScript in a web page.

Mar 18, 2022