preethamkesa

Fork of Let's make a Bar Graph with D3.js

This bar chart displays the populations of ten countries, using a linear scale for population and a band scale for country names. Built with D3.js v7, it reads data from a CSV file and renders SVG rectangles. The chart uses `scaleLinear` and `scaleBand` for axes, with `axisLeft` and `axisBottom` to generate tick marks, and the bars are styled with a steelblue fill.

May 1, 2022

q

An interactive family tree rendered as a hierarchical node-link diagram with collapsible branches and animated transitions. Built with React and D3 v3, the visualization loads hierarchical JSON data and displays color-coded nodes based on type, with red links and pink arrows connecting family members. Clicking a node toggles its children, and the tree supports zoom and drag via d3.behavior.zoom. Rectangular SVG nodes include tooltips, while the layout dynamically adjusts its dimensions to fit the data's depth and breadth.

h

This D3.js visualization shows a small network of nine named individuals connected by directed links, rendered as a force-directed graph with labeled circular nodes and arrowed edges. The force simulation, driven by `d3.forceSimulation`, `forceLink`, `forceManyBody`, and `forceCollide`, positions the nodes on an SVG canvas. Nodes are interactive—they can be dragged to reposition the layout, which then re-settles. The qualitative data comes from a local `data.json` file specifying node groups and link values, with the static SVG output styled via CSS.

map

A map of Estonian counties rendered as an SVG using React and D3. The visualization uses a Mercator projection via `d3.geoMercator` and `d3.geoPath` with `fitExtent` to scale the map to the viewport. County boundaries are drawn as brown filled paths with darker stroke outlines, while interior borders are highlighted using a TopoJSON mesh. The geographic data is loaded from a remote TopoJSON file and processed with `feature` and `mesh` from the topojson library.

ic8

This visualization shows a hierarchical tree structure using circles connected by paths, with each circle labeled by a Marvel character name. The data is hardcoded as an array of parent-child relationships, processed with `d3.stratify()` and `d3.tree()`. Animations are applied to path elements via `transition().duration(1000)`, drawing lines from parent to child, while circles fade in with a radius of 30 pixels and text labels appear with a delay based on tree depth. The SVG renders at full window size with a fixed vertical offset.

ICE 8

This interactive network visualization displays six nodes (jack, yoru, mari, jon, sam, edam) connected by weighted links, rendered as an SVG force-directed graph. Drawn with circles, green links, and black text labels, the graph uses d3.layout.force with gravity, distance, and charge parameters to position nodes dynamically on a 750×740 canvas. Users can click and drag any node to reposition it, with link thickness reflecting edge weight. Data loads from a local graphFile.json containing node groups and link weights.

map

This example displays a choropleth map of Swedish counties (laen) using geographic data from a TopoJSON source. The visualization renders province boundaries as filled shapes in a blue-teal color, with interior borders highlighted in green, all drawn through SVG paths generated by `d3.geoPath` and the `geoMercator` projection. Built with React and d3.v5, the code applies the projection’s `fitExtent` method to scale and position the map within the viewport. The map is populated using `topojson.feature` and `topojson.mesh` to extract geometries and internal boundaries from the fetched dataset.

F

A choropleth map renders Indian state boundaries in solid orange on a black background, filling the entire viewport. The visualization loads a TopoJSON file from a GitHub gist via `d3.json`, extracts its geometry collection, and converts it to GeoJSON features using TopoJSON’s `feature` function. React renders the map with `d3.geoMercator` and `d3.geoPath` to project and draw each polygon as an SVG path.

ICE-8

This example displays a choropleth map of the United States using an Albers equal-area conic projection. It shows land and state boundaries, with a graticule overlay and a distinct purple stroke for interiors. The visualization uses React to manage state and rendering, while leveraging `d3.geoAlbers` and `d3.geoPath` for projection and path generation. Data is loaded asynchronously from a TopoJSON file via `d3.json` and `topojson.feature` and `topojson.mesh`, and rendered as SVG elements.

p

This example shows a map of the United States of America, generated using D3.js and TopoJSON. It fetches world country boundaries from a world-atlas dataset and filters the GeoJSON features to display only the USA. The map is rendered as an SVG with the d3.geoPath generator and a projected d3.geoAlbersUsa projection, with each country path styled in pink and outlined in black. The visualization uses d3.json to load the TopoJSON data and d3.select to bind the path elements.

