nick-yadav

@nick-yadav·10 public vizzes

Bowl of Fruit- General Update Pattern

This example demonstrates the general update pattern for data joins in D3, rendering a row of fruit icons as SVG circles that transition between apple and lemon states. The visualization displays five fruit objects created with `range` and a `makeFruit` factory, with each fruit’s type determining its color. Using `d3.select` and the SVG container’s dimensions, the code sets up the scene but does not yet implement enter, update, or exit selections—the core mechanism for binding data to visual elements. The example relies on D3 v5 and React as the framework, with the SVG layout fixed at 960 by 500 pixels.

Aug 17, 2020

Loading thumbnail…

Temperature Scatter Plot

This visualization plots daily mean temperatures in San Francisco for December 2015, using a scatter plot with a smoothed area curve to highlight the temperature trend over time. Temperature values are encoded on the y-axis, with time on the x-axis, and the chart provides grid lines and axis labels for readability. Built with D3 v5, the example uses `csv` to load the data, `scaleLinear` for both axes, `area` with `curveBasis` to generate the filled path, and custom SVG text elements for the title and axis labels.

Aug 12, 2020

Loading thumbnail…

Temperature Scatter Plot

A temperature scatter plot visualizes the mean daily temperature in San Francisco as a smooth line over time, with each point representing a day in December and the early winter season. The visualization uses D3 v5 to load CSV data, apply linear scales for time and temperature axes, and render the chart as an SVG path with a curved basis line. D3’s axis generators add labeled ticks and gridlines, while the data comes from a local CSV file containing weather metrics like temperature, humidity, and wind speed.

Aug 12, 2020

Loading thumbnail…

Cars Scatter Plot

This scatter plot shows the relationship between car horsepower and weight, with each circle representing a vehicle from the dataset. The visualization uses D3 v5’s `scaleLinear` to map values, `axisLeft` and `axisBottom` for the axes, and SVG circles rendered with `selectAll` and `enter`. It includes labeled axes, a title, and grid lines from the axis tick sizes.

Aug 12, 2020

Loading thumbnail…

Scatter Plot

This scatter plot shows the population of the top 10 most populous countries, with each circle positioned along a linear population scale and a point scale for country names. The visualization uses d3.csv to load data, d3.scaleLinear and d3.scalePoint for axes, and d3.axisLeft and d3.axisBottom with customized tick formatting that abbreviates billions as "B." Circles are rendered as SVG elements with a fixed radius, while grid lines and axis labels are styled via CSS.

Aug 12, 2020

Loading thumbnail…

Customizing Axis

This bar chart displays the top ten most populous countries, with population values shown on a horizontal axis and country names on a vertical axis. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` for the population scale and `scaleBand` for country categories. Axis customization includes tick formatting via `format('.3s')` that replaces 'G' with 'B' for billions, plus removal of axis domain lines and grid-line styling through `axisBottom` and `axisLeft` calls. Population data from CSV files is converted to absolute numbers by multiplying by 1000.

Aug 11, 2020

Loading thumbnail…

Making a Bar Chart

This bar chart displays the populations of ten countries, scaled from a CSV dataset. It uses D3 v5’s `scaleLinear` and `scaleBand` to map population values to bar widths and country names to vertical bands, with `axisLeft` and `axisBottom` generating the axes. Bars are rendered as SVG rectangles, with data loaded via `d3.csv` and population values multiplied by 1000 to reflect thousands.

Aug 11, 2020

Loading thumbnail…

Lets make a Face with D3.js

This example constructs a simple cartoon face using D3.js v5 in an SVG-based React setup. It shows a yellow circle for the head, positioned at the center of a 960x500 SVG, with two smaller black circles for eyes offset horizontally and vertically. The code uses D3 selections and the `append` method with `attr` chaining to set geometric properties like `cx`, `cy`, and `r`. All shapes are rendered as static SVG elements without interaction or data binding.

Aug 8, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example shows a basic SVG scene composed of geometric shapes—circles, rectangles, lines, and a path—styled with CSS classes. It demonstrates how SVG elements inherit properties like stroke and fill from CSS, with specific overrides for path elements. The code uses raw SVG tags (circle, rect, line, path) inside a scalable group, with transform attributes for positioning. CSS in style.css applies global layout and stroke styles, while inline HTML contains the SVG structure. Rendering occurs entirely in the browser via standard SVG and CSS, with no additional JavaScript libraries involved.

Aug 8, 2020

Loading thumbnail…

HTML Starter

This example shows a list of cars filtered by price and displayed as formatted text in a webpage. The sample data contains five car objects with year, make, model, and price fields, defined as a JSON string in `cars.js`. The code uses React’s `import` syntax to bring in the data and a `report` function that filters cars under a given price and maps them to strings via `formatCar`. The result is rendered into the DOM using `document.getElementById` and setting `textContent`, replacing the initial "Hello HTML" message in the `index.html` file.

Aug 6, 2020