umihito

@umihito·15 public vizzes

Bowl of fruit - General Update Pattern

Five pieces of fruit are rendered as red circles in a green bowl, then updated through a general update pattern. Over timed intervals, an apple is removed, another changes to a yellow lemon with a black stroke, and a final apple is deleted. The code uses `d3.selectAll`, `data`, `enter`, `merge`, and `exit` with a key function based on random IDs. Scales from `d3.scaleOrdinal` map fruit types to colors, radii, and strokes, while SVG groups, circles, and text are joined and transformed.

Jun 5, 2020

Loading thumbnail…

Bowl of fruit - nested and with transition

A bowl of fruit demonstrates nested SVG group elements and animated transitions. Five apples initially render in a row, with each fruit represented as a group containing a circle and a text label. At one-second intervals, an apple disappears, an apple transforms into a lemon, and the second apple is removed. D3's data join with key functions tracks fruits by unique IDs, while `transition().duration(1000)` animates position changes on exit. Scales map fruit types to colors, radii, and stroke styles.

Jun 5, 2020

Loading thumbnail…

Bowl of fruit - General Update Pattern with transition

Five apples animate into a row of circles, then shift as fruits are eaten and one apple becomes a lemon. The visualization demonstrates D3’s general update pattern, using `selectAll`, `data`, `enter`, `merge`, and `exit` with `transition` to smoothly resize and reposition circles. A `scaleOrdinal` maps fruit types to visual properties like color, radius, and stroke. The SVG rendering relies on D3 v5.

Jun 5, 2020

Loading thumbnail…

Temperature in San Francisco Line Charte

This visualization displays world population growth over time as a filled area chart, using a green semitransparent path. The x-axis maps time (Date objects) and the y-axis maps population counts, formatted with d3’s `format(".1s")` to abbreviate large numbers. Built with D3 v5, it uses `scaleTime`, `scaleLinear`, `area`, `curveBasis`, and `axisBottom`/`axisLeft` to generate the SVG. Data comes from a CSV of world population by year, parsed with `csv()` from D3’s data loading.

May 29, 2020

Loading thumbnail…

Temperature in San Francisco Line Charte

A line chart area graph depicts temperature readings in San Francisco over a single week, using a green filled area beneath a smooth curve to show the data's variation. The visualization is rendered as an SVG using D3 v5, loading data from a CSV file. The code utilizes d3.scaleTime and d3.scaleLinear for the axes, and d3.area with d3.curveBasis to generate the smooth filled path.

May 28, 2020

Loading thumbnail…

Temperature in San Francisco Line Charte

A line chart displays a week of temperature readings in San Francisco, with time on the x-axis and temperature on the y-axis, using a smoothed curve to connect the data points. The visualization loads CSV data from a VizHub dataset, parsing timestamps and numeric temperatures before rendering. Built with D3 v5, it employs `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to generate the path. SVG output includes labeled axes, a title, and a maroon stroke styled via CSS.

May 28, 2020

Loading thumbnail…

Cars scatter plot

This scatter plot visualizes the relationship between horsepower and weight for a dataset of cars, with each circle representing a vehicle. The plot uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` to construct axes with grid lines, while the data is loaded via `csv` from an external auto-mpg dataset. Circles are rendered as SVG elements, and axis labels and a title are added as text. The margins and `nice()` scaling ensure readable axis limits.

May 28, 2020

Loading thumbnail…

ScaterPlot

This scatterplot displays the population of the top 10 most populous countries in 2018, based on United Nations data. The code uses D3 v5 with an SVG rendering approach, employing `d3.scalePoint` for the categorical y-axis and `d3.scaleLinear` for the population x-axis. Customized axes with formatted tick labels (converting billions to B) and gridlines are generated via `d3.axisBottom` and `d3.axisLeft`. The title and axis label are added as SVG text elements.

May 20, 2020

Loading thumbnail…

Customizing Axes

A bar chart ranks ten countries by population using horizontal bars, with a custom margin and axis layout. The code loads CSV data and uses D3 v5 scales (`scaleLinear`, `scaleBand`) and axes (`axisBottom`, `axisLeft`) to position bars and ticks. The x-axis applies a `format("s")` tick formatter to abbreviate large numbers, while SVG `rect` elements render the bars in steelblue.

May 20, 2020

Loading thumbnail…

Lets make a face

A smiling face is drawn inside a rounded green rectangle, with a single black circle placed above the center to suggest an eye. The code uses D3 v5’s selection and `arc` API, though only basic shape elements like `rect` and `circle` are rendered. The SVG canvas is 960 by 500 pixels, and a group is translated to the center to position the face. The current code creates one eye and a blank expression, leaving the rest of the face unfinished.

May 19, 2020

Loading thumbnail…

Let's make a bar chart

This example shows a basic bar chart of population data for ten countries, with each country represented by a rectangle. The visualization uses D3 v5 APIs including `select`, `csv`, `scaleLinear`, and `max` to load the data, parse the population values, and append SVG rectangles to the chart. The bars are styled with a steelblue fill via CSS, though the code currently sets a fixed width and height for all rectangles, so it does not yet scale the bars to reflect the data values.

May 7, 2020

Loading thumbnail…

Lets make a face

A smiling cartoon face is drawn with D3.js, composed of a yellow circle for the head, two eyes, eyebrows, and a mouth shaped as an arc. The face is centered on an SVG canvas, with the mouth created using the `d3.arc` function and the layout arranged through nested SVG groups. A simple animation is applied via the D3 `transition` method, which moves the eyebrows down and then back up over two seconds each way, creating a subtle expressive effect. The example demonstrates basic SVG composition and state animation without external data sources.

May 4, 2020

Loading thumbnail…

Cars Report

This example demonstrates a simple text-based report of used car listings, displaying each car’s year, make, model, and price after loading data from a hard-coded JSON string. It shows a loading message while a simulated asynchronous `getCars` function, which returns a Promise with a two-second delay, fetches the data. The report is generated using a `generateReport` module that filters or formats entries, and the page updates dynamically via the DOM API `textContent`. The code uses ES6 modules for `formatCar` and `getCars`, with no external charting libraries.

Apr 28, 2020

Loading thumbnail…

Cars Report

This example demonstrates the fundamentals of importing and rendering JavaScript data structures, showing a single car record as plain text on a webpage. The code defines an array of car objects in `cars.js`, exports them using ES module syntax, and imports them into `index.js` to access the first entry. It uses the `document.getElementById` and `textContent` APIs to display the car object in a predefined `<pre>` element. The data comes from a static JSON array, and the project is bundled with Rollup.

Apr 17, 2020

Loading thumbnail…

Cars Report

This visualization displays a static text message, “Hello World,” rendered in large type within a web page. Built with React, the code uses a simple JavaScript `getElementById` call to update the content of a `<pre>` element, bypassing React’s virtual DOM for direct DOM manipulation. The page loads a precompiled bundle, though no charting or data-processing library is employed in this minimal example.

Apr 15, 2020