p

This example displays a world map with pink country shapes on a light blue background, using a natural Earth projection. It loads geographic data from the World Atlas TopoJSON file, converts it to GeoJSON with topojson.feature, and renders each country as an SVG path using d3.geoPath with the d3.geoNaturalEarth1 projection. The visualization is minimal, showing only country boundaries with black strokes and no additional interactivity or labels.

Tree

This example shows a family tree constructed from a hardcoded array of parent-child name pairs. The visualization renders green circles connected by red links, with each person’s name displayed inside their circle. Using d3.stratify and d3.tree, the hierarchy is computed and positioned in an SVG canvas. The code animates the connections and circle radii with d3 transitions, while text fades in based on each node’s depth. The page uses a light blue background and centers the layout.

Fork of ICE 8 example for Tree graphic

This example shows a hierarchical tree diagram with animated node and link rendering. The visualization uses a small dataset of parent-child relationships, displayed as circles connected by blue paths, with text labels appearing sequentially based on depth. The code employs `d3.stratify()` to organize the data, `d3.tree()` for layout, and transitions to animate the link drawing, circle resizing, and label fade-in effects. All elements render as SVG, with circle styling defined via CSS.

Fork of ICE - 8 Tree

This example presents a family tree as an animated node-link diagram, encoding each person as a circle node with a text label and connecting parent-child relationships as straight black links. The visualization uses d3.stratify to convert the flat data array into a hierarchy and d3.tree() to compute layout positions within an SVG. On rendering, links and circles transition their attributes (such as `d` and `r`) over durations, while node labels fade in with a staggered delay based on depth, creating a sequential reveal effect. The code directly selects the body element, appends an SVG, and applies custom styling for teal circle fills on a light blue background.

ai

This example displays a single SVG path representing the United States, rendered in orange with black borders against a green background. It uses a world-atlas TopoJSON file to extract country features and filters for the United States. The map is generated with `d3.geoAlbersUsa` projection and `d3.geoPath`, applying a fixed scale and translation. The code selects an SVG element and appends the country path, though it does not include user interaction or additional map details.

a

This example shows the outline of the United States as a single pink country against a light blue background, using an equirectangular-style Albers USA projection. It fetches world country boundaries from the world-atlas TopoJSON dataset and filters the features to include only the United States. The code uses d3.geoAlbersUsa, d3.geoPath, and the topojson.feature API to project and render the path as an SVG element.

a

a

This example displays a world map rendered in red with black country borders on a green background. It uses the Natural Earth projection and loads geographic data from the world-atlas TopoJSON dataset. The visualization is built with d3.geoPath and d3.geoNaturalEarth1 to project and draw each country as an SVG path element. The code fetches the TopoJSON file, converts it to GeoJSON using topojson.feature, and appends the paths to the SVG container.

Line Chart

This line chart displays annual U.S. auto sales by brand, with the x-axis mapping the year and the y-axis showing total sales volume. The visualization uses D3 v5's `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes, while the `line` generator draws the trend line. Data is loaded from a CSV file via `d3.csv`, and the chart is rendered as an SVG with styled gridlines and axis labels. The title "Sales of the item at the time" appears above the plot.

Area Chart

This example visualizes the sales figures for various item IDs using a combined line and area chart. Data is loaded from a CSV file via a URL, with dates parsed for the x-axis. The visualization employs D3 v5's `scaleTime` and `scaleLinear` for axes, and uses `line` and `area` generators with a `curveBasis` to create smooth paths. The SVG output includes styled axes with tick marks, and the area under the line is filled in yellow to emphasize the trend.

ice7

This animated scatter plot cycles through four different column pairings of the Iris dataset every two seconds, with each species represented by a distinct color (red, black, or blue). Built with D3 v6, it uses reusable chart functions like `scatterPlot()` with `scaleLinear`, `axisBottom`, and `axisLeft` to render SVG circles and axes. The data is loaded asynchronously via `d3.csv` from a GitHub gist, while `setInterval` drives the rotation of x-axis variables.

ice

This animated scatter plot cycles through different visualizations of the Iris dataset, shifting the x-axis to display different flower measurements every two seconds. The reusable chart component, built with d3.scaleLinear, d3.axisLeft, and d3.axisBottom, renders colored circles representing three species. The animation uses setInterval to call scatterPlot with new parameters, while font styling comes from the Share Tech typeface. Data is loaded from a GitHub-hosted CSV.

Fork of World Population Area Chart

This area chart visualizes sales data over time, showing the relationship between total revenue and unit price. The SVG rendering uses d3.area with a basis curve to create the filled path, while d3.scaleTime and d3.scaleLinear handle the x and y axes. Data is loaded via d3.csv from a GitHub gist, with axis labels and tick formatting configured through d3.axisBottom and d3.axisLeft.

ic7

This visualization displays nuclear energy production over time from 2010 to 2019, combining a smooth line and filled area chart to emphasize both trend and magnitude. The x-axis maps years using d3.scaleTime, while the y-axis uses d3.scaleLinear for energy values. The code employs d3.line, d3.area, and d3.curveBasis to generate the curved shapes, with d3.csv loading the data from a GitHub gist. Red strokes and a sky-blue area fill highlight the changes in nuclear usage across the decade.

ic7

This example shows the highest nuclear energy consumption from 2010 to 2020, using a line chart that plots yearly values with red tick labels, blue gridlines, and a brown line. The chart uses d3.csv to load data from a GitHub gist, d3.timeParse to convert year strings to dates, and d3.scaleTime and d3.scaleLinear for axes. The line is generated with d3.line, while d3.axisBottom and d3.axisLeft render the axes with custom tick sizing and padding.

ICE-7

This example shows a line chart of the highest nuclear energy consumption from 2010 to 2020, with the year on the x-axis and nuclear usage on the y-axis. The visualization uses D3 v5 to load CSV data, parse dates with `d3.timeParse`, and render an SVG with `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generators. The chart includes labeled axes, red tick text, blue grid lines, and a brown stroke for the line path. The data is fetched from a GitHub gist.

F

This animated scatterplot cycles through the four numeric measurements of the Iris dataset, rotating which feature is mapped to the x-axis while sepal length stays on the y-axis. Each species is color-coded (orange, blue, black) with fixed circular marks, and the D3 code uses `scaleLinear`, `axisBottom`, and `axisLeft` to render axes. A `setInterval` updates the x-value accessor every few seconds, and the SVG rendering includes a manual legend and dynamic axis labels.

pree

This visualization presents the Iris flower dataset as a reusable scatter plot with animated transitions between different attribute pairs. The animation cycles through four combinations of sepal and petal measurements every two seconds, with each point colored by species. Built using D3.js v6, the example implements a custom `scatterPlot` function that wraps `scaleLinear`, `axisLeft`, `axisBottom`, and `scaleOrdinal` APIs. SVG circles render the data, while a legend shows species assignments. The code loads data from a GitHub Gist and uses `setInterval` to coordinate the view changes.

p

A simple line chart shows the change in a quantitative "rate" over temporal "steps" using a single line mark. It loads its data from a remote GitHub gist URL, and the chart is defined as a Vega-Lite specification in `line.vl.json`. The visualization is rendered by the Vega-Lite and Vega libraries, embedded into the page via `vegaEmbed`. The chart is configured with a fixed width of 360 pixels, encoding the steps field on the x-axis and the rate field on the y-axis.

Fork of Reusable D3 Scatter Plot

This fork of a reusable D3 scatter plot animates the Iris Dataset across different feature pairs. It cycles the x-axis through petal width, sepal width, petal length, and sepal length every two seconds, while the y-axis remains fixed on sepal length. The visualization uses D3 v6 modules like `scaleLinear`, `axisLeft`, `axisBottom`, and the selection API with `join` to update SVG circles and axes. Data is loaded from a CSV URL, and the plot dimensions fill the browser window.

pree

This example displays the Iris dataset as a scatter plot, with petal width on the x-axis and sepal length on the y-axis, with each species colored distinctly (green, pink, blue). Using D3 version 6.7.0, it dynamically re-renders the plot by cycling through different data columns as the x-axis variable, showing how the same points reposition along the axes. The visualization uses D3’s `scaleLinear`, `axisLeft`, and `axisBottom` to draw the plot, with SVG circles for data marks and a black background for high contrast.

f

This example visualizes car sales in India from 2009 to 2019 using a combined line and area chart, with the area fill emphasizing the volume of sales over time and the line highlighting trends. The chart uses d3.csv to load data from a GitHub Gist, then applies d3.scaleTime and d3.scaleLinear for the axes, d3.line and d3.area with curveBasis for the paths, and d3.axisBottom and d3.axisLeft for the labeled axes, all rendered as SVG.

ic\

The visualization depicts car sales data from 2013 to 2021 as a red line chart, with time on the x-axis and sales volume on the y-axis. It uses D3 v5 to load CSV data from a GitHub gist, parse the dates via `d3.timeParse`, and render the chart as an SVG. The code applies `scaleTime` and `scaleLinear` for axes, `axisBottom` and `axisLeft` for ticks, and `line` to generate the path, with grid lines and labeled axes.

f

This visualization shows automobile sales in India from 1999 to 2012 as a line chart, with the x-axis representing years and the y-axis representing sales in thousands. The chart uses d3.scaleTime and d3.scaleLinear to map data, d3.axisBottom and d3.axisLeft for the axes, and a d3.line generator to draw the path. Data is loaded as CSV from a GitHub gist using d3.csv, and the SVG rendering includes custom tick styling, axis labels, and a title.

Line Chart

This line chart displays car sales in India from 2009 to 2019, with the x-axis representing years and the y-axis representing sales figures. The visualization uses D3 v5's `scaleTime` and `scaleLinear` for axis scaling, `line` for path generation, and `axisBottom`/`axisLeft` for grid lines and tick marks. SVG rendering is employed, with data loaded from a CSV file via `d3.csv` and parsed using `d3.timeParse`. Styling is applied through CSS classes to highlight the line and grid.

p

This example shows a line chart of car sales in India from 2009 to 2019, with sales on the y-axis and years on the x-axis. Using d3.scaleTime and d3.scaleLinear, the chart maps the data points and renders an SVG path via d3.line. The axes are generated with d3.axisBottom and d3.axisLeft, featuring grid lines and red tick labels. Data is loaded from a CSV file, parsed with d3.csv, with year values reformatted using d3.timeParse.

Fork of Heart rate

This line chart displays gross value over time, sourced from a CSV file hosted in a GitHub gist. The visualization is rendered using Vega-Lite and embedded in an HTML page through the Vega-Embed API. The chart’s x-axis encodes the temporal dimension, while the y-axis encodes the quantitative gross value, with the data plotted using a simple line mark.

Fork of Temperature in San Francisco Line Chart

This line chart displays one week of temperature data in San Francisco, sourced from Data Canvas - Sense Your City, with the value mapped to the x-axis and time on the y-axis. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to create a smooth maroon path on an SVG canvas. Axis labels, grid lines, and a title are rendered via SVG text elements, while the data is loaded from a CSV using `d3.csv`.

Fork of D3 line chart: Daily temperature in Belgium for 2021

This interactive line chart displays the daily average air temperature in Belgium for the year 2021. Data is loaded from a CSV file using the `csv` function from D3 v7, then sorted by date. The visualization is built with React, rendering an SVG that uses `scaleTime` and `scaleLinear` to map date and temperature values to coordinates. A single natural cubic spline path, created with `line` and `curveNatural`, shows the temperature trend, while axes are generated with tick marks from `xScale.ticks()` and `yScale.ticks()`.

Fork of Stylized Line Chart

This line chart visualizes weekly temperature data from the Data Canvas Sense Your City dataset, plotting temperature against time. The SVG rendering uses React components with D3 scales (scaleTime, scaleLinear) to map the data points and a D3 line generator with curveNatural to create a smooth, stylized path. Axes are built using custom React components that leverage the D3 axis tick system, with a Poppins font and muted color palette applied via CSS.

Fork of VizHub User Count Over Time

A line chart tracks the cumulative number of unique logged-in VizHub users over time, from the platform’s launch on August 14, 2018, through March 2022. The y-axis shows user counts, while the x-axis represents the timeline, with annotations marking key events such as a Medium post, the VizHub 2.0 Kickstarter, and the Datavis 2020 launch. The visualization uses D3 v4 with an SVG rendering, leveraging `d3.scaleTime()`, `d3.scaleLinear()`, and `d3.line()` to map the data from a CSV file.

Pie Chart

This pie chart visualizes the total revenue of different countries in sales. The D3 v5 code uses `select`, `pie`, `arc`, and `scaleOrdinal` to generate SVG segments from a JSON dataset, with each slice colored distinctly. A legend, created via `append` with rectangles and text, identifies each region and its corresponding revenue value, formatted with `format('.4~g')` and suffixed with "K". The chart is centered on a 960x500 canvas, with the pie translated to the left and the legend positioned to the right.

Fork of VizHub User Count Over Time

This line chart shows the cumulative number of unique logged-in VizHub users over time, from the platform’s launch in August 2018 to March 2022. The visualization highlights key growth events, such as a Medium post, the VizHub 2.0 Kickstarter, and the Datavis 2020 course launch, using annotation labels. The chart is built with D3 v4, using `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.axisBottom` and `d3.axisLeft` to render an SVG. Data comes from a local `users.csv` file, and gridlines are drawn via axis tick sizes.

Fork of Stylized Line Chart

This fork of a stylized line chart visualizes temperature over time from five cities. The React and D3 code renders an SVG with a natural curve connecting daily temperature data points, using scales from `d3.scaleTime` and `d3.scaleLinear`. Axes display weekday abbreviations and temperature values, styled with Poppins font and muted teal colors. The chart loads CSV data from a Data Canvas Sense Your City dataset via `d3.csv`.

Fork of ILINet Flu Surveillance Data

This fork of ILINet Flu Surveillance Data displays national influenza-like illness (ILI) totals as a multi-series line chart, with each line representing a year from 2015 to 2019 across weeks of the year. It uses an unordered color encoding for the year field, making it visually difficult to compare trends temporally. The visualization is built with the vega-lite-api, which registers Vega and Vega-Lite for rendering, and configures axis and label styles for readability. Data is fetched as CSV via d3’s csv parser from a Gist, originally sourced from CDC FluView Interactive.

Fork of Fork of Coronavirus Linear Y Axis

A line chart displays the cumulative total of COVID-19 deaths over time, using a linear y-axis scale from zero to the current maximum. The chart is rendered as an SVG with paths and gridlines, and the data comes from the Johns Hopkins Coronavirus Dataset. The visualization is built with React and D3 v5, using `scaleTime`, `scaleLinear`, `line`, `axisBottom`, and `axisLeft` to construct the axes and line path.

Fork of Coronavirus Linear Y Axis

This chart displays the cumulative death toll from COVID-19 over time using a linear y-axis scale. It uses a React-D3 combination, with `d3.scaleTime` mapping dates and `d3.scaleLinear` mapping death totals, rendered as an SVG path generated by `d3.line`. Axis components leverage `d3.axisBottom` and `d3.axisLeft` with gridlines, while annotated marker lines highlight specific values. Data is sourced from the Johns Hopkins COVID-19 time-series dataset via a CSV fetch and transformed in a `useData` hook.

Fork of VizHub User Count Over Time

This chart shows the growth of unique logged-in VizHub users from its August 2018 launch through March 2022. A black line chart traces the cumulative user count over time, with annotated milestones like the VizHub 1.0 release, a Kickstarter for 2.0, and the Datavis 2020 launch. The code uses D3 v4’s `d3.line`, `d3.scaleTime`, and `d3.scaleLinear` to render SVG paths and circles, while `d3-svg-annotation` adds callout labels for key events. Data comes from a CSV file of date and user totals.

Fork of Fork of Sea Turtle Survival (mock data)

This stacked area chart shows the survival of sea turtle species (Green, Loggerhead, and Hawksbill) from 1910 to 1990 using mock data. The chart renders as SVG with D3 v4, using `d3.stack` and `d3.area` with `curveBasis` to create smooth stacked areas. Labels are positioned via `d3.areaLabel`, while hover effects reveal species names through built-in SVG `<title>` tooltips. The y-axis includes gridlines and a rotated title, with data parsed from an external CSV file using `d3.csv`.

p

This example visualizes a week of temperature readings from San Francisco, plotting temperature over time as a smooth, natural curve. The chart displays time on the x-axis with weekday labels and temperature on the y-axis, both rendered using d3.axisBottom and d3.axisLeft. Built with React, the visualization uses d3.scaleTime and d3.scaleLinear to map data, and d3.line with curveNatural to draw the path. Data comes from the Sense Your City Dataset via CSV, loaded asynchronously with d3.csv.

Fork of Pie Chart

This example shows 2022 US auto sales by brand as a pie chart with an interactive legend. The chart maps each brand's year-to-date sales to a colored arc using `d3.pie` and `d3.arc`, with a manually defined color scale via `d3.scaleOrdinal`. The SVG is generated by D3 v5, and legend entries display each brand name alongside its sales value in thousands. It loads CSV data from a GitHub gist using `d3.csv`.

Fork of pieChart

A pie chart displays the absolute frequency of categorical values, initially for student grades, within a React-based visualization. The chart animates its segments using d3.arc and a transition.attrTween, interpolating start and end angles over a 500-millisecond delay per slice. A dropdown menu allows switching between categorical columns (e.g., "note" or "student"), recalculating frequencies via d3.nest().key().rollup() and re-rendering the SVG with d3.select and path elements. Hovering activates tooltips showing each slice's key and value.

i

Animated scatter plot of the Iris dataset cycles through four feature pairs every two seconds, visualizing relationships between sepal and petal measurements. Built with D3 v6, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` within a reusable `scatterPlot` function. SVG circles update via `selectAll` and `join`, while a `setInterval` triggers re-renders with new x-value columns. Data loads as CSV from a GitHub Gist, with axes and labels styled using the Share Tech font.

Iris Dataset Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and petal width on the y-axis, with each point colored by species (setosa, versicolor, or virginica). The plot also encodes sepal length and width as additional attributes on each circle, though these do not affect the visual radius. Built with D3 v6, the code uses `d3.csv` to load data, `d3.scaleLinear` and `d3.extent` for scaling, and `d3.axisLeft` and `d3.axisBottom` to render axes. The SVG circles are created via `selectAll('circle').data(marks).join('circle')`, with static labels for both axes.

Mar 7, 2022

Fork of Animated Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, letting viewers choose which flower measurements to display on the X and Y axes via dropdown menus. The chart renders as SVG circles with smooth 1000-millisecond transitions, using D3 v6’s `selection.join` to handle enter, update, and exit states. Axes update automatically with `axisLeft` and `axisBottom`, while menus built with a reusable `menu` factory dispatch change events to re-assign the xValue and yValue accessors. Data loads from a GitHub-hosted CSV file, parsed with numeric coercion for the four measurement columns.

Mar 7, 2022

Fork of NASA Near Earth Objects Scatter Plot

This scatter plot visualizes NASA Near Earth Objects, plotting their velocity in thousand miles per hour against their distance from Earth in million miles. Each circle represents a near-Earth object, with the dataset loaded via `d3.csv` and parsed into numeric fields. The visualization uses `d3.scaleLinear` to map data values to screen coordinates and renders circles in an SVG. Axes are generated with `d3.axisLeft` and `d3.axisBottom`, with custom labels appended for each axis. The chart fills the browser window using `window.innerWidth` and `window.innerHeight`.

Mar 7, 2022

Fork of Hello Observable Plot

This example renders the classic Iris dataset as a scatter plot using Observable Plot, with petal length on the x-axis, petal width on the y-axis, and species encoded by stroke color. The visualization fills the entire browser window by setting the plot’s width and height to the inner dimensions of the viewport. The code loads data with `d3.csv` and `autoType`, then builds the chart with the `plot` and `dot` functions from the Observable Plot UMD bundle, while relying on D3 v6 for data parsing.

Mar 6, 2022

Fork of Iris Dataset Scatter Plot

This scatter plot visualizes the classic Iris Dataset, mapping petal length and width on the x- and y-axes, with each point colored by species (setosa, versicolor, virginica) via a custom marker function. Built with vanilla HTML and D3 v6, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render SVG circles and axes. The data loads from a remote CSV using `d3.csv`, and the plot fills the browser window, with marks carrying additional sepal measurements as unused `rx` and `ry` attributes.

Mar 6, 2022

ha

This horizontal bar chart displays the top 20 countries by unit cost, with each row’s bar length proportional to the value. The React component loads CSV data via `d3.csv`, slices the first 20 rows, and renders an SVG using `scaleBand` for the y-axis and `scaleLinear` for the x-axis. Axis ticks and labels are drawn manually, while the bars are simple `<rect>` elements. The chart includes red vertical gridlines and a title, with margins defining the plot area.

Mar 6, 2022

Fork of Iris Dataset Scatter Plot

This visualization displays the Iris Dataset as a scatter plot, mapping petal length to the x-axis and petal width to the y-axis, with points colored by species (blue for setosa, red for versicolor, black for virginica). The code loads the data via `d3.csv`, scales the axes with `d3.scaleLinear`, and renders the circles as SVG elements using `selectAll` and `join`, while also storing sepal measurements for potential use. Axes are added with `d3.axisLeft` and `d3.axisBottom`, and the chart fills the entire viewport.

Fork of Fork of Iris Dataset Scatter Plot

This visualization displays the Iris Dataset as a scatter plot, mapping petal length and width to the x and y axes while encoding species as color. It reads CSV data via `d3.csv`, uses `d3.scaleLinear` with `d3.extent` to set domains, and renders SVG circles with `d3.axisLeft` and `d3.axisBottom`. Each point also carries sepal measurements as attributes, though these are not visually encoded. The plot dynamically sizes to the window and uses a 24px tick font for readability.

Fork of Iris Dataset Scatter Plot

This example visualizes the Iris Dataset, plotting petal length against petal width, with each point colored by species. A scatter of circles maps these measurements, while additional sepal dimensions are stored as unused properties on each data point. The visualization loads CSV data via `d3.csv`, constructs scales with `d3.scaleLinear`, and renders circles and axes using SVG. The code uses D3 v6, with styling applied through `d3.axisLeft` and `d3.axisBottom`. The plot fills the browser window, and tick labels are enlarged for readability.

Fork of Iris Dataset Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length and width to the x- and y-axes while coloring points by species (setosa, versicolor, and virginica). Using D3 v6, the code loads the CSV data, applies linear scales via `scaleLinear` and `extent`, and renders circles with SVG. It also passes sepal measurements as `rx` and `ry` attributes, though these do not affect circle radius, which remains fixed. Axes are drawn with `axisLeft` and `axisBottom`.

Fork of ICE-6: Rendering Marks and Channels with React & D3

This visualization is a React application that displays a horizontal bar chart of the top 10 most populous countries. The chart uses D3.js version 5 to load CSV data, and scales the bar lengths according to each country's population. The React component renders SVG elements, creating bars with lengths proportional to the values, and uses D3's `scaleBand` and `scaleLinear` for positioning and scaling. It includes axis tick marks and labels generated with D3's `ticks` function.

Fork of ICE-6: Rendering Marks and Channels with React & D3

This fork of ICE-6 demonstrates a bar chart of the top 10 most populous countries, using React hooks and D3 v5 to render SVG marks and channels. The component loads CSV data with `d3.csv`, sorts by 2019 population, and maps values through `scaleBand` for the y-axis and `scaleLinear` for the x-axis. Ticks are generated via `xScale.ticks()`, while React's `useState` and `useEffect` manage the asynchronous data loading and state updates.

Fork of ice5 Assignment

This example displays the text “ice5” in the center of the page using D3’s `select` method to set the content of a `div` element. It loads a local ES6 module, `myMessage.js`, to supply the text string. The visualization also fetches a CSV file containing the Iris dataset from a GitHub gist, using `fetch` with `d3.csvParse` to count and log the number of rows and columns to the console, though it does not render the data graphically. Styling is applied via an external CSS file.

Fork of ICE-6: Rendering Marks and Channels with React & D3

This bar chart displays the top 10 most populous countries for 2019, using horizontal bars to encode population size. The visualization is built with React and D3 v5, where React manages the component state and rendering of SVG elements while D3’s `csv`, `scaleBand`, and `scaleLinear` handle data loading and scaling. Axes are manually rendered as SVG groups with tick marks, and the data originates from a GitHub-hosted CSV file.

Fork of Fork of ICE-6: Rendering Marks and Channels with React & D3

A horizontal bar chart displays the top 10 most populous countries for 2019, with country names on the y-axis and population values on the x-axis. The visualization is built using React for component structure and D3.js for data processing and SVG rendering. It fetches CSV data from a remote source, maps population values, and uses D3's `scaleBand` and `scaleLinear` for axes and bar positioning. D3's `csv` function loads the data, which is then rendered as SVG rectangles within a React SVG element.

Fork of ICE-6: Rendering Marks and Channels with React & D3

Fork of ice5 Assignment

ICE-6: Rendering products

This visualization shows a horizontal bar chart comparing the top ten countries by 2019 population data loaded from a CSV file. The chart renders bars with proportional widths using React and D3 v7, where the y-axis uses `scaleBand` for categorical country labels and the x-axis uses `scaleLinear` for population values. The code constructs SVG elements directly, including manually drawn axis ticks, grid lines, and rectangles for each data bar, with margins and dimensions defined as constants.

Fork of United Nations Bar Chart with SVG

This example shows a horizontal bar chart of the top 10 most populous countries in 2019, with each bar paired with a flag image of its country. The chart loads population data from a CSV file and renders it as SVG using React and D3 v7, employing `d3.csv`, `scaleBand`, and `scaleLinear` for the axes and layout. Flag images are pulled from a remote SVG collection and positioned next to each bar using custom data mapping, with gridlines and tick labels generated from the scales.

ICE-5: Loading and Parsing CSV Data with D3.js

This example demonstrates how to load and parse external CSV data using D3.js, displaying the dataset's size, row count, and column count in a styled HTML page. It fetches data from a GitHub gist URL using the `d3.csv()` method, then formats the output with `d3.csvFormat()` to calculate the file size in kilobytes. The page includes a heading, a pink message container, and an image of a gold cat, all styled with basic CSS. The code relies on D3 v7, imported via a CDN, and updates the DOM through `document.getElementById()`.

Feb 28, 2022

Fork of Fork of HTML Starter

This example produces a minimal web page displaying the text “Hello HTML!” centered in the browser window. It uses plain HTML and CSS with a `.message` class to set the font size and alignment. The page’s structure and styling are defined entirely within a single `index.html` file, containing a `<style>` block and a `<div>` element. The example does not include any JavaScript or external libraries, relying only on native browser rendering.

Feb 28, 2022

Untitled

This example shows a stylized dashboard layout in SVG, with minimal decorative elements like circular and oval shapes, small icons, and annotated lines drawn in grayscale tones. The visual centers on two large rounded rectangles that appear to frame data areas, flanked by bar-chart-like segments and small circular markers. The rendering uses React to produce static SVG markup, with no interactive or dynamic behavior. The included JavaScript and CSS files are referenced but not detailed, so the composition is purely presentational, illustrating a clean, grid-like interface design.

Feb 27, 2022

HELLO GUYS

A hand-drawn smiley face rendered as static SVG shapes, with a gray circular head outlined in red, two small black eyes, and a partial mouth arc. The example demonstrates basic D3.js v7 selection and shape generation, using `d3.arc` to create the mouth path and `d3.select` to append elements to an SVG container. The visualization is minimal and static, with no interactive or animated behavior, and the mouth's angular range is set between π/2 and π, leaving the face incomplete. Data is not loaded; all geometry is defined directly in the code.

Feb 27, 2022

Fork of Hello VizHub

This example demonstrates a minimal D3.js setup that displays the text "Hello VizHub!" in the center of the page using the `select` API to set the text content of a `<div>` element. It imports the `select` function from the `d3` module via UNPKG, along with a local ES6 module that exports the message string. The page loads D3 v5 from a CDN and uses a separate stylesheet to center and enlarge the text. The code also logs the bundle size, row count, and column count from an unspecified data source to the browser console.

Feb 25, 2022

A Circle

This example displays a static SVG composition of a blue circle with a black outline, two smaller inner circles positioned as eyes, and a path element intended as a mouth, suggesting a partial smiley face. The drawing uses explicit pixel coordinates for the circles within an SVG canvas. The code briefly loads D3 v7 and prepares to select the SVG element, while a separate JavaScript snippet imports `select` and `arc` from D3, appending a group and defining a path with an arc generator that specifies inner and outer radii and start and end angles, though the arc itself is not visibly rendered in the final output.

Feb 25, 2022

Fork of homework smiley face

This example presents a stylized smiley face rendered as an SVG graphic within a React application. The face is composed of basic geometric shapes, including circles for the head and eyes, lines for eyebrows and hair, and a path for the mouth. The visualization is built using D3.js version 7 APIs, specifically the `arc` function to generate the smile, and React for component-based structuring. The rendering is declarative, with all shapes positioned relative to the center of a 960x500 viewport, using hardcoded coordinates and styling properties. The code demonstrates combining D3's path generation with React's SVG element creation.

Feb 20, 2022

Fork of Fork of Fork of Data_Visualization_YellowFace_PY

A static smiley face rendered as SVG elements, with a green circle for the head, blue stroke outline, and two dark eyes of differing sizes. The display shows the face centered on a 960x500 canvas, with the mouth drawn as an arc path. The visualization uses D3 v7 to select the SVG container and append a group, while the mouth is generated with the `arc()` generator, specifying inner and outer radii and angular bounds. The code demonstrates basic D3 shape generation alongside static SVG primitives.

Feb 20, 2022